X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/c6ad16dba657c82512ae495a4a38b99b8cfa9eeb..e2409a5fab3e38e1753adb51ff432b6104c7572b:/resources/js/components/wysiwyg-editor.js diff --git a/resources/js/components/wysiwyg-editor.js b/resources/js/components/wysiwyg-editor.js index 446f2ca49..98732dab7 100644 --- a/resources/js/components/wysiwyg-editor.js +++ b/resources/js/components/wysiwyg-editor.js @@ -1,30 +1,14 @@ -import {build as buildEditorConfig} from "../wysiwyg/config"; +import {Component} from './component'; -class WysiwygEditor { +export class WysiwygEditor extends Component { setup() { this.elem = this.$el; + this.editArea = this.$refs.editArea; - this.pageId = this.$opts.pageId; - this.textDirection = this.$opts.textDirection; - this.isDarkMode = document.documentElement.classList.contains('dark-mode'); - - this.tinyMceConfig = buildEditorConfig({ - language: this.$opts.language, - containerElement: this.elem, - darkMode: this.isDarkMode, - textDirection: this.textDirection, - drawioUrl: this.getDrawIoUrl(), - pageId: Number(this.pageId), - translations: { - imageUploadErrorText: this.$opts.imageUploadErrorText, - serverUploadLimitText: this.$opts.serverUploadLimitText, - }, - translationMap: window.editor_translations, + window.importVersioned('wysiwyg').then(wysiwyg => { + wysiwyg.createPageEditorInstance(this.editArea); }); - - window.$events.emitPublic(this.elem, 'editor-tinymce::pre-init', {config: this.tinyMceConfig}); - window.tinymce.init(this.tinyMceConfig); } getDrawIoUrl() { @@ -35,6 +19,16 @@ class WysiwygEditor { return ''; } -} + /** + * Get the content of this editor. + * Used by the parent page editor component. + * @return {{html: String}} + */ + getContent() { + // TODO - Update + return { + html: this.editor.getContent(), + }; + } -export default WysiwygEditor; +}