Question

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

一
的两个
三

应该是这样的

2。两个

当我查看来源时，我找到了如下代码

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

我想知道有没有办法改变bold按钮的工作方式，以便添加类似下面的内容

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

Answer 1

我试图解决你的问题。

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

我在不使用jQuery的情况下制作它;但是，使用它代码应该变得更简单，更易读。

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

字符串修剪。请参阅this。

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

字符串包含。见this

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;
}

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

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 plugin（默认情况下包含在full package中）。

Answer 2

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
};

请查看here

Answer 3

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


.test li
 {
 font-weight:bold;
 }
.test li span
 {
 font-weight:normal;
 }

CKEDITOR - 将粗体应用于编号列表，包括数字

3 个答案: