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

3
votes
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.

2
ckeditor

2 Answers

5
votes

  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.

0
votes

I worked around this issue with a combination of createFromHtml() and insertElement()

CKEDITOR.replace('summary', { ... });

var editor = CKEDITOR.instances.summary; 
editor.on('key', function(ev) {
    if (ev.data.keyCode == 9) { // TAB
        var tabHtml = '<span style="white-space:pre">&#09;</span>';
        var tabElement = CKEDITOR.dom.element.createFromHtml(tabHtml, editor.document);
        editor.insertElement(tabElement);
    }
}