ckeditor replace textarea using class name with different toolbar confogurations -
i using following code add ckeditor pages.
<textarea class="ckeditor" name="editor1"></textarea>
i define few toolbar configurations not of textareas in application need full toolbar. have customized default toolbar configuration needs, break down further more basic toolbar of textareas.
is there way if using class attribute set ckeditor?
it's not possible have different configurations editors created class name. in such case, global ckeditor.config
considered.
still there's easy workaround problem. first, put script in top of document:
<script> ckeditor.replaceclass = null; // disable replacing class </script>
now define data-custom-config
property (as config.customconfig) each <textarea>
want replace this:
<textarea class="ckeditor" data-custom-config="mycustomconfig.js"> moo </textarea>
finally use following code manually replace editors class name (assuming class ckeditor
). code replace textareas of class ckeditor
ckeditor instance driven config defined in data-custom-config
attribute:
var textareas = array.prototype.slice.call( document.getelementsbyclassname( 'ckeditor' ) ), textarea, cfg, customcfg; while ( ( textarea = textareas.pop() ) ) { textarea = new ckeditor.dom.element( textarea ); cfg = {}; if ( ( customcfg = textarea.getattribute( 'data-custom-config' ) ) ) cfg[ 'customconfig' ] = customcfg; ckeditor.replace( textarea.getid(), cfg ) }
and comes cherry on top. put custom toolbar config in mycustomconfig.js
:
ckeditor.editorconfig = function( config ) { config.toolbar = [ { name: 'basicstyles', items: [ 'bold', 'italic' ] } ]; };
of course can modify code involve jquery easier element selection, use object literal instead of config.customconfig
, on. showcase of how problem can solved.
Comments
Post a Comment