tinymce自定义插件-着重号

tinymce自定义插件-着重号

月光魔力鸭

2024-02-21 13:06 阅读 383 喜欢 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


感谢支持!

赞赏支持
提交评论
评论信息 (请文明评论)
暂无评论,快来快来写想法...
推荐
我们经常会有判断一个数值是素数的需求,那么我们如何来实现呢?
在今天之前,我对canvas中rotate其实是一脸蒙逼的... 虽然之前有做过图片旋转,但那是在他人的基础上直接修改的,至于为啥会这样..讲真,还真没注意过,但是今天又需要用到这块了,实在搞不定了,找了各种资料,终于明白了.. 坐标系的问题。
web网站上总会有在文本域中提交代码的操作,那么如何处理呢?
通过canvas可以进行画图实现一些动画效果等,今天练习下通过canvas来实现一个简易的电子画板,可以在白板上进行画画,然后指定不同的颜色、线条粗细,加载不同的背景以及擦除效果。
业务中有一段涉及到处理canvas的图片然后将内容进行上传,后测试发现在IE中不好使哎...
有时候浏览网页经常会看见一些页面出现一些打字的效果,那么是怎么实现的呢?
java 对象中有很多引用,甚至会出现循环引用,比如 user 对象中有 school 对象,school 对象中又有 user 对象,这样在对 user 对象序列化的时候,就会出现死循环,导致内存溢出。通过一定的方式,将每个对象增加ID 和 REF 引用标识最终可以解决这个问题
web开发中,前台有时候会需要一个随机数或序列,通常来说,这个随机数可能只在当前页面中使用,并不需要太过严格,大体上重复率低即可。