如何将 SVG 精灵添加到 TinyMCE 按钮？

Question

我已经为 TinyMCE 添加了一些自定义工具栏选项，我想为其图标使用 SVG sprite。默认情况下，TinyMCE 只允许 "text"、"icon" 或 "image" 来设置图标。理想情况下，会有一个 "html" 选项，我可以在其中放置我的 SVG 代码，但似乎没有。

svg-sprites.svg

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
    <symbol id="ic_spoiler" viewBox="0 0 24 24">
        <path d="M12,2A9,9 0 0,0 3,11V22L6,19L9,22L12,19L15,22L18,19L21,22V11A9,9 0 0,0 12,2M9,8A2,2 0 0,1 11,10A2,2 0 0,1 9,12A2,2 0 0,1 7,10A2,2 0 0,1 9,8M15,8A2,2 0 0,1 17,10A2,2 0 0,1 15,12A2,2 0 0,1 13,10A2,2 0 0,1 15,8Z" />
    </symbol>
</svg>

编辑-plugin.js

// Function to create SVG html
var iconSVG = function(name, size) {        
    return '<svg xmlns="http://www.w3.org/2000/svg" height="' + size + '" width="' + size + '" class="' + name + '"><use xlink:href="' + siteURL + '/images/svg-sprite.svg#' + name + '" /></svg>';     
}

// Spoiler Button
tinymce.create('tinymce.plugins.spoiler', {

    init : function(ed, url) {
        ed.addButton('spoiler', {
            /*
            What I want:
            html: iconSVG('ic_spoiler', 20),

            Doesnt work:
            text: iconSVG('ic_spoiler', 20),
            image: iconSVG('ic_spoiler', 20),
            icon: iconSVG('ic_spoiler', 20),
            */
            title : 'Add a Spoiler'
            onclick : function() {
                 ed.selection.setContent('[spoiler]' + ed.selection.getContent() + '[/spoiler]'); 
            }
        });
    },
    createControl : function(n, cm) {
        return null;
    },
});

tinymce.PluginManager.add('spoiler', tinymce.plugins.spoiler);

Answer 1

选择了一个相当简单的解决方案。渲染 TinyMCE 后，使用 onPostRender 触发一个函数，用我的 SVG 图标替换标签。

// Spoiler Button
tinymce.create('tinymce.plugins.spoiler', {

    init : function(ed, url) {
        ed.addButton('spoiler', {
            icon: 'spoiler',
            title : 'Add a Spoiler'
            onClick : function() {
                 ed.selection.setContent('[spoiler]' + ed.selection.getContent() + '[/spoiler]'); 
            },
            onPostRender: function() {
                $('.mce-i-spoiler').replaceWith(iconSVG('ic_spoiler', 20));
            }
        });
    },
    createControl : function(n, cm) {
        return null;
    },
});

tinymce.PluginManager.add('spoiler', tinymce.plugins.spoiler);

如何将 SVG 精灵添加到 TinyMCE 按钮？

How can I add an SVG sprite to a TinyMCE button?

javascript

svg

tinymce

tinymce-4