mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-10-01 05:36:00 +00:00
Merge pull request #3298 from BookStackApp/wysiwyg_links
WYSIWYG editor link updates
This commit is contained in:
commit
fd26f54b99
@ -2,6 +2,7 @@ import {register as registerShortcuts} from "./shortcuts";
|
|||||||
import {listen as listenForCommonEvents} from "./common-events";
|
import {listen as listenForCommonEvents} from "./common-events";
|
||||||
import {scrollToQueryString} from "./scrolling";
|
import {scrollToQueryString} from "./scrolling";
|
||||||
import {listenForDragAndPaste} from "./drop-paste-handling";
|
import {listenForDragAndPaste} from "./drop-paste-handling";
|
||||||
|
import {getPrimaryToolbar, registerAdditionalToolbars} from "./toolbars";
|
||||||
|
|
||||||
import {getPlugin as getCodeeditorPlugin} from "./plugin-codeeditor";
|
import {getPlugin as getCodeeditorPlugin} from "./plugin-codeeditor";
|
||||||
import {getPlugin as getDrawioPlugin} from "./plugin-drawio";
|
import {getPlugin as getDrawioPlugin} from "./plugin-drawio";
|
||||||
@ -58,48 +59,6 @@ function file_picker_callback(callback, value, meta) {
|
|||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* @param {WysiwygConfigOptions} options
|
|
||||||
* @return {{toolbar: string, groupButtons: Object<string, Object>}}
|
|
||||||
*/
|
|
||||||
function buildToolbar(options) {
|
|
||||||
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 details'
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const toolbar = [
|
|
||||||
'undo redo',
|
|
||||||
'styleselect',
|
|
||||||
'bold italic underline forecolor backcolor formatoverflow',
|
|
||||||
'alignleft aligncenter alignright alignjustify',
|
|
||||||
'bullist numlist listoverflow',
|
|
||||||
textDirPlugins,
|
|
||||||
'link table imagemanager-insert insertoverflow',
|
|
||||||
'code about fullscreen'
|
|
||||||
];
|
|
||||||
|
|
||||||
return {
|
|
||||||
toolbar: toolbar.filter(row => Boolean(row)).join(' | '),
|
|
||||||
groupButtons,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @param {WysiwygConfigOptions} options
|
* @param {WysiwygConfigOptions} options
|
||||||
* @return {string}
|
* @return {string}
|
||||||
@ -218,8 +177,6 @@ export function build(options) {
|
|||||||
|
|
||||||
// Set language
|
// Set language
|
||||||
window.tinymce.addI18n(options.language, options.translationMap);
|
window.tinymce.addI18n(options.language, options.translationMap);
|
||||||
// Build toolbar content
|
|
||||||
const {toolbar, groupButtons: toolBarGroupButtons} = buildToolbar(options);
|
|
||||||
|
|
||||||
// BookStack Version
|
// BookStack Version
|
||||||
const version = document.querySelector('script[src*="/dist/app.js"]').getAttribute('src').split('?version=')[1];
|
const version = document.querySelector('script[src*="/dist/app.js"]').getAttribute('src').split('?version=')[1];
|
||||||
@ -261,7 +218,7 @@ export function build(options) {
|
|||||||
plugins: gatherPlugins(options),
|
plugins: gatherPlugins(options),
|
||||||
imagetools_toolbar: 'imageoptions',
|
imagetools_toolbar: 'imageoptions',
|
||||||
contextmenu: false,
|
contextmenu: false,
|
||||||
toolbar: toolbar,
|
toolbar: getPrimaryToolbar(options),
|
||||||
content_style: getContentStyle(options),
|
content_style: getContentStyle(options),
|
||||||
style_formats,
|
style_formats,
|
||||||
style_formats_merge: false,
|
style_formats_merge: false,
|
||||||
@ -281,9 +238,7 @@ export function build(options) {
|
|||||||
head.innerHTML += fetchCustomHeadContent();
|
head.innerHTML += fetchCustomHeadContent();
|
||||||
},
|
},
|
||||||
setup(editor) {
|
setup(editor) {
|
||||||
for (const [key, config] of Object.entries(toolBarGroupButtons)) {
|
registerAdditionalToolbars(editor, options);
|
||||||
editor.ui.registry.addGroupToolbarButton(key, config);
|
|
||||||
}
|
|
||||||
getSetupCallback(options)(editor);
|
getSetupCallback(options)(editor);
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
@ -39,4 +39,19 @@ export function register(editor) {
|
|||||||
|
|
||||||
editor.formatter.apply('callout' + newFormat);
|
editor.formatter.apply('callout' + newFormat);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Link selector shortcut
|
||||||
|
editor.shortcuts.add('meta+shift+K', '', function() {
|
||||||
|
window.EntitySelectorPopup.show(function(entity) {
|
||||||
|
|
||||||
|
if (editor.selection.isCollapsed()) {
|
||||||
|
editor.insertContent(editor.dom.createHTML('a', {href: entity.link}, editor.dom.encode(entity.name)));
|
||||||
|
} else {
|
||||||
|
editor.formatter.apply('link', {href: entity.link});
|
||||||
|
}
|
||||||
|
|
||||||
|
editor.selection.collapse(false);
|
||||||
|
editor.focus();
|
||||||
|
})
|
||||||
|
});
|
||||||
}
|
}
|
64
resources/js/wysiwyg/toolbars.js
Normal file
64
resources/js/wysiwyg/toolbars.js
Normal file
@ -0,0 +1,64 @@
|
|||||||
|
/**
|
||||||
|
* @param {WysiwygConfigOptions} options
|
||||||
|
* @return {String}
|
||||||
|
*/
|
||||||
|
export function getPrimaryToolbar(options) {
|
||||||
|
const textDirPlugins = options.textDirection === 'rtl' ? 'ltr rtl' : '';
|
||||||
|
|
||||||
|
const toolbar = [
|
||||||
|
'undo redo',
|
||||||
|
'styleselect',
|
||||||
|
'bold italic underline forecolor backcolor formatoverflow',
|
||||||
|
'alignleft aligncenter alignright alignjustify',
|
||||||
|
'bullist numlist listoverflow',
|
||||||
|
textDirPlugins,
|
||||||
|
'link table imagemanager-insert insertoverflow',
|
||||||
|
'code about fullscreen'
|
||||||
|
];
|
||||||
|
|
||||||
|
return toolbar.filter(row => Boolean(row)).join(' | ');
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {Editor} editor
|
||||||
|
*/
|
||||||
|
function registerPrimaryToolbarGroups(editor) {
|
||||||
|
editor.ui.registry.addGroupToolbarButton('formatoverflow', {
|
||||||
|
icon: 'more-drawer',
|
||||||
|
tooltip: 'More',
|
||||||
|
items: 'strikethrough superscript subscript inlinecode removeformat'
|
||||||
|
});
|
||||||
|
editor.ui.registry.addGroupToolbarButton('listoverflow', {
|
||||||
|
icon: 'more-drawer',
|
||||||
|
tooltip: 'More',
|
||||||
|
items: 'outdent indent'
|
||||||
|
});
|
||||||
|
editor.ui.registry.addGroupToolbarButton('insertoverflow', {
|
||||||
|
icon: 'more-drawer',
|
||||||
|
tooltip: 'More',
|
||||||
|
items: 'hr codeeditor drawio media details'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {Editor} editor
|
||||||
|
*/
|
||||||
|
function registerLinkContextToolbar(editor) {
|
||||||
|
editor.ui.registry.addContextToolbar('linkcontexttoolbar', {
|
||||||
|
predicate(node) {
|
||||||
|
return node.closest('a') !== null;
|
||||||
|
},
|
||||||
|
position: 'node',
|
||||||
|
scope: 'node',
|
||||||
|
items: 'link unlink openlink'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {Editor} editor
|
||||||
|
* @param {WysiwygConfigOptions} options
|
||||||
|
*/
|
||||||
|
export function registerAdditionalToolbars(editor, options) {
|
||||||
|
registerPrimaryToolbarGroups(editor);
|
||||||
|
registerLinkContextToolbar(editor);
|
||||||
|
}
|
@ -145,6 +145,7 @@ return [
|
|||||||
'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.',
|
||||||
'save_continue' => 'Save Page & Continue',
|
'save_continue' => 'Save Page & Continue',
|
||||||
'callouts_cycle' => '(Keep pressing to toggle through types)',
|
'callouts_cycle' => '(Keep pressing to toggle through types)',
|
||||||
|
'link_selector' => 'Link to content',
|
||||||
'shortcuts' => 'Shortcuts',
|
'shortcuts' => 'Shortcuts',
|
||||||
'shortcut' => 'Shortcut',
|
'shortcut' => 'Shortcut',
|
||||||
'shortcuts_intro' => 'The following shortcuts are available in the editor:',
|
'shortcuts_intro' => 'The following shortcuts are available in the editor:',
|
||||||
|
@ -115,6 +115,15 @@
|
|||||||
{{ trans('editor.callouts_cycle') }}
|
{{ trans('editor.callouts_cycle') }}
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<code>Ctrl</code>+<code>Shift</code>+<code>K</code>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<code>Cmd</code>+<code>Shift</code>+<code>K</code>
|
||||||
|
</td>
|
||||||
|
<td>{{ trans('editor.link_selector') }}</td>
|
||||||
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user