TinyMCE:如何在初始化后添加插件?
TinyMCE: How to add plugin after init?
在 Voyager 项目中,他们允许您修改 TinyMCE though a callback function:
function tinymce_init_callback(editor)
{
//...
}
编辑器的方法已列出here。
我知道通常会在 init 上列出插件:
tinymce.init({
plugins: [
'image textcolor'
],
但是有没有可能在初始化之后用editor对象添加一个像image
这样的插件呢?我在文档中找不到这样的功能。
TinyMCE 不允许您在编辑器初始化后加载额外的插件。如果您想这样做,您需要使用 remove()
API 删除编辑器,然后您可以使用新配置再次使用 init()
重新加载编辑器。
这是我的解决方案:
function tinymce_init_callback(editor)
{
editor.remove();
editor = null;
tinymce.init({
selector: 'textarea.richTextBox',
skin: 'voyager',
min_height: 600,
resize: 'vertical',
plugins: 'print preview fullpage searchreplace autolink directionality visualblocks visualchars fullscreen image link media template codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists textcolor wordcount imagetools contextmenu colorpicker textpattern',
extended_valid_elements: 'input[id|name|value|type|class|style|required|placeholder|autocomplete|onclick]',
file_browser_callback: function (field_name, url, type, win) {
if (type == 'image') {
$('#upload_file').trigger('click');
}
},
toolbar: 'styleselect bold italic underline | forecolor backcolor | alignleft aligncenter alignright | bullist numlist outdent indent | link image table youtube giphy | codesample code',
convert_urls: false,
image_caption: true,
image_title: true
});
}
首先,我删除了现有的 TinyMCE 编辑器实例(由 Voyager 创建),然后我使用我想要的插件和参数创建了一个新实例。
当页面加载并创建新实例时,TinyMCE 在 'public/vendor/tcg/voyager/assets/js/plugins' 中搜索插件。 TinyMCE 使用名称 'plugin.js' 搜索插件 JavaScript 文件,但其中许多插件文件名为 'plugin.min.js',导致许多错误使编辑器失效。解决此不便的一种解决方案是将所有插件文件重命名为 'plugin.js'.
2020 年实际上有一个合并请求解决了这个问题:
https://github.com/the-control-group/voyager/pull/4727
现在可以像这样在面包视图中指定插件:
{
"tinymceOptions" : {
"plugins": "image textcolor"
}
}
查看文档:https://voyager-docs.devdojo.com/bread/introduction-1/tinymce
在 Voyager 项目中,他们允许您修改 TinyMCE though a callback function:
function tinymce_init_callback(editor)
{
//...
}
编辑器的方法已列出here。
我知道通常会在 init 上列出插件:
tinymce.init({
plugins: [
'image textcolor'
],
但是有没有可能在初始化之后用editor对象添加一个像image
这样的插件呢?我在文档中找不到这样的功能。
TinyMCE 不允许您在编辑器初始化后加载额外的插件。如果您想这样做,您需要使用 remove()
API 删除编辑器,然后您可以使用新配置再次使用 init()
重新加载编辑器。
这是我的解决方案:
function tinymce_init_callback(editor)
{
editor.remove();
editor = null;
tinymce.init({
selector: 'textarea.richTextBox',
skin: 'voyager',
min_height: 600,
resize: 'vertical',
plugins: 'print preview fullpage searchreplace autolink directionality visualblocks visualchars fullscreen image link media template codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists textcolor wordcount imagetools contextmenu colorpicker textpattern',
extended_valid_elements: 'input[id|name|value|type|class|style|required|placeholder|autocomplete|onclick]',
file_browser_callback: function (field_name, url, type, win) {
if (type == 'image') {
$('#upload_file').trigger('click');
}
},
toolbar: 'styleselect bold italic underline | forecolor backcolor | alignleft aligncenter alignright | bullist numlist outdent indent | link image table youtube giphy | codesample code',
convert_urls: false,
image_caption: true,
image_title: true
});
}
首先,我删除了现有的 TinyMCE 编辑器实例(由 Voyager 创建),然后我使用我想要的插件和参数创建了一个新实例。
当页面加载并创建新实例时,TinyMCE 在 'public/vendor/tcg/voyager/assets/js/plugins' 中搜索插件。 TinyMCE 使用名称 'plugin.js' 搜索插件 JavaScript 文件,但其中许多插件文件名为 'plugin.min.js',导致许多错误使编辑器失效。解决此不便的一种解决方案是将所有插件文件重命名为 'plugin.js'.
2020 年实际上有一个合并请求解决了这个问题:
https://github.com/the-control-group/voyager/pull/4727
现在可以像这样在面包视图中指定插件:
{
"tinymceOptions" : {
"plugins": "image textcolor"
}
}
查看文档:https://voyager-docs.devdojo.com/bread/introduction-1/tinymce