Menu
I am building a web app that uses javascript to dynamically add elements to the page, that can then be edited using contentEditable="true" and CKEditor.
Currently if I add an element to the page with contentEditable="true", the element is editable but the CKEditor toolbar is not appearing.
I have tried calling CKEDITOR.inlineAll() but this doesn't seem to do anything.
How can I activate CKEditor inline editing on dynamically created elements? (Without refreshing the page).
EDIT: I have found that giving the element an ID of (e.g.) someId and calling CKEDITOR.inline(someId) has the desired effect. But I don't want to have to add unique IDs to all of my elements. Is there a way to activate CKEditor on all contentEditable elements?
863
CKEDITOR.inline accepts a native DOM element as a parameter. No matter how you create dynamic elements, if you pass a reference to that function, it will convert it into CKEditor instance. For example, assuming that you use jQuery as a main framework:
// A dynamically created element.
var el = $( '<p contenteditable="true">I\'m editable!</p>' );
// Append the element to <body>.
$( 'body' ).append( el );
// CKEDITOR.inline accepts DOM element as parameter.
CKEDITOR.inline( el.get( 0 ) );
See the fiddle.
85
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
