-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() {
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;
+}