tinymce自定义插件-着重号

tinymce自定义插件-着重号

月光魔力鸭

2024-02-21 13:06 阅读 167 喜欢 0

新增需求:在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


感谢支持!

赞赏支持
提交评论
评论信息 (请文明评论)
暂无评论,快来快来写想法...
推荐
项目中需要使用treegrid,找了下easyui 和 ext都有,但是项目用的框架是 byyui,如果为了treegrid 就把这些都加载的话,感觉不太合算。找了大家常用的基于jquery的treegrid.
突然来了一个调研任务,想要实现一个类似3D虚拟展厅类似的需求,主要就是放一些学生的作品,然后预览啥的,效果还是要全景的效果。 经过一番调查,最终锁定了以前从未接触过的krpano。
关于jquery,他的核心特点就是无new构造和链式调用,这里根据网上的资料,自己简单理解下,有助于消化核心代码。
今天小程序上传体验版本后莫名无法获取用户数据,但是本地开发环境是正常的,通过开发工具的真机进行测试也正常,但是通过开发工具的预览又不正常,初步来看代码是没有问题的,可能是哪里设置有问题。
在web开发过程中,现在JSON 已经到了俯拾皆是的地步了,操作JSON对于JS来说非常简单,那么我们对于JSON的转化是如何应对的呢?
对于web开发过程中的JS对象 Array ,我们真的充分使用了么?是不是理解了Array的全部?能够在合适的地点调用合适的函数,使用合适的属性?
本文概括了递归、闭包、原型、继承,理清这些基本的概念,有助于你接纳更多的东西,我们会在下一个章节对函数进行更深入的讨论。
现象:在IOS中,jsp页面绑定的点击事件,点击后延迟很大,接近1000ms,反应很慢