mirror of https://github.com/Squidex/squidex.git
Sebastian
8 years ago
2 changed files with 156 additions and 0 deletions
@ -0,0 +1,100 @@ |
|||||
|
|
||||
|
function SquidexFormField() { |
||||
|
var disabledHandler; |
||||
|
var disabled; |
||||
|
var valueHandler; |
||||
|
var value; |
||||
|
var timer; |
||||
|
var height = document.body.offsetHeight; |
||||
|
|
||||
|
function eventListener(event) { |
||||
|
if (event.source !== window) { |
||||
|
if (event.data.type === 'disabled') { |
||||
|
disabled = event.data.isDisabled; |
||||
|
|
||||
|
if (disabledHandler) { |
||||
|
disabledHandler(disabled); |
||||
|
} |
||||
|
} else if (event.data.type === 'valueChanged') { |
||||
|
var value = event.data.value; |
||||
|
|
||||
|
if (valueHandler) { |
||||
|
valueHandler(value); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
document.body.style.margin = '0'; |
||||
|
document.body.style.padding = '0'; |
||||
|
|
||||
|
window.addEventListener('message', eventListener, false); |
||||
|
|
||||
|
window.parent.postMessage({ type: 'started' }, '*'); |
||||
|
window.parent.postMessage({ type: 'resize', height: height }, '*'); |
||||
|
|
||||
|
timer = setInterval(function () { |
||||
|
var newHeight = document.body.offsetHeight; |
||||
|
|
||||
|
if (height !== newHeight) { |
||||
|
height = newHeight; |
||||
|
|
||||
|
window.parent.postMessage({ type: 'resize', height: height }, '*') |
||||
|
} |
||||
|
}, 500); |
||||
|
|
||||
|
var editor = { |
||||
|
/* |
||||
|
* Notifies the control container that the editor has been touched. |
||||
|
*/ |
||||
|
touched: function () { |
||||
|
if (window.parent) { |
||||
|
window.parent.postMessage({ type: 'touched' }, '*'); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
/* |
||||
|
* Notifies the control container that the value has been changed. |
||||
|
*/ |
||||
|
valueChanged: function (value) { |
||||
|
if (window.parent) { |
||||
|
window.parent.postMessage({ type: 'valueChanged', value: value }, '*'); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
/* |
||||
|
* Register the disabled handler. |
||||
|
*/ |
||||
|
onDisabled: function (callback) { |
||||
|
disabledHandler = callback; |
||||
|
|
||||
|
if (callback) { |
||||
|
callback(disabled); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
/* |
||||
|
* Register the disabled handler. |
||||
|
*/ |
||||
|
onValueChanged: function (callback) { |
||||
|
valueHandler = callback; |
||||
|
|
||||
|
if (callback) { |
||||
|
callback(value); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
/* |
||||
|
* Clean the editor SDK. |
||||
|
*/ |
||||
|
clean: function () { |
||||
|
if (timer) { |
||||
|
window.removeEventListener('message', eventListener); |
||||
|
|
||||
|
timer(); |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
return editor; |
||||
|
}; |
||||
@ -0,0 +1,56 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html> |
||||
|
|
||||
|
<head> |
||||
|
<meta charset="utf-8"> |
||||
|
|
||||
|
<script src="editor-sdk.js"></script> |
||||
|
<script src="https://cdn.ckeditor.com/ckeditor5/10.0.0/classic/ckeditor.js"></script> |
||||
|
|
||||
|
<style> |
||||
|
.ck-editor__editable { |
||||
|
min-height: 250px; |
||||
|
} |
||||
|
</style> |
||||
|
</head> |
||||
|
|
||||
|
<body> |
||||
|
<textarea name="content" id="editor"></textarea> |
||||
|
|
||||
|
<script> |
||||
|
var element = document.getElementById('editor'); |
||||
|
|
||||
|
ClassicEditor |
||||
|
.create(element) |
||||
|
.catch(error => { |
||||
|
console.error(error); |
||||
|
}) |
||||
|
.then(editor => { |
||||
|
var field = new SquidexFormField(); |
||||
|
|
||||
|
field.onValueChanged(function (value) { |
||||
|
if (value) { |
||||
|
editor.setData(value); |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
field.onDisabled(function (disabled) { |
||||
|
editor.set('isReadOnly', disabled); |
||||
|
}); |
||||
|
|
||||
|
editor.model.document.on('change', function () { |
||||
|
var data = editor.getData(); |
||||
|
|
||||
|
field.valueChanged(data); |
||||
|
}); |
||||
|
|
||||
|
editor.ui.focusTracker.on('change:isFocused', function (event, name, isFocused) { |
||||
|
if (!isFocused) { |
||||
|
field.touched(); |
||||
|
} |
||||
|
}); |
||||
|
}); |
||||
|
</script> |
||||
|
</body> |
||||
|
|
||||
|
</html> |
||||
Loading…
Reference in new issue