瀏覽代碼

Docs: Added FAQ entries about using the ckeditorInstance property and adding attributes to view root editables.

Aleksander Nowodzinski 6 年之前
父節點
當前提交
d0cbf5cfc4
共有 1 個文件被更改,包括 48 次插入0 次删除
  1. 48 0
      docs/builds/guides/faq.md

+ 48 - 0
docs/builds/guides/faq.md

@@ -111,3 +111,51 @@ plugins: [
 You can also use the relative path which is resolved relative to the resource that imports `bold.svg` (the {@link module:basic-styles/bold/boldui~BoldUI `BoldUI`} class file in this scenario).
 
 Learn more about {@link builds/guides/integration/advanced-setup#webpack-configuration building CKEditor 5 using webpack}.
+
+## How to get the editor instance object from the DOM element?
+
+If you have a reference to the editor editable's DOM element (that's the one with the `.ck-editor__editable` class and the `contenteditable` attribute), you can access the editor instance this editable element belongs to using the `ckeditorInstance` property:
+
+```html
+<!-- The editable element in the editor's DOM structure. -->
+<div class="... ck-editor__editable ..." contenteditable="true">
+	<!-- Editable content. -->
+</div>
+```
+
+```js
+// A reference to the editor editable element in DOM.
+const domEditableElement = document.querySelector( '.ck-editor__editable' );
+
+// Get the editor instance from the editable element.
+const editorInstance = domEditableElement.ckeditorInstance;
+
+// Use the editor instance API.
+editorInstance.setData( '<p>Hello world!<p>' );
+```
+
+## How to add an attribute to the editor editable in DOM?
+
+If you have a reference to the editor instance, simply use the {@link framework/guides/architecture/editing-engine#changing-the-view `change()`} method of the view and set the new attribute via the {@link module:engine/view/downcastwriter~DowncastWriter view downcast writer}:
+
+```js
+editor.editing.view.change( writer => {
+	const viewEditableRoot = editor.editing.view.document.getRoot();
+
+	writer.setAttribute( 'myAttribute', 'value', viewEditableRoot );
+} );
+```
+
+If you do not have the reference to the editor instance but you have access to the editable element in DOM, you can [access it using the `ckeditorInstance` property](#how-to-get-the-editor-instance-object-from-the-dom-element) and then use the same API to set the attribute:
+
+```js
+const domEditableElement = document.querySelector( '.ck-editor__editable' );
+const editorInstance = domEditableElement.ckeditorInstance;
+
+editor.editing.view.change( writer => {
+	// Map the editable element in DOM to the editable element in editor's view.
+	const viewEditableRoot = editorInstance.editing.view.domConverter.mapDomToView( domEditableElement );
+
+	writer.setAttribute( 'myAttribute', 'value', viewEditableRoot );
+} );
+```