CKEDITOR - apply bold to a numbered list, including numbers

Question

I ran into a problem with a numbered list in ckeditor. When I try to highlight text in li, only the text becomes bold, without the previous number. This is how it looks

• One
• Two
• Three

It should be like

2. Two

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

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

I would like to know if there is a way to change the button operation boldso that it adds something like below

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

Answer 1

I tried to solve your problem.

My solution is not the best, because I think creating a bold plugin that takes care of the list items would be the best solution.

jQuery; , , .

• , - :

  • . . .

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

  • . , node, ,

    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 ( ).

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

,

Answer 3

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


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