SVGスプライトをTinyMCEボタンに追加するにはどうすればよいですか？

Question

TinyMCEにいくつかのカスタムツールバーオプションを追加しました。SVGスプライトをアイコンとして使用したいと思います。デフォルトでは、TinyMCEはアイコンの設定に「テキスト」、「アイコン」、または「イメージ」のいずれかしか許可しません。理想的には、私のSVGコードを入れることができる "html"オプションがありますが、そこには存在しません。

SVGスプライトをTinyMCEボタンに追加するにはどうすればよいですか？

---

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);