CKEDITOR - Apply bold to numbered list including numbers

Question

I am facing an issue with the numbered list in ckeditor. When I try to bold some text in li, only the text is getting bold, without the preceding number. This is how it looks like,

One
Two
Three

It should be like this

2. Two

When I check the source, I found the code like below

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

I would like to know is there any way to change the working of bold button, so that it will add something like below

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

Just been reading about your problem here: http://dev.ckeditor.com/ticket/8741 Seems that CKEditor will not be "fixing" or implementing a solution for this. So, it looks as though to achieve what you want you will have to create yourself a plugin. However, depending on the various situations/scenarios a user is in, it may not be possible to achieve exactly what you want. — 97ldave, Dec 23 '13 at 10:38
this is achievable with CSS, can I see a broader example please — w3jimmy, Dec 26 '13 at 02:02

score 1 · Answer 1 · edited May 23 '17 at 11:50

I tried to solve your problem.

My solution isn't the best, because I guess that create a bold plugin, that takes care about list items would be the best solution.

I make it without using jQuery; however, using it the code should became simpler and more readable.

First of all, we need to define something useful for the main task:

String trim. See this.

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

String contains. See this

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

First child element. The following function obtains the first child element, or not-empty text node, of the element passed as argument

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

Now, we can define the main two functions we need:

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

    }
});

You need to use the last release of CkEditor (version 4.3), and the onchange plugin (that is included by default in the full package).

score 0 · Answer 2 · edited May 23 '17 at 10:25

0

CKEditor 4.1 remove your classes, styles, and attributes that is not specified in its rules.

If that's the problem, you might want to disable it by adding this line:

CKEDITOR.config.allowedContent = true;

Here is full code to use it:

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

Please check it out here

edited May 23 '17 at 10:25

Community

1
1

answered Dec 19 '13 at 05:19

Parixit

3,829
3
37
61

Thanks for the answer, but I am not sure whether you understood, what I asked. I want to configure the bold button, so that It will edit the content like the example in my question – laradev Dec 19 '13 at 05:43

score -1 · Answer 3 · answered Dec 19 '13 at 09:46

-1

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


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

answered Dec 19 '13 at 09:46

user3118418

7
2

1

This doesn't necesarily have anything to do with CKEditor, and is badly formatted. – Timothy Groote Dec 19 '13 at 09:58

CKEDITOR - Apply bold to numbered list including numbers

3 Answers3