javascript - Inline CKEditor with toolbar on generated code -

i'm building backend cms @ moment. i've been asked create module generates different blocks make page (picture text below, picture text right etc.)

that bit working editing text i'm trying use ckeditor. using follwing code text editable i'm not getting toolbar :

<div id="editable" contenteditable="true">     <h4>{{title}}</h4>     {{text}} </div> 

to try , solve tried using javascript ckeditor's guide :

ckeditor.disableautoinline = true; ckeditor.inline( 'editable' ); 

this code creating error :

uncaught typeerror: cannot call method 'geteditor' of undefined  

i suppose it's because before text has been generated editor has nothing link to.

can please me make generated code editable toolbar? also, possible ckeditor working class names instead of ids?

thanks in advance

during initialization phase ckeditor checks whether there's editor instance already bound element. error suggests you're providing id of element hasn't been yet attached dom or removed dom before inline() called.

make sure order correct:

<div id="editable" contenteditable="true">     <h4>{{title}}</h4>     {{text}} </div>  <script>    ckeditor.disableautoinline = true;    ckeditor.inline( 'editable' ); </script> 

is <div id="editable" contenteditable="true">...</div> generated javascript? if so, make sure inline() called after element injected dom.

"last hope" suggestion: call inline() different dom scope (i.e. iframe window)?