mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-08-26 20:22:18 +00:00
Made further tweaks to align with current editor
- Ensured each of the core actions worked at a high level. - Handled some TinyMCE API changes. - Moved code block insert to its own button.
This commit is contained in:
parent
db4093d523
commit
0cde2704d0
@ -189,9 +189,11 @@ function codePlugin() {
|
|||||||
|
|
||||||
const $ = editor.$;
|
const $ = editor.$;
|
||||||
|
|
||||||
|
editor.ui.registry.addIcon('codeblock', '<svg width="24" height="24"><path d="M4 3h16c.6 0 1 .4 1 1v16c0 .6-.4 1-1 1H4a1 1 0 0 1-1-1V4c0-.6.4-1 1-1Zm1 2v14h14V5Z"/><path d="M11.103 15.423c.277.277.277.738 0 .922a.692.692 0 0 1-1.106 0l-4.057-3.78a.738.738 0 0 1 0-1.107l4.057-3.872c.276-.277.83-.277 1.106 0a.724.724 0 0 1 0 1.014L7.6 12.012ZM12.897 8.577c-.245-.312-.2-.675.08-.955.28-.281.727-.27 1.027.033l4.057 3.78a.738.738 0 0 1 0 1.107l-4.057 3.872c-.277.277-.83.277-1.107 0a.724.724 0 0 1 0-1.014l3.504-3.412z"/></svg>')
|
||||||
|
|
||||||
editor.ui.registry.addButton('codeeditor', {
|
editor.ui.registry.addButton('codeeditor', {
|
||||||
text: 'Code block',
|
title: 'Insert code block',
|
||||||
icon: false,
|
icon: 'codeblock',
|
||||||
onAction() {
|
onAction() {
|
||||||
editor.execCommand('codeeditor');
|
editor.execCommand('codeeditor');
|
||||||
}
|
}
|
||||||
@ -455,7 +457,7 @@ class WysiwygEditor {
|
|||||||
this.serverUploadLimitText = this.$opts.serverUploadLimitText;
|
this.serverUploadLimitText = this.$opts.serverUploadLimitText;
|
||||||
this.isDarkMode = document.documentElement.classList.contains('dark-mode');
|
this.isDarkMode = document.documentElement.classList.contains('dark-mode');
|
||||||
|
|
||||||
this.plugins = "image imagetools table textcolor paste link autolink fullscreen code customhr autosave lists codeeditor media";
|
this.plugins = "image imagetools table paste link autolink fullscreen code customhr autosave lists codeeditor media";
|
||||||
this.loadPlugins();
|
this.loadPlugins();
|
||||||
|
|
||||||
this.tinyMceConfig = this.getTinyMceConfig();
|
this.tinyMceConfig = this.getTinyMceConfig();
|
||||||
@ -481,7 +483,7 @@ class WysiwygEditor {
|
|||||||
|
|
||||||
getToolBar() {
|
getToolBar() {
|
||||||
const textDirPlugins = this.textDirection === 'rtl' ? 'ltr rtl' : '';
|
const textDirPlugins = this.textDirection === 'rtl' ? 'ltr rtl' : '';
|
||||||
return `undo redo | styleselect | bold italic underline strikethrough superscript subscript | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | table image-insert link hr drawio media | removeformat code ${textDirPlugins} fullscreen`
|
return `undo redo | styleselect | bold italic underline strikethrough superscript subscript | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | table image-insert link hr codeeditor drawio media | removeformat code ${textDirPlugins} fullscreen`
|
||||||
}
|
}
|
||||||
|
|
||||||
getTinyMceConfig() {
|
getTinyMceConfig() {
|
||||||
@ -512,6 +514,7 @@ class WysiwygEditor {
|
|||||||
valid_children: "-div[p|h1|h2|h3|h4|h5|h6|blockquote],+div[pre],+div[img]",
|
valid_children: "-div[p|h1|h2|h3|h4|h5|h6|blockquote],+div[pre],+div[img]",
|
||||||
plugins: this.plugins,
|
plugins: this.plugins,
|
||||||
imagetools_toolbar: 'imageoptions',
|
imagetools_toolbar: 'imageoptions',
|
||||||
|
contextmenu: false,
|
||||||
toolbar: this.getToolBar(),
|
toolbar: this.getToolBar(),
|
||||||
content_style: `html, body, html.dark-mode {background: ${this.isDarkMode ? '#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: ${this.isDarkMode ? '#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: [
|
||||||
@ -521,7 +524,6 @@ class WysiwygEditor {
|
|||||||
{title: "Header Tiny", format: "h5"},
|
{title: "Header Tiny", 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: "<Code Block>", cmd: 'codeeditor', format: 'codeeditor'},
|
|
||||||
{title: "Inline Code", inline: "code"},
|
{title: "Inline Code", inline: "code"},
|
||||||
{title: "Callouts", items: [
|
{title: "Callouts", items: [
|
||||||
{title: "Info", format: 'calloutinfo'},
|
{title: "Info", format: 'calloutinfo'},
|
||||||
@ -543,60 +545,37 @@ class WysiwygEditor {
|
|||||||
calloutwarning: {block: 'p', exact: true, attributes: {class: 'callout warning'}},
|
calloutwarning: {block: 'p', exact: true, attributes: {class: 'callout warning'}},
|
||||||
calloutdanger: {block: 'p', exact: true, attributes: {class: 'callout danger'}}
|
calloutdanger: {block: 'p', exact: true, attributes: {class: 'callout danger'}}
|
||||||
},
|
},
|
||||||
file_browser_callback: function (field_name, url, type, win) {
|
file_picker_types: 'file image',
|
||||||
|
file_picker_callback(callback, value, meta) {
|
||||||
|
|
||||||
if (type === 'file') {
|
// field_name, url, type, win
|
||||||
window.EntitySelectorPopup.show(function(entity) {
|
if (meta.filetype === 'file') {
|
||||||
const originalField = win.document.getElementById(field_name);
|
window.EntitySelectorPopup.show(entity => {
|
||||||
originalField.value = entity.link;
|
callback(entity.link, {
|
||||||
const mceForm = originalField.closest('.mce-form');
|
text: entity.name,
|
||||||
const inputs = mceForm.querySelectorAll('input');
|
title: entity.name,
|
||||||
|
});
|
||||||
// Set text to display if not empty
|
|
||||||
if (!inputs[1].value) {
|
|
||||||
inputs[1].value = entity.name;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Set title field
|
|
||||||
inputs[2].value = entity.name;
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
if (type === 'image') {
|
if (meta.filetype === 'image') {
|
||||||
// Show image manager
|
// Show image manager
|
||||||
window.ImageManager.show(function (image) {
|
window.ImageManager.show(function (image) {
|
||||||
|
callback(image.url, {alt: image.name});
|
||||||
// Set popover link input to image url then fire change event
|
|
||||||
// to ensure the new value sticks
|
|
||||||
win.document.getElementById(field_name).value = image.url;
|
|
||||||
if ("createEvent" in document) {
|
|
||||||
let evt = document.createEvent("HTMLEvents");
|
|
||||||
evt.initEvent("change", false, true);
|
|
||||||
win.document.getElementById(field_name).dispatchEvent(evt);
|
|
||||||
} else {
|
|
||||||
win.document.getElementById(field_name).fireEvent("onchange");
|
|
||||||
}
|
|
||||||
|
|
||||||
// Replace the actively selected content with the linked image
|
|
||||||
const imageUrl = image.thumbs.display || image.url;
|
|
||||||
let html = `<a href="${image.url}" target="_blank">`;
|
|
||||||
html += `<img src="${imageUrl}" alt="${image.name}">`;
|
|
||||||
html += '</a>';
|
|
||||||
win.tinyMCE.activeEditor.execCommand('mceInsertContent', false, html);
|
|
||||||
}, 'gallery');
|
}, 'gallery');
|
||||||
}
|
}
|
||||||
|
|
||||||
},
|
},
|
||||||
paste_preprocess: function (plugin, args) {
|
paste_preprocess(plugin, args) {
|
||||||
let content = args.content;
|
let content = args.content;
|
||||||
if (content.indexOf('<img src="file://') !== -1) {
|
if (content.indexOf('<img src="file://') !== -1) {
|
||||||
args.content = '';
|
args.content = '';
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
init_instance_callback: function(editor) {
|
init_instance_callback(editor) {
|
||||||
loadCustomHeadContent(editor);
|
loadCustomHeadContent(editor);
|
||||||
},
|
},
|
||||||
setup: function (editor) {
|
setup(editor) {
|
||||||
|
|
||||||
editor.on('ExecCommand change input NodeChange ObjectResized', editorChange);
|
editor.on('ExecCommand change input NodeChange ObjectResized', editorChange);
|
||||||
|
|
||||||
@ -734,7 +713,7 @@ class WysiwygEditor {
|
|||||||
|
|
||||||
// Custom Image picker button
|
// Custom Image picker button
|
||||||
editor.ui.registry.addButton('image-insert', {
|
editor.ui.registry.addButton('image-insert', {
|
||||||
title: 'My title',
|
title: 'Insert an image',
|
||||||
icon: 'image',
|
icon: 'image',
|
||||||
tooltip: 'Insert an image',
|
tooltip: 'Insert an image',
|
||||||
onAction() {
|
onAction() {
|
||||||
|
@ -19,6 +19,10 @@
|
|||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.page-content.mce-content-body > :last-child {
|
||||||
|
margin-bottom: 5rem;
|
||||||
|
}
|
||||||
|
|
||||||
.tox-toolbar__primary {
|
.tox-toolbar__primary {
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user