ckeditor how to allow for .insertHtml("<customTag myAttr='value'"></customTag>")

Question

var currentDialog = CKEDITOR.dialog.getCurrent();
currentDialog._.editor.insertHtml("<customTag myAttr='var'></customTag>");

Throws an error, TypeError: Cannot read property 'isBlock' of undefined

If I try .insertHtml("<span>hello</span>") it works just fine.

How can I change ckeditor to allow me to specify my own custom html tags via .insertHtml()? I'd love to just change it to be something like <span class='custom'... or something like that, but I'm having to deal with legacy CMS articles. Using latest ckeditor. Thanks.

Answer 1

1. You need to modify CKEDITOR.dtd object so editor will know this tag and correctly parse HTML and process DOM:

   CKEDITOR.dtd.customtag = { em:1 };        // List of tag names it can contain.
   CKEDITOR.dtd.$block.customtag = 1;        // Choose $block or $inline.
   CKEDITOR.dtd.body.customtag = 1;          // Body may contain customtag.
   

2. You need to allow for this tag and its styles/attrs/classes in Advanced Content Filter:

   editor.filter.allow( 'customtag[myattr]', 'myfeature' );
   

Unfortunately, due to some caching, in certain situations you cannot modify DTD object after CKEditor is loaded - you need to modify it when it is created. So to do that:

1. Clone the CKEditor repository or CKEditor presets repository.

2. Modify core/dtd.js code.

3. And build your minified package following instructions in README.md - the only requirements are Java (sorry - Google Closure Compiler :P) and Bash.

PS. That error should not be thrown when unknown element is inserted, so I reported http://dev.ckeditor.com/ticket/10339 and to solve this inconvenience http://dev.ckeditor.com/ticket/10340.