BookStack Code Mirror - bookstack/blob - resources/js/components/wysiwyg-editor.js

   1 import {build as buildEditorConfig} from '../wysiwyg/config';
   2 import {Component} from './component';
   3
   4 export class WysiwygEditor extends Component {
   5
   6     setup() {
   7         this.elem = this.$el;
   8
   9         this.pageId = this.$opts.pageId;
  10         this.textDirection = this.$opts.textDirection;
  11         this.isDarkMode = document.documentElement.classList.contains('dark-mode');
  12
  13         this.tinyMceConfig = buildEditorConfig({
  14             language: this.$opts.language,
  15             containerElement: this.elem,
  16             darkMode: this.isDarkMode,
  17             textDirection: this.textDirection,
  18             drawioUrl: this.getDrawIoUrl(),
  19             pageId: Number(this.pageId),
  20             translations: {
  21                 imageUploadErrorText: this.$opts.imageUploadErrorText,
  22                 serverUploadLimitText: this.$opts.serverUploadLimitText,
  23             },
  24             translationMap: window.editor_translations,
  25         });
  26
  27         window.$events.emitPublic(this.elem, 'editor-tinymce::pre-init', {config: this.tinyMceConfig});
  28         window.tinymce.init(this.tinyMceConfig).then(editors => {
  29             this.editor = editors[0];
  30         });
  31     }
  32
  33     getDrawIoUrl() {
  34         const drawioUrlElem = document.querySelector('[drawio-url]');
  35         if (drawioUrlElem) {
  36             return drawioUrlElem.getAttribute('drawio-url');
  37         }
  38         return '';
  39     }
  40
  41     /**
  42      * Get the content of this editor.
  43      * Used by the parent page editor component.
  44      * @return {{html: String}}
  45      */
  46     getContent() {
  47         return {
  48             html: this.editor.getContent(),
  49         };
  50     }
  51
  52 }