2023-12-16 09:48:35 -05:00
|
|
|
import {buildForEditor as buildEditorConfig} from '../wysiwyg/config';
|
2023-04-18 17:20:02 -04:00
|
|
|
import {Component} from './component';
|
2019-08-11 15:04:43 -04:00
|
|
|
|
2022-11-16 08:04:22 -05:00
|
|
|
export class WysiwygEditor extends Component {
|
2017-09-23 07:24:06 -04:00
|
|
|
|
2020-07-05 16:18:17 -04:00
|
|
|
setup() {
|
|
|
|
this.elem = this.$el;
|
|
|
|
|
2022-02-05 18:15:58 -05:00
|
|
|
this.tinyMceConfig = buildEditorConfig({
|
2022-02-06 16:17:08 -05:00
|
|
|
language: this.$opts.language,
|
2022-02-05 18:15:58 -05:00
|
|
|
containerElement: this.elem,
|
2023-12-16 09:48:35 -05:00
|
|
|
darkMode: document.documentElement.classList.contains('dark-mode'),
|
|
|
|
textDirection: this.$opts.textDirection,
|
2022-02-05 18:15:58 -05:00
|
|
|
drawioUrl: this.getDrawIoUrl(),
|
2023-12-16 09:48:35 -05:00
|
|
|
pageId: Number(this.$opts.pageId),
|
2022-02-05 18:15:58 -05:00
|
|
|
translations: {
|
|
|
|
imageUploadErrorText: this.$opts.imageUploadErrorText,
|
|
|
|
serverUploadLimitText: this.$opts.serverUploadLimitText,
|
2022-02-06 16:17:08 -05:00
|
|
|
},
|
|
|
|
translationMap: window.editor_translations,
|
2022-02-05 18:15:58 -05:00
|
|
|
});
|
2018-04-01 08:21:11 -04:00
|
|
|
|
2020-07-05 16:18:17 -04:00
|
|
|
window.$events.emitPublic(this.elem, 'editor-tinymce::pre-init', {config: this.tinyMceConfig});
|
2023-02-23 07:30:27 -05:00
|
|
|
window.tinymce.init(this.tinyMceConfig).then(editors => {
|
|
|
|
this.editor = editors[0];
|
|
|
|
});
|
2018-04-01 08:21:11 -04:00
|
|
|
}
|
|
|
|
|
2022-02-05 18:15:58 -05:00
|
|
|
getDrawIoUrl() {
|
2020-04-05 12:27:16 -04:00
|
|
|
const drawioUrlElem = document.querySelector('[drawio-url]');
|
|
|
|
if (drawioUrlElem) {
|
2022-02-05 18:15:58 -05:00
|
|
|
return drawioUrlElem.getAttribute('drawio-url');
|
2018-04-01 08:21:11 -04:00
|
|
|
}
|
2022-02-05 18:15:58 -05:00
|
|
|
return '';
|
2017-09-23 07:24:06 -04:00
|
|
|
}
|
|
|
|
|
2023-02-23 07:30:27 -05:00
|
|
|
/**
|
|
|
|
* Get the content of this editor.
|
|
|
|
* Used by the parent page editor component.
|
|
|
|
* @return {{html: String}}
|
|
|
|
*/
|
|
|
|
getContent() {
|
|
|
|
return {
|
2023-04-18 17:20:02 -04:00
|
|
|
html: this.editor.getContent(),
|
2023-02-23 07:30:27 -05:00
|
|
|
};
|
|
|
|
}
|
|
|
|
|
2023-04-18 17:20:02 -04:00
|
|
|
}
|