8

TinyMCE 是一个很棒的工具，它为我们解决了很多问题。然而，有一个问题一直难以解决。虽然 TinyMCE 将更改列表中项目的字体大小，但它不会更改执行这些项目的项目符号（无序列表）或数字（有序列表）的大小。

用户最终得到的结果如下所示：

项目字体更改但项目符号字体不更改

正如您在图像中看到的，两个列表中的字体大小不同，但项目符号的大小相同。

有谁知道如何让 TinyMCE 更改项目符号以匹配字体？

4

11 回答 11

6

在这里和这里搜索 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);                                                         
                }
            }       
        }               
    });                     
});
于 2012-08-10T15:58:00.720 回答
4

我稍微编辑了史蒂夫的答案以使用 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

于 2016-12-07T09:36:03.920 回答
2

Bernhard 的解决方案在 TinyMCE 4.1.7 中对我不起作用，但下面的代码可以。我包括了一些上下文，希望尽可能清楚。

这是来自网站建设者。用户通过右键单击要编辑的 DIV 并从上下文菜单中选择“文本”来打开编辑器。这将执行一个 tinymce.init，它将一个内联编辑面板附加到 DIV。添加编辑器后，控制就出现在这里。

第一个editor.on是回调以捕捉编辑器创建的结束，然后触发 focusin 以显示编辑器。第二个editor.on捕获对 li 内跨度的更改并对 li 进行更新。第三个editor.on捕捉编辑器关闭。

/************************************************************************************/
/*                               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
               });
});
于 2014-12-22T15:40:22.477 回答
1

我已经解决了这些问题并添加了一些不错的功能。这现在对我有用：

ed.onExecCommand.add(function(editor, cmd, ui, val) {
  if (cmd === "FontSize" || cmd === "FontName" || cmd === "ForeColor" || cmd === "Bold" || cmd === "Italic") {
     var node = editor.selection.getNode();
     if (node) {
        var children = $(node).closest("li");
        if(children.length == 0)
           var children = $(node).find("li");

        if (children) {
           children.removeAttr('data-mce-style');
           if(cmd === "FontSize")
              children.css("font-size", val);
           if(cmd === "FontName")
              children.css("font-family", val);
           if(cmd === "ForeColor")
              children.css("color", val);
           if(cmd === "Bold") {
              if(children.find("strong").length > 0) {
                 children.removeAttr('data-mce-style');
                 children.css("font-weight", "bold");
              } else {
                 children.removeAttr('data-mce-style');
                 children.css("font-weight", "normal");
              }
           }
           if(cmd === "Italic") {
              if(children.find("em").length > 0) {
                 children.removeAttr('data-mce-style');
                 children.css("font-style", "italic");
              } else {
                 children.removeAttr('data-mce-style');
                 children.css("font-style", "normal");
              }
           }
        }
     }
  }
  if (cmd === "InsertOrderedList" || cmd === "InsertUnorderedList") {
     var node = editor.selection.getNode();
     if (node) {
        $(node).find("li").each(function() {
            var children = $(this).find("span:first");
            if (children.length > 0) {
               $(this).removeAttr('data-mce-style');

               if(children.css("font-size") != "undefined")
                  $(this).css("font-size", children.css("font-size"));
               if(children.css("font-family") != "undefined")
                  $(this).css("font-family", children.css("font-family"));
               if(children.css("color") != "undefined")
                  $(this).css("color", children.css("color"));
               if($(this).find("em").length > 0)
                  $(this).css("font-style", "italic");
               if($(this).find("strong").length > 0)
                  $(this).css("font-weight", "bold");
            }
        });
     }
  }
});
于 2014-03-24T08:29:51.587 回答
1

这对我有用：

在 tinyMCE.init 上，我添加了设置回调：

setup: function(ed) {
      ed.onKeyDown.add(function(ed, e) {
        tinyMceKeyDownCallbacks(ed,tiny_id);
      });
    }

然后是更新每个 li 的 jquery 函数，它们的 span 类和/或样式都有一个 span：

function tinyMceKeyDownCallbacks(inst,tiny_id){
  var spans = $(inst.getBody()).find("li span");
  console.log("S: "+spans.length);
  spans.each(function(){
    var span = $(this);
    span.parents('li').addClass(span.attr('class'));
    span.parentsUntil('li').attr('style',span.attr('style'));
  });
}
于 2013-01-30T13:49:24.837 回答
1

正如 SP 所提到的，TinyMCE使用包含编辑器中设置的样式的<li>a 包装内部内容。您可以以该跨度为目标，并以编程<span>方式将样式复制到匹配项：<li>

$('.content-custom li').each(function() {
    var spanStyle = $(this).find('span').attr('style');
    $(this).attr('style', spanStyle);
});
于 2018-03-27T13:08:48.747 回答
1 
  tinymce.on('AddEditor', function(ea) {
                  ea.editor.on('ExecCommand',function(e) {                  
                      var cmd = e.command;
                       var val = e.value;
                      var node = e.target.selection.getNode(); 
                       var nodeParent = node.parentNode;                       
                       nodeParent$ = $(nodeParent);
                        node$=$(node);
                      if (cmd === "FontSize" || cmd === "FontName") {                         
                                while(nodeParent.nodeName !='LI' && nodeParent.nodeName!='BODY'){
                                nodeParent = nodeParent.parentNode;
                            }
                            nodeParent$ = $(nodeParent);                                
                                if(node.nodeName==='OL' || node.nodeName==='UL'){                               
                                    if(cmd === "FontSize") {
                                        $(node.children).each(function (){
                                        $(this).css('font-size',val);
                                    });

                                    }
                                    if(cmd === "FontName") {
                                        $(node.children).each(function (){
                                        $(this).css('font-family',val);
                                    });

                                    }
                                }

                          if (nodeParent.nodeName === "LI" ) {
                               nodeParent$.removeAttr('data-mce-style');                                
                               if(cmd === "FontSize") {
                                    nodeParent$.css('font-size',val);
                               }
                               if(cmd === "FontName") {                                  
                                 nodeParent$.css('font-family',val);
                               }                             
                         }

                     }
                      if(cmd==='mceToggleFormat' && e.value==='bold'){

                            while(nodeParent.nodeName !='LI' && nodeParent.nodeName!='BODY'){
                                nodeParent = nodeParent.parentNode;
                            }
                            nodeParent$ = $(nodeParent);
                            var strg=$(node).find('STRONG');
                            if(node.childNodes[0].nodeName==='LI' && $(node).find('STRONG').length >1)
                             {
                                $(node.children).each(function (){
                                        $(this).css("font-weight", "bold");
                                    });
                             }
                             else if(node.childNodes[0].nodeName==='LI' && $(node).find('STRONG').length ==0 ){                                 
                                    $(node.children).each(function (){
                                        $(this).css("font-weight", "normal");
                                    });
                             }
                             else if($(nodeParent).find('STRONG').length ==1)                            
                             {
                                    if(nodeParent.nodeName==='LI'){
                                    nodeParent$.css("font-weight", "bold"); 
                                    }
                             }
                             else if($(nodeParent).find('STRONG').length ==0)
                             {
                                nodeParent$.css("font-weight", "normal");

                             }

                      }

                });     

              });
于 2017-06-22T07:32:04.950 回答
0

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

<ol>
   <li style="font-size: <something you want>;">one</li>   
   <li style="font-size: <something you want>;">two</li>
</ol>
于 2012-08-10T15:57:20.247 回答
0

以下是对我有用的，以上所有对我来说都失败了，因为需要测试而不是选择，但列表的开头应该基于选择的字体大小

editor.on('ExecCommand', function checkListNodes(evt) {
        var cmd = evt.command;
        var val = evt.value;
        var node = evt.target.selection.getNode();
        var nodeParent = node.parentNode;
        if (cmd === 'FontSize' || cmd === 'FontName') {
            if (node.nodeName === 'SPAN') {//(nodeParent.parentNode.nodeName === 'LI') 
{
                var whileNode = node;
                var count = 1;//dont want to be endless for with no list in editor
                while (whileNode.nodeName !== 'LI' && count<6) {
                    whileNode = whileNode.parentNode;
                    count++;
                }

                editor.dom.setStyle(nodeParent.parentNode, 'font-size', val);
            }
            else if (node.nodeName === 'UL' || node.nodeName === 'OL')
            {
                var li = editor.dom.select('li', node);
                if (cmd === 'FontSize') {
                    editor.dom.setStyle(li, 'font-size', val);
                }
                if (cmd === 'FontName') {
                    editor.dom.setStyle(li, 'font-family', val);
                }
            }
        }
        //if (cmd === 'InsertOrderedList' || cmd === 'InsertUnorderedList') {
        //    var fontSize = $("span.tox-tbtn__select-label:eq(1)").text().replace('pt', '');

        //}
    });
于 2021-01-26T11:00:34.883 回答
0

我已经调整了史蒂夫的答案以在 Typescript 中使用，

editor.on('ExecCommand', function(lob) {
    contentBlockElement.text = editor.getContent({ format: 'raw' });
    var cmd = lob.command;
    if (cmd === "FontSize" || cmd === "FontName") {
        var val = lob.value;
        var node = lob.target.selection.getNode();
        var nodeChild = node.childNodes;
        if (node.nodeName === "UL" && nodeChild[0].nodeName === "LI") {
            this.nodeChild$ = $(nodeChild);
            this.nodeChild$.removeAttr('data-mce-style');
                if (cmd === "FontSize") {
                    this.nodeChild$.css('font-size', val);
                    }
                if (cmd === "FontName") {
                    this.nodeChild$.css('font-family', val);
            }
        }
    }
});
于 2017-01-19T10:01:58.283 回答
0

这对我有用

tinymce.init({
            init_instance_callback: function (editor) {
                editor.on('ExecCommand', function (e) {
                    var node = editor.selection.getNode();
                    if (node) {
                        var children = $(node).children("li");
                        if (children) {
                            children.removeAttr('data-mce-style');
                            children.css("font-size", e.value);
                        }
                    }
                });
            }
        });
于 2020-09-15T19:52:26.803 回答