|
|
@@ -10,6 +10,7 @@
|
|
|
import EditorUI from '@ckeditor/ckeditor5-core/src/editor/editorui';
|
|
|
import enableToolbarKeyboardFocus from '@ckeditor/ckeditor5-ui/src/toolbar/enabletoolbarkeyboardfocus';
|
|
|
import normalizeToolbarConfig from '@ckeditor/ckeditor5-ui/src/toolbar/normalizetoolbarconfig';
|
|
|
+import { attachPlaceholder, getPlaceholderElement } from '@ckeditor/ckeditor5-engine/src/view/placeholder';
|
|
|
|
|
|
/**
|
|
|
* The classic editor UI class.
|
|
|
@@ -38,6 +39,9 @@ export default class ClassicEditorUI extends EditorUI {
|
|
|
init() {
|
|
|
const editor = this.editor;
|
|
|
const view = this.view;
|
|
|
+ const editingView = editor.editing.view;
|
|
|
+
|
|
|
+ view.editable.bind( 'isFocused' ).to( editingView.document );
|
|
|
|
|
|
view.render();
|
|
|
|
|
|
@@ -50,20 +54,30 @@ export default class ClassicEditorUI extends EditorUI {
|
|
|
}
|
|
|
|
|
|
// Setup the editable.
|
|
|
- const editingRoot = editor.editing.view.document.getRoot();
|
|
|
- view.editable.bind( 'isReadOnly' ).to( editingRoot );
|
|
|
- view.editable.bind( 'isFocused' ).to( editor.editing.view.document );
|
|
|
+ const editingRoot = editingView.document.getRoot();
|
|
|
view.editable.name = editingRoot.rootName;
|
|
|
|
|
|
+ editor.on( 'dataReady', () => {
|
|
|
+ view.editable.enableDomRootActions();
|
|
|
+
|
|
|
+ attachPlaceholder( editingView, getPlaceholderElement( editingRoot ), 'Type some text...' );
|
|
|
+ } );
|
|
|
+
|
|
|
this.focusTracker.add( this.view.editableElement );
|
|
|
|
|
|
this.view.toolbar.fillFromConfig( this._toolbarConfig.items, this.componentFactory );
|
|
|
|
|
|
enableToolbarKeyboardFocus( {
|
|
|
- origin: editor.editing.view,
|
|
|
+ origin: editingView,
|
|
|
originFocusTracker: this.focusTracker,
|
|
|
originKeystrokeHandler: editor.keystrokes,
|
|
|
toolbar: this.view.toolbar
|
|
|
} );
|
|
|
}
|
|
|
+
|
|
|
+ destroy() {
|
|
|
+ this.view.editable.disableDomRootActions();
|
|
|
+
|
|
|
+ super.destroy();
|
|
|
+ }
|
|
|
}
|