mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-10-30 07:32:39 +01:00
Input WYSIWYG: Added compontent and rough logic to book form
Just as a draft for prototyping and playing around to get things started.
This commit is contained in:
parent
fc2e8ed315
commit
569542f0bb
@ -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';
|
||||
|
@ -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
26
resources/js/components/wysiwyg-input.js
Normal 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];
|
||||
});
|
||||
}
|
||||
|
||||
}
|
@ -217,7 +217,7 @@ body {
|
||||
* @param {WysiwygConfigOptions} options
|
||||
* @return {Object}
|
||||
*/
|
||||
export function build(options) {
|
||||
export function buildForEditor(options) {
|
||||
// Set language
|
||||
window.tinymce.addI18n(options.language, options.translationMap);
|
||||
|
||||
@ -290,6 +290,54 @@ export function build(options) {
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {WysiwygConfigOptions} options
|
||||
* @return {RawEditorOptions}
|
||||
*/
|
||||
export function buildForInput(options) {
|
||||
// Set language
|
||||
window.tinymce.addI18n(options.language, options.translationMap);
|
||||
|
||||
// BookStack Version
|
||||
const version = document.querySelector('script[src*="/dist/app.js"]').getAttribute('src').split('?version=')[1];
|
||||
|
||||
// Return config object
|
||||
return {
|
||||
width: '100%',
|
||||
height: '300px',
|
||||
target: options.containerElement,
|
||||
cache_suffix: `?version=${version}`,
|
||||
content_css: [
|
||||
window.baseUrl('/dist/styles.css'),
|
||||
],
|
||||
branding: false,
|
||||
skin: options.darkMode ? 'tinymce-5-dark' : 'tinymce-5',
|
||||
body_class: 'page-content',
|
||||
browser_spellcheck: true,
|
||||
relative_urls: false,
|
||||
language: options.language,
|
||||
directionality: options.textDirection,
|
||||
remove_script_host: false,
|
||||
document_base_url: window.baseUrl('/'),
|
||||
end_container_on_empty_block: true,
|
||||
remove_trailing_brs: false,
|
||||
statusbar: false,
|
||||
menubar: false,
|
||||
plugins: 'link autolink',
|
||||
contextmenu: false,
|
||||
toolbar: 'bold italic underline link',
|
||||
content_style: getContentStyle(options),
|
||||
color_map: colorMap,
|
||||
init_instance_callback(editor) {
|
||||
const head = editor.getDoc().querySelector('head');
|
||||
head.innerHTML += fetchCustomHeadContent();
|
||||
},
|
||||
setup(editor) {
|
||||
//
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* @typedef {Object} WysiwygConfigOptions
|
||||
* @property {Element} containerElement
|
||||
|
@ -1,3 +1,6 @@
|
||||
@push('head')
|
||||
<script src="{{ versioned_asset('libs/tinymce/tinymce.min.js') }}" nonce="{{ $cspNonce }}"></script>
|
||||
@endpush
|
||||
|
||||
{{ csrf_field() }}
|
||||
<div class="form-group title-input">
|
||||
@ -8,6 +11,15 @@
|
||||
<div class="form-group description-input">
|
||||
<label for="description">{{ trans('common.description') }}</label>
|
||||
@include('form.textarea', ['name' => 'description'])
|
||||
|
||||
<textarea component="wysiwyg-input"
|
||||
option:wysiwyg-input:language="{{ $locale->htmlLang() }}"
|
||||
option:wysiwyg-input:text-direction="{{ $locale->htmlDirection() }}"
|
||||
id="description_html" name="description_html" rows="5"
|
||||
@if($errors->has('description_html')) class="text-neg" @endif>@if(isset($model) || old('description_html')){{ old('description_html') ? old($name) : $model->description_html}}@endif</textarea>
|
||||
@if($errors->has('description_html'))
|
||||
<div class="text-neg text-small">{{ $errors->first('description_html') }}</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<div class="form-group collapsible" component="collapsible" id="logo-control">
|
||||
@ -63,3 +75,4 @@
|
||||
</div>
|
||||
|
||||
@include('entities.selector-popup', ['entityTypes' => 'page', 'selectorEndpoint' => '/search/entity-selector-templates'])
|
||||
@include('form.editor-translations')
|
@ -18,4 +18,4 @@
|
||||
<div class="text-neg text-small">{{ $errors->first('html') }}</div>
|
||||
@endif
|
||||
|
||||
@include('pages.parts.editor-translations')
|
||||
@include('form.editor-translations')
|
Loading…
Reference in New Issue
Block a user