Я пытаюсь реорганизовать огромный конфигурационный файл tinyMCE с несколькими десятками пользовательских инструментов. Для простоты давайте обсудим этот вопрос на примере официального руководства по созданию плагина tinyMCE:
https://www.tiny.cloud/docs/advanced/creating-a-plugin/
Это пример структуры плагина tinyMCE:
tinymce.PluginManager.add('example', function(editor, url) {
// Add a button that opens a window
editor.addButton('example', {
text: 'My button',
icon: false,
onclick: function() {
// Open window
editor.windowManager.open({
title: 'Example plugin',
body: [
{type: 'textbox', name: 'title', label: 'Title'}
],
onsubmit: function(e) {
// Insert content when the window form is submitted
editor.insertContent('Title: ' + e.data.title);
}
});
}
});
// Adds a menu item to the tools menu
editor.addMenuItem('example', {
text: 'Example plugin',
context: 'tools',
onclick: function() {
// Open window with a specific url
editor.windowManager.open({
title: 'TinyMCE site',
url: 'https://www.tinymce.com',
width: 800,
height: 600,
buttons: [{
text: 'Close',
onclick: 'close'
}]
});
}
});
return {
getMetadata: function () {
return {
name: "Example plugin",
url: "http://exampleplugindocsurl.com"
};
}
};
});
Я хочу заменить эту строку:
editor.insertContent('Title: ' + e.data.title);
с чем-то вроде этого:
import exampleTemplate from './templates/example.pug';
...
editor.insertContent(exampleTemplate(title: e.data.title));
...
});
Чтобы отделить репрезентативную логику от конфигурации редактора.
Однако, использование import
в шаблоне повышает SyntaxError: import declarations may only appear at top level of a module
. Видимо, плагины включены в редактор в виде текста.
Я попытался прочитать код в официальных плагинах, но все они, похоже, определяют репрезентативную логику в коде js.