php - 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 事件初始化上应用自定义样式。然后浏览器准备就绪。

更新:这应该可以为您提供构建列表框的依据。您需要根据您的需要(动态地)调整 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;