webapp/bookstack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-07-28 17:02:04 +03:00
Code Activity

Input WYSIWYG: Added compontent and rough logic to book form

Browse Source 
Just as a draft for prototyping and playing around to get things
started.
This commit is contained in:
Dan Brown
2023-12-16 14:48:35 +00:00
parent fc2e8ed315
commit 569542f0bb
7 changed files with 95 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
resources/js/components/index.js
View File

@ -58,3 +58,4 @@ export {TriLayout} from './tri-layout';
export {UserSelect} from './user-select';
export {WebhookEvents} from './webhook-events';
export {WysiwygEditor} from './wysiwyg-editor';
export {WysiwygInput} from './wysiwyg-input';

12
resources/js/components/wysiwyg-editor.js
View File

@ -1,4 +1,4 @@
import {build as buildEditorConfig} from '../wysiwyg/config';
import {buildForEditor as buildEditorConfig} from '../wysiwyg/config';
import {Component} from './component';
export class WysiwygEditor extends Component {
@ -6,17 +6,13 @@ export class WysiwygEditor extends Component {
setup() {
this.elem = this.$el;
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,
darkMode: document.documentElement.classList.contains('dark-mode'),
textDirection: this.$opts.textDirection,
drawioUrl: this.getDrawIoUrl(),
pageId: Number(this.pageId),
pageId: Number(this.$opts.pageId),
translations: {
imageUploadErrorText: this.$opts.imageUploadErrorText,
serverUploadLimitText: this.$opts.serverUploadLimitText,

26
resources/js/components/wysiwyg-input.js Normal file
View File

@ -0,0 +1,26 @@
import {Component} from './component';
import {buildForInput} from '../wysiwyg/config';
export class WysiwygInput extends Component {
setup() {
this.elem = this.$el;
const config = buildForInput({
language: this.$opts.language,
containerElement: this.elem,
darkMode: document.documentElement.classList.contains('dark-mode'),
textDirection: this.textDirection,
translations: {
imageUploadErrorText: this.$opts.imageUploadErrorText,
serverUploadLimitText: this.$opts.serverUploadLimitText,
},
translationMap: window.editor_translations,
});
window.tinymce.init(config).then(editors => {
this.editor = editors[0];
});
}
}