TinyMCE是一个伟大的工具，它已经为我们解决了许多问题。但是，有一个难以解决的问题。虽然TinyMCE将更改列表中项目的字体大小，但它不会更改处理这些项目的项目符号（无序列表）或数字（有序列表）的大小。如何在tinyMCE中设置列表项目项目符号和数字的字体大小？
什么用户与卷起的东西，看起来像这样：
正如你可以在图片中看到，在两个列表中的字体的大小是不同的，但的大小子弹是一样的。
有谁知道如何让TinyMCE改变项目符号来匹配字体？
由于TinyMCE将所有内容都包含在内。为了规避问题，如你有我这样做：
<ol>
<li style="font-size: <something you want>;">one</li>
<li style="font-size: <something you want>;">two</li>
</ol>
搜索TinyMCE的论坛here和here后，我想出了这个解决方案。
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);
}
}
}
});
});
这种方法存在一些问题：您*有*在编号和项目符号列表中有超过1个项目以进行调整大小的工作。而且你必须在创建列表后创建列表（不能在创建列表之前完成）。这就是说......这种方法确实适合提问者需要它做的事情。 – Dez 2012-10-16 18:59:03
这个工作对我来说：
上tinyMCE.init我添加了一个回调的设置：
setup: function(ed) {
ed.onKeyDown.add(function(ed, e) {
tinyMceKeyDownCallbacks(ed,tiny_id);
});
}
那么jQuery函数用于更新与他们的跨跨度每李类和风格：
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'));
});
}
您可能需要先重设班级： span.parents（'li'）。removeAttr（'class'） – adedip 2013-01-30 13:53:33
我已经在这个问题上工作，并添加了一些不错的功能。这适用于我现在：
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");
}
});
}
}
});
Bernhard的解决方案没有在我的TinyMCE 4.1.7工作，但下面的代码呢。我包含了一些背景信息，希望尽可能清楚。
这是一个网站建设者。用户通过右键单击要编辑的DIV并从上下文菜单中选择“文本”来打开编辑器。这将执行一个tinymce.init，将内联编辑面板附加到DIV。当编辑器被添加时，控制来到这里。
第一个editor.on为了赶上编辑器创建的结束而进行回调，并在那时触发focusin显示编辑器。第二个editor.on捕捉里面的一个跨度的变化并且更新到里。第三个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
});
});
我稍微编辑了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);
}
}
}
});
请注意，这不幸的是，不适用于颜色变化。更多信息在这里Can't catch the ForeColor command anymore, tinymce 4.1.4
在tinymce v4.7.1中使用它，它的工作非常精美。 – jxmallett 2017-11-03 00:20:11
我已经调整了史蒂夫的答案打字稿使用，
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);
}
}
}
});
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-28 12:56:01
是。我想我正在寻找的是在哪里以及如何做到这一点。 – lambmj 2012-08-10 15:59:51
但是，如果您正在构建最终用户无法访问其HTML部分的内容，那么您无法完成此方法。 – Dez 2012-10-16 19:00:57