mirror of
https://github.com/scinote-eln/scinote-web.git
synced 2024-11-12 12:16:06 +08:00
81 lines
3.5 KiB
JavaScript
81 lines
3.5 KiB
JavaScript
/* global I18n tinymce MarvinJsEditor */
|
|
tinymce.PluginManager.add('custom_image_toolbar', (editor) => {
|
|
|
|
editor.ui.registry.addIcon(
|
|
'download',
|
|
`<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" stroke="none" stroke-linecap="round" stroke-linejoin="round" fill-rule="nonzero" focusable="false">
|
|
<path d="M26.835 17.1193c-.4295-.0002-.8415.1703-1.1452.474a1.618 1.618 0 0 0-.474 1.1453v4.8579H5.7843v-4.8579c0-.8943-.725-1.6193-1.6193-1.6193s-1.6193.725-1.6193 1.6193v6.4771c-.0002.4296.1703.8416.474 1.1453a1.618 1.618 0 0 0 1.1453.474h22.67c.4296.0003.8416-.1702 1.1453-.474s.4743-.7157.474-1.1453v-6.4771a1.618 1.618 0 0 0-.474-1.1453c-.3037-.3037-.7157-.4742-1.1453-.474zm-12.4799 2.7642a1.619 1.619 0 0 0 2.2898 0l4.8579-4.8579c.6293-.6328.6279-1.6555-.0032-2.2866s-1.6538-.6325-2.2866-.0032l-2.0937 2.0937V5.7843c0-.8943-.725-1.6193-1.6193-1.6193s-1.6193.725-1.6193 1.6193v9.0452l-2.0937-2.0937c-.6328-.6293-1.6555-.6278-2.2866.0032s-.6325 1.6538-.0032 2.2866z"></path>
|
|
</svg>`
|
|
);
|
|
|
|
editor.ui.registry.addButton('image_download', {
|
|
icon: 'download',
|
|
tooltip: I18n.t('general.download'),
|
|
onAction: () => {
|
|
const editorIframe = $(`#${editor.id}`).next().find('.tox-edit-area iframe');
|
|
const image = editorIframe.contents().find('img[data-mce-selected="1"]');
|
|
|
|
window.open(`/tiny_mce_assets/${image.data('mce-token')}/download`, '_blank');
|
|
}
|
|
});
|
|
|
|
editor.ui.registry.addButton('marvinjs_edit', {
|
|
icon: 'edit-block',
|
|
onAction: () => {
|
|
const editorIframe = $(`#${editor.id}`).next().find('.tox-edit-area iframe');
|
|
const image = editorIframe.contents().find('img[data-mce-selected="1"]');
|
|
MarvinJsEditor.open({
|
|
mode: 'edit-tinymce',
|
|
marvinUrl: `/tiny_mce_assets/${image[0].dataset.mceToken}/marvinjs`,
|
|
editor,
|
|
image
|
|
});
|
|
}
|
|
});
|
|
|
|
function isImage(elem) {
|
|
return editor.dom.is(elem, 'img') && elem.dataset.mceToken;
|
|
}
|
|
function isMarvinJs(elem) {
|
|
return elem.dataset.sourceType === 'marvinjs';
|
|
}
|
|
|
|
// This method removes image edit button groups if the selected image is a MarvinJS image
|
|
// Since there is no appropriate TinyMCE event to catch the render of the toolbar
|
|
// we need to rely on a MutationObserver, which will watch the TinyMCE context toolbar element,
|
|
// and then remove the two image editing groups.
|
|
function removeImageEditButtons() {
|
|
const tinyMceAuxNode = document.getElementsByClassName('tox-tinymce-aux')[0];
|
|
const tinyMceAuxNodeObserver = new MutationObserver(() => {
|
|
let toxPop = document.getElementsByClassName('tox-pop')[0];
|
|
if (!toxPop) return;
|
|
|
|
let toolbarGroups = toxPop.getElementsByClassName('tox-toolbar__group');
|
|
if (toolbarGroups[3]) {
|
|
toolbarGroups[2].classList.add('hidden');
|
|
toolbarGroups[3].classList.add('hidden');
|
|
}
|
|
});
|
|
|
|
tinyMceAuxNodeObserver.observe(tinyMceAuxNode, { attributes: false, childList: true, subtree: false });
|
|
|
|
// We can stop observing once the toolbar was loaded and changed.
|
|
setTimeout(() => { tinyMceAuxNodeObserver.disconnect() }, 100);
|
|
|
|
return true;
|
|
}
|
|
|
|
editor.ui.registry.addContextToolbar('marvinJsToolbar', {
|
|
predicate: (node) => isMarvinJs(node) && removeImageEditButtons(),
|
|
items: 'marvinjs_edit',
|
|
position: 'node',
|
|
scope: 'node'
|
|
});
|
|
|
|
editor.ui.registry.addContextToolbar('ImageToolbar', {
|
|
predicate: (node) => isImage(node),
|
|
items: 'image_download',
|
|
position: 'node',
|
|
scope: 'node'
|
|
});
|
|
});
|