如何在tinyMCE中设置列表项项目符号和数字的字体大小？
TinyMCE是一个伟大的工具，它为我们解决了许多问题。然而，有一个问题一直难以解决。TinyMCE会更改列表中项目的字体大小，但不会更改项目符号（无序列表）或编号（有序列表）的大小 用户最终得到的结果如下所示： 如图所示，两个列表中字体的大小不同，但项目符号的大小相同如何在tinyMCE中设置列表项项目符号和数字的字体大小？,tinymce,Tinymce,TinyMCE是一个伟大的工具，它为我们解决了许多问题。然而，有一个问题一直难以解决。TinyMCE会更改列表中项目的字体大小，但不会更改项目符号（无序列表）或编号（有序列表）的大小 用户最终得到的结果如下所示： 如图所示，两个列表中字体的大小不同，但项目符号的大小相同 有人知道如何让TinyMCE更改项目符号以匹配字体吗？因为TinyMCE将所有内容都包装在span中。为了避免像你这样的问题，我做了以下几点： <ol> <li style="font-size: &l
有人知道如何让TinyMCE更改项目符号以匹配字体吗？因为TinyMCE将所有内容都包装在span中。为了避免像你这样的问题，我做了以下几点：
<ol>
<li style="font-size: <something you want>;">one</li>
<li style="font-size: <something you want>;">two</li>
</ol>
一件
两个
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);
}
}
}
});
});
setup: function(ed) {
ed.onKeyDown.add(function(ed, e) {
tinyMceKeyDownCallbacks(ed,tiny_id);
});
}
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'));
});
}
我已经解决了这些问题，并添加了一些不错的功能。这对我现在很有用：
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并从上下文菜单中选择“text”来打开编辑器。这将执行一个tinymce.init，它将一个内联编辑面板附加到DIV。添加编辑器后，控件出现在此处 第一个
编辑器.on编辑器.on编辑器.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
});
});
/************************************************************************************/
/*微小事件*/
/************************************************************************************/
tinymce.on（'AddEditor'，函数（e）{
//添加编辑器后，通过触发“聚焦”来显示它，而不是等待单击
e、 编辑器.on（'NodeChange'，函数（e）{
e、 target.fire（'focusin'）；//显示编辑器
});
//更新父级以匹配文本中的字体大小或字体系列更改
e、 关于（'ExecCommand'，函数（e）{
var cmd=e.command；
如果（cmd==“FontSize”| cmd==“FontName”）{
var val=e.value；
var node=e.target.selection.getNode（）；//此事件对象中的编辑器位于目标位置
var nodeParent=node.parentNode；
if（node.nodeName==“SPAN”&&nodeParent.nodeName==“LI”）{
//我们正在更改 内部的样式。
//更改 以匹配新字体大小或字体系列。
//（B、U和前景色按钮不在此处，因此我们无法在此处更新这些按钮的li）
节点租金$=$（节点租金）；
nodeParent$.removeAttr（'data-mce-style'）；
如果（cmd==“FontSize”）{
nodeParent$.css（'font-size'，val）；
}
如果（cmd==“FontName”）{
nodeParent$.css（'font-family'，val）；
}
}
}
});
//删除编辑器时（通过单击内嵌面板的空白区域）
//将draggability恢复到DIV（必须在tinymce.init之前杀死，因为draggability
//和（不一起工作）。
e、 编辑器.on（'removeditor'，函数（e）{
g、 currentElement$.attr（'编辑器状态'，“关闭”）
.draggable（'enable'）//使DIV再次可拖动
.removeClass（'textCursor'）；//将其指针指针指针还给DIV
});
});
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);
}
}
}
});
请注意，不幸的是，这不适用于颜色更改。更多信息在这里我已经调整了Steve的答案，以便在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);
}
}
}
});
正如S.p.所提到的，TinyMCE使用包含编辑器中设置的样式的
$('.content-custom li').each(function() {
var spanStyle = $(this).find('span').attr('style');
$(this).attr('style', spanStyle);
});
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);
}
}
});
}
});
以下是我的作品，所有以上都失败了，因为测试要求不选择，但列表的开头应该基于选择的字体大小
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', '');
//}
});
editor.on（'ExecCommand'，函数checkListNodes（evt）{
var cmd=evt.command；
var val=evt.value；
var node=evt.target.selection.getNode（）；
var nodeParent=node.parentNode；
如果（cmd=='FontSize'| | cmd==='FontName'）{
如果（node.nodeName=='SPAN'）{//（nodeParent.parentNode.nodeName==='LI'）
{
var whileNode=节点；
var count=1；//不希望在编辑器中没有列表时无止境
while（whileNode.nodeName！=='LI'&&countYes。我想我要找的是在哪里以及如何做到这一点。但是，如果您正在构建最终用户无法访问HTML部分的内容，那么您就无法实现此方法。此方法存在一些问题：您必须
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', '');
//}
});