如何在tinyMCE中设置列表项项目符号和数字的字体大小？

Question

TinyMCE是一个很棒的工具,它为我们解决了许多问题.然而,存在难以解决的问题.虽然TinyMCE将更改列表中项目字体的大小,但它不会更改继续执行这些项目的项目符号(无序列表)或数字(有序列表)的大小.

用户结束的是这样的事情:

正如您在图像中看到的那样,两个列表中字体的大小不同,但项目符号的大小是相同的.

有谁知道如何让TinyMCE更改子弹以匹配字体？

Answer 1

在这里和这里搜索了TinyMCE论坛后,我想出了这个解决方案.

tinyMCE.onAddEditor.add(function(manager, editor) { 
    // TinyMCE doesn't change the font of the li portions of the list,                                      
    // we have do that ourselves here.  See http://www.tinymce.com/forum/viewtopic.php?id=26100             
    editor.onExecCommand.add(function(editor, cmd, ui, val) {                                               
        if (cmd === "FontSize") {
            var node = editor.selection.getNode();                                                          
            if (node) {                                                                                     
                var children = $(node).children("li");
                if (children) {
                    // TinyMCE keeps an attribute that we want it to recompute,                             
                    // clear it. See http://www.tinymce.com/forum/viewtopic.php?id=25676                    
                    children.removeAttr('data-mce-style');                                                  
                    children.css("font-size", val);                                                         
                }
            }       
        }               
    });                     
});

Answer 2

我稍微编辑了 Steve 的答案，使用 tinymce domutils 而不是 jquery。我还添加了对整个列表选择的检查：

ed.on('ExecCommand', function checkListNodes(evt) {  
   let cmd = evt.command;
   if (cmd === 'FontSize' || cmd === 'FontName') { 
      let val = evt.value;
      let node = evt.target.selection.getNode();
      let nodeParent = node.parentNode;
      if (node.nodeName === 'SPAN' && nodeParent.nodeName === 'LI') {
          if (cmd === 'FontSize') {
              ed.dom.setStyle(nodeParent, 'font-size', val);
          }
          if (cmd === 'FontName') {
             ed.dom.setStyle(nodeParent, 'font-family', val);
          }
       } else if (node.nodeName === 'UL' || node.nodeName === 'OL') {
          let li = ed.dom.select('li', node);
          if (cmd === 'FontSize') {
              ed.dom.setStyle(li, 'font-size', val);
          }
          if (cmd === 'FontName') {
              ed.dom.setStyle(li, 'font-family', val);
           }
      }
   }
});

请注意，不幸的是，这不适用于颜色变化。更多信息在这里无法再捕获 ForeColor 命令，tinymce 4.1.4

Answer 3

由于 TinyMCE 将所有内容都包裹在 span 中。为了避免像你这样的问题，我这样做了：

<ol>
   <li style="font-size: <something you want>;">one</li>   
   <li style="font-size: <something you want>;">two</li>
</ol>