tinymce编辑器插件，给选中文本添加黑色边框

社会社会

于 2024-03-07 20:29:33 发布

阅读量186

点赞数 1

分类专栏： js 文章标签： javascript 编辑器

本文链接：https://blog.csdn.net/weixin_42229667/article/details/136545071

版权

js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

tinymce编辑器插件，给选中文本添加黑色边框
github源码地址
如果有帮助可以给个star嘛~~

tinymce.PluginManager.add('addborder', function (editor, url) {
    var pluginName = '添加边框';
    var global$1 = tinymce.util.Tools.resolve('tinymce.util.Tools');

    var doAct = function () {
        var blocks = editor.selection.getSelectedBlocks();
        global$1.each(blocks, (block) => {
            if (block.innerHTML.indexOf('border') != -1) {
                let str = blocks[0].innerHTML.replace(/<span [^>]*>/g, '').replace(/<\/span>/g, '');
                let p = document.createElement('p');
                p.innerHTML = str
            } else {
                const content = editor.selection.getContent();
                if (content) {
                    const spanNode = `<span has-border="true" style="border:1px solid black;">${content}</span>`
                    editor.insertContent(spanNode);
                }
            }
        })
    };

    editor.ui.registry.addIcon('addborder', '边框');

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

    editor.ui.registry.addToggleButton('addborder', {
        icon: 'addborder',
        tooltip: pluginName,
        onAction: function () {
            doAct();
        },
        onSetup: stateSelectorAdapter(editor, [
            '*[data-mce-style*="border"]',
        ]),
    });

    editor.ui.registry.addMenuItem('addborder', {
        text: pluginName,
        onAction: function () {
            doAct();
        }
    });

    editor.addCommand('addborder', doAct);

    return {
        getMetadata: function () {
            return {
                name: pluginName,
                url: "",
            };
        }
    };
});