Question

Mystique主题包含两个需要更新的文件，以允许自定义样式部分。增加了“小型帽子”风格，用于正确格式化法律期刊引文。为TinyMCE Advanced编辑器添加“小型大写”样式以在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版本似乎并没有这样做。除了他的回答之外，还要添加以下代码（可能需要更好地设置）：

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'）

就是这样。

如何为TinyMCE Advanced编辑器添加“小型大写”样式，以便在WordPress的“样式”下拉工具中使用该样式

2 个答案: