wordpress - 如何为 TinyMCE 高级编辑器添加“小型大写字母”样式以使用 WordPress 的“样式”下拉工具中的样式

Question

Mystique 主题包括两个需要更新以允许自定义样式部分的文件。添加了“小型大写字母”样式，用于正确格式化法律期刊引文。为 TinyMCE 高级编辑器添加“小型大写字母”样式以使用 WordPress 中“样式”下拉工具中的样式的步骤是什么。

Answer 1

使用 TinyMCE 4，以下自定义设置函数将添加一个 SmallCaps 控件：

setup: function (ed) {
    //Adds smallcaps button to the toolbar
    ed.addButton('smallcaps', {
        title: 'Smallcaps',
        icon: 'forecolor',
        onclick: function (evt) {
            ed.focus();
            ed.undoManager.beforeChange();//Preserve highlighted area for undo
            ed.formatter.toggle('smallcaps');
            ed.undoManager.add();//Add an undo point
        },
        onPostRender: function () {
            var ctrl = this;
            ed.on('NodeChange', function (e) {
                //Set the state of the smallcaps button to match the state of the selected text.
                ctrl.active(ed.formatter.match('smallcaps'));
            });
        }
    });
}

Answer 2

Goetz 给出的答案并不完整，因为如果您没有明确定义，TinyMCE 不知道您的“用户定义格式”。也许几年前就这样做了，但 4.7.x 版似乎没有这样做。除了他的答案之外，添加下面的代码（它可能需要 bevore setup）：

formats: {
    smallcaps: {
      inline: 'span',
      styles: {
        'font-variant': 'small-caps'
      },
      attributes: {
        title: 'smallcaps'
      }
    },
  },
  toolbar: 'smallcaps_button'

我更喜欢通过_button或_format 之类的后缀稍微不同地命名格式和按钮，但这实际上不应该是一个问题。因此，它避免忘记在这里正确定义所有需要的部分（format, toolbar, ed.addButton()）。所以，我toolbar包含按钮smallcaps_button并且功能是ed.addButton('smallcaps_button')

而已。