加载微小的MCE编辑器后添加style_formats

Add style_formats after tinyMCE editor is loaded

本文关键字：添加 style formats 编辑器 MCE 加载      更新时间：2023-09-26

当你初始化一个微小的MCE编辑器时，你可以传递以下自定义样式。

tinyMCE.init({ style_formats: [{ title: 'flow', selector: 'img', styles: { 'float': 'left', 'margin-right': '5px' } }]});

但是，如果我想在加载后给 tinyMCE som 自定义样式怎么办？我该怎么做。例如，我已经能够像这样将style_formats添加到 tinyMCE 编辑器对象中。

tinyMCE.editors[0].settings["style_formats"] = [{title:'flow', selector:'img', styles: {'float' : 'left'}}];

但是编辑器本身不会更新。有没有办法告诉 tinyMCE 自己重新加载它？或者有没有另一种方法可以即时更新编辑器？

干杯。

您真的想将其添加到现有设置之后还是只是附加到现有设置中？从版本 4.0.13 开始，现在有一个名为 style_formats_merge 的新属性可以在 init 期间使用。将此属性设置为 true，它会将您的样式连接到默认值集。

tinymce.init({
    style_formats_merge: true,
    style_formats: [
        {
            title: 'Line Height',
            items: [
                { title: 'Normal Line Height', inline: 'span', styles: { "line-height": '100%' } },
                { title: 'Line Height + 10%', inline: 'span', styles: { "line-height": '110%' } },
                { title: 'Line Height + 50%', inline: 'span', styles: { "line-height": '150%' } },
                { title: 'Line Height + 100%', inline: 'span', styles: { "line-height": '200%' } }
            ]
        }
    ]
});

在 tinymce 配置文件之后，您可以通过向 js 文件添加以下代码来扩展 tinymce 设置。

jQuery.extend(tinymce.settings,
{
   style_formats: [
        {
            title: 'Line Height',
            items: [
                { title: 'Normal Line Height', inline: 'span', styles: { "line-height": '100%' } },
                { title: 'Line Height + 10%', inline: 'span', styles: { "line-height": '110%' } },
                { title: 'Line Height + 50%', inline: 'span', styles: { "line-height": '150%' } },
                { title: 'Line Height + 100%', inline: 'span', styles: { "line-height": '200%' } }
            ]
        }
]
 });
相关文章：