新增需求：在tinymce上增加一个着重号的插件

• tinymce 版本6.8.3 ，应该现在的最新版

增加文件

在 plugins下增加 emphasis目录，并增加plugin.js 文件。

plugin.js

tinymce.PluginManager.add('emphasis', function(editor, url) {


    var stateSelectorAdapter = function (editor, selector) {
        return function (buttonApi) {
            return editor.selection.selectorChangedWithUnbind(selector.join(','), buttonApi.setActive).unbind;
        };
    };

    editor.ui.registry.addToggleButton('emphasis', {
        icon : 'emphasis',
        tooltip: '着重号',
        onAction: function() {
            editor.focus();

            var dom = editor.dom;

            var selNode = editor.selection.getNode();
            var style = dom.getStyle(selNode,'text-emphasis');

            if(style == 'dot black'){
                var txt = selNode.innerText;
                selNode.style.textEmphasis = '';
                selNode.style.textEmphasisPosition = '';
                selNode.style.webkitTextEmphasis = '';
                var ss = selNode.getAttribute('style');
                if(ss == ''){//移除node节点
                    selNode.remove();
                    editor.selection.setContent(txt);
                }
            }else{
                var txt = editor.selection.getContent({ format: 'text' });
                if(txt != ''){
                    var rng = editor.selection.getRng();
                    var node  = document.createElement('span');
                    node.innerHTML = txt;
                    node.style.textEmphasisPosition = 'under';
                    node.style.textEmphasis = 'dot black';
                    node.style.webkitTextEmphasis = 'dot black';
                    editor.selection.setNode(node);
                    editor.selection.setRng(rng);
                }

            }


        },
        onSetup: stateSelectorAdapter(editor, [
            '*[style*="text-emphasis"]',
            '*[data-mce-style*="text-emphasis"]',
        ])
    });
    return {
        getMetadata: function() {
            return  {
                name: "着重号",
                url: "",
            };
        }
    };
});

图标

在 iconfont 上找了一个相关的图标，复制svg . 在 icons.js 下增加对应的图标

emphasis : '<svg viewBox="0 0 1024 1024"  width="24" height="24"><path d="M251.904 845.226667a54.442667 54.442667 0 1 0 108.885333 0 54.442667 54.442667 0 0 0-108.885333 0zM668.586667 845.226667a54.485333 54.485333 0 1 0 108.928 0 54.485333 54.485333 0 0 0-108.928 0zM83.072 704.597333h69.12c3.456 0 6.570667-2.261333 7.594667-5.76l41.642666-134.357333a9.386667 9.386667 0 0 1 8.96-6.613333h164.48a9.386667 9.386667 0 0 1 8.96 6.656l41.258667 134.314666a8.106667 8.106667 0 0 0 7.637333 5.802667h72.405334a7.978667 7.978667 0 0 0 6.442666-3.456 8.533333 8.533333 0 0 0 1.024-7.509333L343.466667 176.469333a8.405333 8.405333 0 0 0-2.901334-4.053333 7.850667 7.850667 0 0 0-4.608-1.578667h-83.2a7.552 7.552 0 0 0-4.693333 1.536 8.106667 8.106667 0 0 0-2.858667 4.138667l-169.557333 517.12a8.490667 8.490667 0 0 0 1.877333 8.533333 7.850667 7.850667 0 0 0 5.546667 2.432zM290.773333 264.106667a2.261333 2.261333 0 0 1 4.352 0l64.042667 214.186666a9.386667 9.386667 0 0 1-9.002667 12.074667h-115.2a9.386667 9.386667 0 0 1-8.96-12.117333L290.730667 264.106667zM752.896 704c113.152 0 195.84-50.730667 195.84-156.544 0-71.68-41.472-112.896-98.858667-126.336a2.432 2.432 0 0 1-1.877333-2.389333c0-1.024 0.64-1.92 1.578667-2.261334 44.885333-16.512 71.381333-64.554667 71.381333-114.645333C920.96 205.44 845.226667 170.666667 740.437333 170.666667h-148.906666a9.386667 9.386667 0 0 0-9.386667 9.386666V694.613333c0 5.205333 4.181333 9.386667 9.386667 9.386667h161.365333z m-21.504-310.912h-59.306667a9.386667 9.386667 0 0 1-9.386666-9.386667V245.333333a9.386667 9.386667 0 0 1 9.386666-9.386666h61.354667c72.234667 0 108.373333 20.992 108.373333 76.757333 0 50.005333-32.64 80.384-110.421333 80.384z m12.544 244.949333h-71.850667a9.386667 9.386667 0 0 1-9.386666-9.386666v-162.389334a9.386667 9.386667 0 0 1 9.386666-9.386666h71.765334c81.237333 0 125.696 26.154667 125.696 86.272 0 65.194667-45.781333 94.890667-125.696 94.890666h0.085333z" p-id="4251"></path></svg>'

使用

{
plugins : ['emphasis'],
toolbar : ['emphasis']
}