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

   1 import {buildForEditor 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.tinyMceConfig = buildEditorConfig({
  10             language: this.$opts.language,
  11             containerElement: this.elem,
  12             darkMode: document.documentElement.classList.contains('dark-mode'),
  13             textDirection: this.$opts.textDirection,
  14             drawioUrl: this.getDrawIoUrl(),
  15             pageId: Number(this.$opts.pageId),
  16             translations: {
  17                 imageUploadErrorText: this.$opts.imageUploadErrorText,
  18                 serverUploadLimitText: this.$opts.serverUploadLimitText,
  19             },
  20             translationMap: window.editor_translations,
  21         });
  22
  23         window.$events.emitPublic(this.elem, 'editor-tinymce::pre-init', {config: this.tinyMceConfig});
  24         window.tinymce.init(this.tinyMceConfig).then(editors => {
  25             this.editor = editors[0];
  26         });
  27     }
  28
  29     getDrawIoUrl() {
  30         const drawioUrlElem = document.querySelector('[drawio-url]');
  31         if (drawioUrlElem) {
  32             return drawioUrlElem.getAttribute('drawio-url');
  33         }
  34         return '';
  35     }
  36
  37     /**
  38      * Get the content of this editor.
  39      * Used by the parent page editor component.
  40      * @return {{html: String}}
  41      */
  42     getContent() {
  43         return {
  44             html: this.editor.getContent(),
  45         };
  46     }
  47
  48 }