CKEDITOR-将粗体应用于包含数字的编号列表

CKEDITOR - Apply bold to numbered list including numbers

本文关键字：数字 编号 列表 包含 应用于 CKEDITOR-      更新时间：2024-03-28

ckeditor中的编号列表出现问题。当我尝试在li中加粗某些文本时，只有文本变为粗体，而没有前面的数字。这就是它的样子，

  1. 一
  2. 两个
  3. 三

它应该像这个

2.两个

当我检查源代码时，我发现了下面的代码

<li><strong>Two</strong></li>

我想知道有没有办法改变bold按钮的工作方式，这样它就会在下面添加一些类似的东西

<li style="font-weight:bold">Two</li>
<p> Hello <strong>World</strong></p>

我试图解决你的问题。

我的解决方案不是最好的，因为我想创建一个大胆的插件，关心列表项将是最好的解决方案。

我没有使用jQuery；然而，使用它，代码应该变得更简单、可读性更强。

  1. 首先，我们需要定义一些对主要任务有用的东西：

    • 字符串修剪。看看这个。

      if (!String.prototype.trim) {
   String.prototype.trim = function() {
        return this.replace(/^'s+|'s+$/g, ''); 
   };
}

    • 字符串包含。查看此

      String.prototype.contains = function(it) {
        return this.indexOf(it) != -1;
};

    • 第一个子元素。以下函数获取作为参数传递的元素的第一个子元素，或者不是空文本节点

      function getFirstChildNotEmpty(el) {
    var firstChild = el.firstChild;    
    while(firstChild) {
        if(firstChild.nodeType == 3 && firstChild.nodeValue && firstChild.nodeValue.trim() != '') {
            return firstChild;
        } else if (firstChild.nodeType == 1) {
            return firstChild;
        }
        firstChild = firstChild.nextSibling;
    }
    return firstChild;
}

  2. 现在，我们可以定义我们需要的两个主要功能：

    function removeBoldIfPresent(el) {
    el = el.$;
    var elStyle = el.getAttribute("style");
    elStyle = (elStyle) ? elStyle : '';
    if(elStyle.trim() != '' && elStyle.contains("font-weight:bold")) {
        el.setAttribute("style", elStyle.replace("font-weight:bold", ''));
    }
}
CKEDITOR.instances.yourinstance.on("change", function(ev) {
    var liEls = ev.editor.document.find("ol li");
    for(var i=0; i<liEls.count(); ++i) {
        var el = liEls.getItem(i);
        var nativeEl = el.$.cloneNode(true);
        nativeEl.normalize();
        var firstChild = getFirstChildNotEmpty(nativeEl);
        if(firstChild.nodeType != 1) {
            removeBoldIfPresent(el);
            continue;
        }
        var firstChildTagName = firstChild.tagName.toLowerCase()
        if(firstChildTagName == 'b' || firstChildTagName == 'strong') {
            //TODO: you also need to consider the case in which the bold is done using the style property
            //My suggest is to use jQuery; you can follow this question: https://stackoverflow.com/questions/10877903/check-if-text-in-cell-is-bold
            var textOfFirstChild = (new CKEDITOR.dom.element(firstChild)).getText().trim();
            var textOfLi = el.getText().trim();
            if(textOfFirstChild == textOfLi) {
                //Need to make bold
                var elStyle = el.getAttribute("style");
                elStyle = (elStyle) ? elStyle : '';
                if(elStyle.trim() == '' || !elStyle.contains("font-weight:bold")) {
                    el.setAttribute("style", elStyle + ";font-weight:bold;");
                }
            } else {
                removeBoldIfPresent(el);
            }
        } else {
            removeBoldIfPresent(el);
        }
    }
});

您需要使用最新版本的CkEditor（4.3版）和onchange插件（默认包含在完整包中）。

CKEditor 4.1删除其规则中未指定的类、样式和属性。

如果这是问题所在，你可能想通过添加以下行来禁用它：

CKEDITOR.config.allowedContent = true;


以下是使用它的完整代码：

window.onload = function() {
    CKEDITOR.replace( 'txt_description' );
    CKEDITOR.config.allowedContent = true;   //please add this line after your CKEditor initialized
};

请在这里查看

<ul class="test">
<li><span>hello</span></li>
</ul>

.test li
 {
 font-weight:bold;
 }
.test li span
 {
 font-weight:normal;
 }
相关文章：