X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/921131f99949960f448b2cfbb0ad78edc8d4f24a..refs/pull/4467/head:/resources/js/components/wysiwyg-editor.js diff --git a/resources/js/components/wysiwyg-editor.js b/resources/js/components/wysiwyg-editor.js index f6ecb368a..21db207e6 100644 --- a/resources/js/components/wysiwyg-editor.js +++ b/resources/js/components/wysiwyg-editor.js @@ -1,6 +1,7 @@ -import {build as buildEditorConfig} from "../wysiwyg/config"; +import {build as buildEditorConfig} from '../wysiwyg/config'; +import {Component} from './component'; -class WysiwygEditor { +export class WysiwygEditor extends Component { setup() { this.elem = this.$el; @@ -10,6 +11,7 @@ class WysiwygEditor { this.isDarkMode = document.documentElement.classList.contains('dark-mode'); this.tinyMceConfig = buildEditorConfig({ + language: this.$opts.language, containerElement: this.elem, darkMode: this.isDarkMode, textDirection: this.textDirection, @@ -18,11 +20,14 @@ class WysiwygEditor { translations: { imageUploadErrorText: this.$opts.imageUploadErrorText, serverUploadLimitText: this.$opts.serverUploadLimitText, - } + }, + translationMap: window.editor_translations, }); window.$events.emitPublic(this.elem, 'editor-tinymce::pre-init', {config: this.tinyMceConfig}); - window.tinymce.init(this.tinyMceConfig); + window.tinymce.init(this.tinyMceConfig).then(editors => { + this.editor = editors[0]; + }); } getDrawIoUrl() { @@ -33,6 +38,15 @@ class WysiwygEditor { return ''; } -} + /** + * Get the content of this editor. + * Used by the parent page editor component. + * @return {{html: String}} + */ + getContent() { + return { + html: this.editor.getContent(), + }; + } -export default WysiwygEditor; +}