javascript - CKEDITOR 4.0 detach toolbar dynamically -

javascript - CKEDITOR 4.0 detach toolbar dynamically -

i trying figure out how create ckeditor instance toolbar attached seperate div div creating instance on. see in config array can set config.sharedspaces = { top: 'divid' } (at to the lowest degree in older versions could), can't on config page, needs done on page creating instances on. know how this?

here how creating instance:

ckeditor.replace( 'editor', { toolbargroups: [ { name: 'document', groups: [ 'mode', 'document', 'doctools' ] }, { name: 'clipboard', groups: [ 'clipboard', 'undo' ] }, { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] }, { name: 'colors' }, { name: 'styles'}, { name: 'paragraph', groups: [ 'list', 'align' ], items: [ 'numberedlist', 'bulletedlist', '-', 'outdent', 'indent', '-', 'blockquote' ] }, { items: [ 'image', 'table', 'horizontalrule', 'specialchar' ] }, { name: 'links' }, { name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ] }, { name: 'tools'} ] });

yes know can utilize clone() , not hoping more clean solution.

for ckeditor 4.1+ can utilize optional shared space plugin (needs added ckeditor build).

<div id="top"> <!-- div handle toolbars. --> </div> <div> <textarea id="editor1" name="editor1">my editor content</textarea> </div> <script> ckeditor.replace( 'editor1', { // configure ckeditor utilize shared space plugin. extraplugins: 'sharedspace', // resize plugin not create sense in context. removeplugins: 'resize', sharedspaces: { // configure editor instance place toolbar in div id='top'. top: 'top' } } ); </script>

see "shared toolbar , bottom bar" documentation code examples , working demo source code re-create & download.

javascript jquery ckeditor toolbar