mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-08-26 04:05:57 +00:00
Simplified wysiwyg toolbar with a overflow groups
This commit is contained in:
parent
c8b6f622f4
commit
84c501bcf4
@ -16,7 +16,6 @@ const style_formats = [
|
|||||||
{title: "Tiny Header", format: "h5"},
|
{title: "Tiny Header", format: "h5"},
|
||||||
{title: "Paragraph", format: "p", exact: true, classes: ''},
|
{title: "Paragraph", format: "p", exact: true, classes: ''},
|
||||||
{title: "Blockquote", format: "blockquote"},
|
{title: "Blockquote", format: "blockquote"},
|
||||||
{title: "Inline Code", inline: "code"},
|
|
||||||
{
|
{
|
||||||
title: "Callouts", items: [
|
title: "Callouts", items: [
|
||||||
{title: "Information", format: 'calloutinfo'},
|
{title: "Information", format: 'calloutinfo'},
|
||||||
@ -61,24 +60,45 @@ function file_picker_callback(callback, value, meta) {
|
|||||||
|
|
||||||
/**
|
/**
|
||||||
* @param {WysiwygConfigOptions} options
|
* @param {WysiwygConfigOptions} options
|
||||||
* @return {string}
|
* @return {{toolbar: string, groupButtons: Object<string, Object>}}
|
||||||
*/
|
*/
|
||||||
function buildToolbar(options) {
|
function buildToolbar(options) {
|
||||||
const textDirPlugins = options.textDirection === 'rtl' ? 'ltr rtl' : '';
|
const textDirPlugins = options.textDirection === 'rtl' ? 'ltr rtl' : '';
|
||||||
|
|
||||||
|
const groupButtons = {
|
||||||
|
formatoverflow: {
|
||||||
|
icon: 'more-drawer',
|
||||||
|
tooltip: 'More',
|
||||||
|
items: 'strikethrough superscript subscript inlinecode removeformat'
|
||||||
|
},
|
||||||
|
listoverflow: {
|
||||||
|
icon: 'more-drawer',
|
||||||
|
tooltip: 'More',
|
||||||
|
items: 'outdent indent'
|
||||||
|
},
|
||||||
|
insertoverflow: {
|
||||||
|
icon: 'more-drawer',
|
||||||
|
tooltip: 'More',
|
||||||
|
items: 'hr codeeditor drawio media'
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
const toolbar = [
|
const toolbar = [
|
||||||
'undo redo',
|
'undo redo',
|
||||||
'styleselect',
|
'styleselect',
|
||||||
'bold italic underline strikethrough superscript subscript',
|
'bold italic underline formatoverflow',
|
||||||
'forecolor backcolor',
|
'forecolor backcolor',
|
||||||
'alignleft aligncenter alignright alignjustify',
|
'alignleft aligncenter alignright alignjustify',
|
||||||
'bullist numlist outdent indent',
|
'bullist numlist listoverflow',
|
||||||
textDirPlugins,
|
textDirPlugins,
|
||||||
'table imagemanager-insert link hr codeeditor drawio media',
|
'link table imagemanager-insert insertoverflow',
|
||||||
'removeformat code about fullscreen'
|
'code about fullscreen'
|
||||||
];
|
];
|
||||||
|
|
||||||
return toolbar.filter(row => Boolean(row)).join(' | ');
|
return {
|
||||||
|
toolbar: toolbar.filter(row => Boolean(row)).join(' | '),
|
||||||
|
groupButtons,
|
||||||
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -168,6 +188,15 @@ function getSetupCallback(options) {
|
|||||||
|
|
||||||
// Custom handler hook
|
// Custom handler hook
|
||||||
window.$events.emitPublic(options.containerElement, 'editor-tinymce::setup', {editor});
|
window.$events.emitPublic(options.containerElement, 'editor-tinymce::setup', {editor});
|
||||||
|
|
||||||
|
// Inline code format button
|
||||||
|
editor.ui.registry.addButton('inlinecode', {
|
||||||
|
tooltip: 'Inline code',
|
||||||
|
icon: 'sourcecode',
|
||||||
|
onAction() {
|
||||||
|
editor.execCommand('mceToggleFormat', false, 'code');
|
||||||
|
}
|
||||||
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -180,6 +209,8 @@ export function build(options) {
|
|||||||
// Set language
|
// Set language
|
||||||
window.tinymce.addI18n(options.language, options.translationMap);
|
window.tinymce.addI18n(options.language, options.translationMap);
|
||||||
|
|
||||||
|
const {toolbar, groupButtons: toolBarGroupButtons} = buildToolbar(options);
|
||||||
|
|
||||||
// Return config object
|
// Return config object
|
||||||
return {
|
return {
|
||||||
width: '100%',
|
width: '100%',
|
||||||
@ -207,7 +238,7 @@ export function build(options) {
|
|||||||
plugins: gatherPlugins(options),
|
plugins: gatherPlugins(options),
|
||||||
imagetools_toolbar: 'imageoptions',
|
imagetools_toolbar: 'imageoptions',
|
||||||
contextmenu: false,
|
contextmenu: false,
|
||||||
toolbar: buildToolbar(options),
|
toolbar: toolbar,
|
||||||
content_style: `html, body, html.dark-mode {background: ${options.darkMode ? '#222' : '#fff'};} body {padding-left: 15px !important; padding-right: 15px !important; margin:0!important; margin-left:auto!important;margin-right:auto!important;}`,
|
content_style: `html, body, html.dark-mode {background: ${options.darkMode ? '#222' : '#fff'};} body {padding-left: 15px !important; padding-right: 15px !important; margin:0!important; margin-left:auto!important;margin-right:auto!important;}`,
|
||||||
style_formats,
|
style_formats,
|
||||||
style_formats_merge: false,
|
style_formats_merge: false,
|
||||||
@ -225,7 +256,12 @@ export function build(options) {
|
|||||||
init_instance_callback(editor) {
|
init_instance_callback(editor) {
|
||||||
loadCustomHeadContent(editor);
|
loadCustomHeadContent(editor);
|
||||||
},
|
},
|
||||||
setup: getSetupCallback(options),
|
setup(editor) {
|
||||||
|
for (const [key, config] of Object.entries(toolBarGroupButtons)) {
|
||||||
|
editor.ui.registry.addGroupToolbarButton(key, config);
|
||||||
|
}
|
||||||
|
getSetupCallback(options)(editor);
|
||||||
|
},
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -23,6 +23,7 @@ return [
|
|||||||
'bottom' => 'Bottom',
|
'bottom' => 'Bottom',
|
||||||
'width' => 'Width',
|
'width' => 'Width',
|
||||||
'height' => 'Height',
|
'height' => 'Height',
|
||||||
|
'More' => 'More',
|
||||||
|
|
||||||
// Toolbar
|
// Toolbar
|
||||||
'formats' => 'Formats',
|
'formats' => 'Formats',
|
||||||
@ -32,7 +33,7 @@ return [
|
|||||||
'header_tiny' => 'Tiny Header',
|
'header_tiny' => 'Tiny Header',
|
||||||
'paragraph' => 'Paragraph',
|
'paragraph' => 'Paragraph',
|
||||||
'blockquote' => 'Blockquote',
|
'blockquote' => 'Blockquote',
|
||||||
'inline_code' => 'Inline Code',
|
'inline_code' => 'Inline code',
|
||||||
'callouts' => 'Callouts',
|
'callouts' => 'Callouts',
|
||||||
'callout_information' => 'Information',
|
'callout_information' => 'Information',
|
||||||
'callout_success' => 'Success',
|
'callout_success' => 'Success',
|
||||||
@ -132,6 +133,7 @@ return [
|
|||||||
'open_link_new' => 'New window',
|
'open_link_new' => 'New window',
|
||||||
|
|
||||||
// About view
|
// About view
|
||||||
|
'about_title' => 'About the WYSIWYG Editor',
|
||||||
'editor_license' => 'Editor License & Copyright',
|
'editor_license' => 'Editor License & Copyright',
|
||||||
'editor_tiny_license' => 'This editor is built using :tinyLink which is provided under an LGPLv2.1 license.',
|
'editor_tiny_license' => 'This editor is built using :tinyLink which is provided under an LGPLv2.1 license.',
|
||||||
'editor_tiny_license_link' => 'The copyright and license details of TinyMCE can be found here.',
|
'editor_tiny_license_link' => 'The copyright and license details of TinyMCE can be found here.',
|
||||||
|
@ -30,6 +30,9 @@
|
|||||||
/**
|
/**
|
||||||
* Format Menu Hacks
|
* Format Menu Hacks
|
||||||
*/
|
*/
|
||||||
|
.tox .tox-tbtn--bespoke .tox-tbtn__select-label {
|
||||||
|
width: 6em !important;
|
||||||
|
}
|
||||||
.tox-menu .tox-collection__item blockquote::before {
|
.tox-menu .tox-collection__item blockquote::before {
|
||||||
content: none;
|
content: none;
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user