如何在tinyMCE中设置列表项项目符号和数字的字体大小？
TinyMCE是一个很棒的工具，它为我们解决了许多问题。然而，存在难以解决的问题。虽然TinyMCE将更改列表中项目字体的大小，但它不会更改继续执行这些项目的项目符号（无序列表）或数字（有序列表）的大小。
用户最终会看到这样的内容：
正如您在图片中看到的那样，两个列表中字体的大小不同，但项目符号的大小是相同的。
有谁知道如何让TinyMCE更改子弹以匹配字体？
11 个答案:
答案 0 :(得分：6)
在搜索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 :(得分：2)
Bernhard的解决方案在TinyMCE 4.1.7中对我不起作用，但下面的代码确实如此。我提供了一些背景信息，希望尽可能清楚。
这是来自网站建设者。用户通过右键单击要编辑的DIV并选择＆＃34; text＆＃34;来打开编辑器。从上下文菜单中。这将执行一个tinymce.init，它将内联编辑面板附加到DIV。添加编辑器后，控件就会出现在此处。
第一个editor.on放置一个回调以捕捉编辑器创建的结束，并在那时激发焦点以显示编辑器。第二个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
});
});
答案 2 :(得分：2)
我略微编辑了Steve的答案，使用tinymce domutils而不是jquery。我还添加了检查整个列表选择：
URLClassLoader请注意，遗憾的是，这不适用于颜色变化。更多信息在Can't catch the ForeColor command anymore, tinymce 4.1.4
答案 3 :(得分：1)
这对我有用：
在tinyMCE.init上我在setup上添加了一个回调：
setup: function(ed) {
ed.onKeyDown.add(function(ed, e) {
tinyMceKeyDownCallbacks(ed,tiny_id);
});
}
然后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'));
});
}
答案 4 :(得分：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");
}
});
}
}
});
答案 5 :(得分：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");
}
}
});
});
答案 6 :(得分：1)
正如S.P.提到的，TinyMCE将内部<li>内容包含在<span>中，其中包含编辑器中设置的样式。您可以定位该范围，并以编程方式将样式复制到匹配的<li>：
$('.content-custom li').each(function() {
var spanStyle = $(this).find('span').attr('style');
$(this).attr('style', spanStyle);
});
答案 7 :(得分：0)
因为TinyMCE包含了所有内容。为了避免像我这样的问题，我已经这样做了：
<ol>
<li style="font-size: <something you want>;">one</li>
<li style="font-size: <something you want>;">two</li>
</ol>
答案 8 :(得分：0)
我已经调整了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);
}
}
}
});
答案 9 :(得分：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);
}
}
});
}
});
答案 10 :(得分：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', '');
//}
});
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？