Search code examples
listformattingckeditorwysiwygrich-text-editor

CKEditor: Insert text below nested list

I tried asking CKEditor staff directly, but they will only answer questions on SO:

Is it possible to insert a line of text below a nested list with the same indent as original list item?

See below image where there is a "footer" before next number of list starts.

By altering the resulting HTML, I am able to insert text into 'li' tag of 'ol' and achieve the desired result. Problem is, my customers will not be able to fiddle with html. If it is not possible using CKEditor, is there any other javascript based rich text editor that could help me?

The way word handles this scenario

Solution

  • Think about CKEditor editor area like iframe or separated html page. This mean you can edit your CKEditor document same way as you would edit html with js. You can write js function or ckeditor command something like this:

    var ckbody = CKEDITOR.instances["textarea"].document.getBody();
var firstUL = ckbody.document.getElementsByTagName("UL")[0];
var nestedUL = firstUL.document.getElementsByTagName("UL")[0];
var myFooter = new CKEDITOR.dom.element( 'span' );
myFooter.innerHTML = "This is my list footer.";
nestedUL.parentNode.insertBefore(myFooter, nestedUL.nextSibling);