Question

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

切换到其他格式时如何删除旧类？

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

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

我最终在设置中为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(' ') : '';
            }
        });
    }

这似乎行得通，但显示“格式”下拉菜单时似乎并不总是突出显示当前格式，尽管我认为这是由于我定义的样式格式，而不是上面的代码。

我希望这可以帮助某人解决我遇到的同样问题，但是显然在使用它之前先对您的代码进行彻底测试。

Answer 2

使用属性代替类。

这就是我所做的：

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'},
       ]},
    ]
    // ...
}

Tinymce格式和style_formats：切换到其他样式格式时删除旧类

2 个答案: