tinymce自定义插件-着重号

tinymce自定义插件-着重号

月光魔力鸭

2024-02-21 13:06 阅读 449 喜欢 1

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

增加文件

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']
}

转载请注明出处: https://chrunlee.cn/article/tinymce-emphasis.html


感谢支持!

赞赏支持
提交评论
评论信息 (请文明评论)
暂无评论,快来快来写想法...
推荐
需求如下:有一张大图,需要显示大图中的一小部分,目前能知道的时候小图的宽高和坐标,同时大图有一个旋转角度可以知道,目标就是把小图正确的显示出来。
对于web开发过程中的JS对象 Array ,我们真的充分使用了么?是不是理解了Array的全部?能够在合适的地点调用合适的函数,使用合适的属性?
在我们通过canvs画图的时候经常会用到圆,且需要计算出圆上某点的坐标,由于我数学没学好,总是记不得怎么获取,这里记录下,加深记忆
开发的项目中有使用到微信开发,由于之前偶尔才用一次,也是用的别人的地址和测试号,这里记录下自己的操作。防止后续遗忘。
错误:The operation is insecure . 在使用canvas的 toDataUrl的时候报错,看了很多资料,基本上都说是设置跨域,但是我一直都有的啊。其实,只是顺序错了,setAttribute('crossOrigin','Anonymous') 要在设置 src之前设置。
最大公因数,也称最大公约数、最大公因子,指两个或多个整数共有约数中最大的一个。a,b的最大公约数记为(a,b),同样的,a,b,c的最大公约数记为(a,b,c),多个整数的最大公约数也有同样的记号。求最大公约数有多种方法,常见的有质因数分解法、短除法、辗转相除法、更相减损法。与最大公约数相对应的概念是最小公倍数,a,b的最小公倍数记为[a,b]。
有时候浏览网页经常会看见一些页面出现一些打字的效果,那么是怎么实现的呢?
在页面中不同的frame之间进行相互调用的话,我们可以通过frame获取对应的window然后进行调用,但是如果是浏览器不同的tab之间呢?