TinyMCE，在列表框（工具栏）中的元素上添加css样式

Question

我正在创建一个新插件，即工具栏上的列表框。

此列表框允许您更改所选文本的大小。

这是我在编辑器工具栏上添加列表框的代码：

tinymce.create('tinymce.plugins.ListBoxPlugin', {
    createControl: function(n, cm) {
        switch (n) {
            case 'listeStyle':
                var mlb = cm.createListBox('listeStyle', {
                    title : 'Styles',
                    onselect : function(v) {                        
                        tinyMCE.execCommand('mceReplaceContent',false,'<span class='+v+'>{$selection}</span>');
                     }
                });

               <?php               
               foreach($matches[1] as $m){
                    echo "mlb.add('".$m."', '".$m."');";
               }
               ?>               
                return mlb;
        }
        return null;
    }
});
tinymce.PluginManager.add('listBox', tinymce.plugins.ListBoxPlugin);

所以，为了在我的列表框中添加元素，它就是这一行：

echo mlb.add('".$m."', '".$m."');

例如，使用mlb.add('medium', '15');，我的列表框中有一个名为“medium”的元素，当我点击时，我会检索值“15”。

那么，我怎么能使用tinymce来猜测这个列表框中的显示元素与css？例如，对于这个元素，我需要以“15”的大小显示他。

我需要什么：

我有什么：

你知道吗？谢谢:)）

编辑：我动态创建此列表框

Answer 1

嗯，这是一项艰巨的任务。 最简单的方法似乎是在tinymce事件init上应用自定义样式。 然后浏览器就绪。

更新：这可以为您提供构建列表框的功能。 您需要根据需要调整sizes和description（动态）：

if (mlb) {
    var i =0 ;
    var sizes = [{ fontSize:"5"},{ fontSize:"10"},{ fontSize:"20"}];
    var description = ['Text1','Text2','Text3'];
    each(sizes, function(v, k) {
       var size = v.fontSize;

       if (size >= 1 && size <= 7)
           size = t.sizes[parseInt(size) - 1] + 'pt';

       c.add(y[i], v, {'style' : 'font-size:' + size});
       i++;
    });
}
return mlb;