更改/更新格式时如何删除旧的 tinymce style_format 类

Question

我创建了一些自定义样式格式，将 class 添加到块级元素。问题是，当我应用一种样式时，它会保留旧的 class 并添加新的 class。

如何在切换到另一种格式时删除旧的 class？

mce_options_article = {
        // ...
        formats: {
          p_grey: { selector: 'p', classes: 'grey' },
          p_red: { selector: 'p', classes: 'red' } 
        },
        style_formats: [
          {title: 'Paragraph Color', items: [
            {title: 'Grey ', format:'p_grey'},
            {title: 'Red ', format:'p_red'},
           ]},
        ]
        // ...
    }

Answer 1

使用属性代替类。

这是我所做的：

mce_options_article = {
    // ...
    formats: {
      p_grey: { selector: 'p', attributes: {'class':'grey'} }, // use attributes
      p_red: { selector: 'p', attributes: {'class':'red'} } // use attributes
    },
    style_formats: [
      {title: 'Paragraph Color', items: [
        {title: 'Grey ', format:'p_grey'},
        {title: 'Red ', format:'p_red'},
       ]},
    ]
    // ...
}

Answer 2

使用 formats 然后在 style_formats 中引用它们的解决方案对我不起作用（使用 TinyMCE v4.x），我想是因为我试图定义 2 个集合H 标签的样式 - 一种带有 class ，另一种没有。它导致所有样式都被禁用（我不完全确定为什么）。

我最终在设置中为 ExecCommand 添加了一个事件处理程序：

    setup: function (editor) {
        editor.on('ExecCommand', function (e) {

            if (e.command === 'mceToggleFormat' && e.value.startsWith('custom')) {
                var format = e.target.settings.style_formats.filter(obj => { return obj.name === e.value; })[0];
                e.target.selection.getSelectedBlocks()[0].className = format.classes ? format.classes.join(' ') : '';
            }
        });
    }

这似乎工作正常，但在显示 'Format' 下拉列表时似乎并不总是突出显示当前格式，尽管我认为这是由于我定义的样式格式，而不是上面的代码。

我希望这能帮助其他人解决我遇到的同样问题，但显然在使用它之前用你的代码对其进行彻底测试。

更改/更新格式时如何删除旧的 tinymce style_format 类

How to remove old tinymce style_format classes when changing / updating format

javascript

tinymce