TinyMCE 是一个很棒的工具,它为我们解决了很多问题。然而,有一个问题一直难以解决。虽然 TinyMCE 将更改列表中项目的字体大小,但它不会更改执行这些项目的项目符号(无序列表)或数字(有序列表)的大小。
用户最终得到的结果如下所示:
正如您在图像中看到的,两个列表中的字体大小不同,但项目符号的大小相同。
有谁知道如何让 TinyMCE 更改项目符号以匹配字体?
TinyMCE 是一个很棒的工具,它为我们解决了很多问题。然而,有一个问题一直难以解决。虽然 TinyMCE 将更改列表中项目的字体大小,但它不会更改执行这些项目的项目符号(无序列表)或数字(有序列表)的大小。
用户最终得到的结果如下所示:
正如您在图像中看到的,两个列表中的字体大小不同,但项目符号的大小相同。
有谁知道如何让 TinyMCE 更改项目符号以匹配字体?
在这里和这里搜索 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);
}
}
}
});
});
我稍微编辑了史蒂夫的答案以使用 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
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
});
});
我已经解决了这些问题并添加了一些不错的功能。这现在对我有用:
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");
}
});
}
}
});
这对我有用:
在 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'));
});
}
正如 SP 所提到的,TinyMCE使用包含编辑器中设置的样式的<li>
a 包装内部内容。您可以以该跨度为目标,并以编程<span>
方式将样式复制到匹配项:<li>
$('.content-custom li').each(function() {
var spanStyle = $(this).find('span').attr('style');
$(this).attr('style', spanStyle);
});
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");
}
}
});
});
由于 TinyMCE 将所有内容都包装在 span 中。为了避免像您遇到的问题,我这样做了:
<ol>
<li style="font-size: <something you want>;">one</li>
<li style="font-size: <something you want>;">two</li>
</ol>
以下是对我有用的,以上所有对我来说都失败了,因为需要测试而不是选择,但列表的开头应该基于选择的字体大小
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', '');
//}
});
我已经调整了史蒂夫的答案以在 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);
}
}
}
});
这对我有用
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);
}
}
});
}
});