CKEDITOR 4 Inline mode Toolbar in LI contenteditable

1
votes

In CKEDITOR 4 I'm using the inline mode

I have a BulletedList with <ul contenteditable="true">

and when I press ENTER I can't not create a new LI with a <P contentenditable="true"> children to have the toolbar for format text options.

Here the JSFIDDLE

And here the list plugin source

1
ckeditorinlinetoolbarbulletedlist

1 Answers

2
votes

You cannot build your editor on <ul> element because CKEditor wasn't designed to work like that. You can find the list of editable elements by calling CKEDITOR.dtd.$editable in your console:

CKEDITOR.dtd.$editable
>>> Object {address: 1, article: 1, aside: 1, blockquote: 1, body: 1…}

You can wrap your list in div element, make it editable and strip out when retrieving data. There's a simple example of how to modify elements on editor output. You'll need to return false when your div is processed. This is it.

You can also do this with RegExp but I don't find it gentle ;)