How to set the font size of list item bullets and numbers in tinyMCE?

Question

TinyMCE is a great tool and it has solved many problems for us. However there is a problem that has been difficult to solve. While TinyMCE will change the size of the font of items in a list it doesn't change the size of the bullets (unordered list) or numbers (ordered list) that proceed those items.

What the user winds up with is something that looks like this:

As you can see in the image, the size of the fonts in the two lists are different but the size of the bullets is the same.

Does anyone know how to get TinyMCE to change the bullets to match the font?

Answer 1

After searching the TinyMCE forums here and here I came up with this solution.

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

I have slightly edited Steve's answer to use tinymce domutils instead of jquery. I've also added check for the whole list selection:

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

Note that this, unfortunately, will not work for color change. More info is here Can't catch the ForeColor command anymore, tinymce 4.1.4

Answer 3

Bernhard's solution didn't work for me in TinyMCE 4.1.7 but the code below does. I included a bit of context to hopefully make it as clear as possible.

This is from a website builder. The user opens an editor by right-clicking the DIV they want to edit and selecting "text" from the context menu. This executes a tinymce.init that attaches an inline edit panel to the DIV. Control comes here when the editor has been added.

The first editor.on lays in a callback to catch the end of the editor creation and at that time fires focusin to show the editor. The second editor.on catches a change to a span inside an li and makes the update to the li. The third editor.on catches the editor closing.

/************************************************************************************/
/*                               TinyMCE Events                                     */
/************************************************************************************/

tinymce.on('AddEditor', function(e) {
            // Once editor has been added show it by firing 'focusin' instead of waiting for a click
               e.editor.on('NodeChange',function(e) {
                   e.target.fire('focusin');            // show the editor
               });

            // Update parent <li> to match a font-size or font-family change in text
               e.editor.on('ExecCommand',function(e) {  
                   var cmd = e.command;
                   if (cmd === "FontSize" || cmd === "FontName") { 
                       var val = e.value;
                       var node = e.target.selection.getNode();  // editor in this event object is at target
                       var nodeParent = node.parentNode;
                       if (node.nodeName === "SPAN" && nodeParent.nodeName === "LI") {
                            // We're changing the  style of a <span> that's inside  an <li>.
                            // Change the <li> to match the new font-size or font-family.
                            // (B, U, and forecolor buttons don't come here so we can't update li here for those)
                            nodeParent$ = $(nodeParent);
                            nodeParent$.removeAttr('data-mce-style');
                            if(cmd === "FontSize") {
                               nodeParent$.css('font-size',val); 
                            }
                            if(cmd === "FontName") {
                               nodeParent$.css('font-family',val); 
                            }
                      }
                  }
             });

             // When editor is removed (by clicking in a blank area of the inline panel)    
             // restore draggability to the DIV (had to kill before tinymce.init because draggability
             // and contenteditable don't work together).       
               e.editor.on('RemoveEditor',function(e) {
                   g.currentElement$.attr('editor_state', "off")
                                    .draggable('enable')   // make DIV draggable again
                                    .removeClass('textCursor');  // give DIV back its pointer cursor
               });
});