Sfoglia il codice sorgente

Merge pull request #1455 from ckeditor/t/ckeditor5-vue/6

Docs: Added the Document editor section in the Vue.js integration guide. Closes ckeditor/ckeditor5-vue#6.
Kamil Piechaczek 7 anni fa
parent
commit
8087de23ca
1 ha cambiato i file con 38 aggiunte e 0 eliminazioni
  1. 38 0
      docs/builds/guides/frameworks/vuejs.md

+ 38 - 0
docs/builds/guides/frameworks/vuejs.md

@@ -320,6 +320,44 @@ Now all you need to do is specify the list of rich text editor options (**includ
 </script>
 ```
 
+## Using the Document editor build
+
+If you use the {@link framework/guides/document-editor Document editor} in your application, you need to {@link module:editor-decoupled/decouplededitor~DecoupledEditor.create manually add the editor toolbar to the DOM}.
+
+Since accessing the editor toolbar is not possible until after the editor instance is {@link module:core/editor/editor~Editor#event:ready ready}, put your toolbar insertion code in a method executed upon the [`ready`](#ready) event of the component, like in the following example:
+
+```html
+<template>
+		<div id="app">
+			<ckeditor :editor="editor" @ready="onReady" ... ></ckeditor>
+		</div>
+</template>
+
+<script>
+	import DecoupledEditor from '@ckeditor/ckeditor5-build-decoupled-document';
+
+	export default {
+		name: 'app',
+		data() {
+			return {
+				editor: DecoupledEditor,
+
+				// ...
+			};
+		},
+		methods: {
+			onReady( editor )  {
+				// Insert the toolbar before the editable area.
+				editor.ui.view.editable.element.parentElement.insertBefore(
+					editor.ui.view.toolbar.element,
+					editor.ui.view.editable.element
+				);
+			}
+		}
+	}
+</script>
+```
+
 ## Component directives
 
 ### `editor`