CODEWITHSUNDEEP
javascripthtmlckeditor
Agustin Garzon
Agustin Garzon

Reputation: 315

Preventing CKEDITOR from modifying HTML

I'm trying to force CKE to stop modifying my HTML wildly, and trying to introduce our own rules.

For example, CKE will remove empty span and i tags, we can prevent it from doing it with

CKEDITOR.dtd.$removeEmpty.span = false
CKEDITOR.dtd.$removeEmpty.i = false

So far so good. Then we tried to make A tags to be able to support block level elements (HTML5), which we were able to do by manipulating the DTD as well.

But now it seems the DTD object is not enough for what we are trying to do. For example, it's removing empty A tags, and I can't prevent it from doing it,

CKEDITOR.dtd.$removeEmpty.a = false

will not do the trick. It's doing the same thing with empty BR tags located at the end of the content.

I know CKE is using a filter, parser, processor or something that I need to hook onto and modify/alter it in order to stop it from doing those changes. Could you please give me any advise on how to achieve this ?

Cordially, Agustin.

UPDATE

I'm also looking forward in adding an extra supported children to SELECT tag. Select supports optgroup and option as children, I'm trying to add support for a custom_tag (inline), but I can't succeed in making it happen.

CKEDITOR.dtd.select.custom_tag = 1

Is not doing it. The custom tag is also declared on dtd.$inline I guess there is some sort of external processing cleaning it up, and I can't control this from the DTD object. Any pointer on this regard ?

Upvotes: 1

Views: 1157

Answers (2)

Matteo Guarnerio
Matteo Guarnerio

Reputation: 724

To disable filtering HTML (source) in CKEditor write in your config.js file this lines:

CKEDITOR.editorConfig = function( config ) { config.allowedContent = true; };

Source code here.

Upvotes: 2

Reinmar
Reinmar

Reputation: 22023

Unfortunately empty links are a special case and to stop removing them you will need to modify the source:

https://github.com/ckeditor/ckeditor-dev/blob/6f4c29002f4d6ecfa39308b641ae37c56bba1348/core/htmlparser/fragment.js#L59-L66

function isRemoveEmpty( node ) {
    // Keep marked element event if it is empty.
    if ( node.attributes[ 'data-cke-survive' ] )
        return false;

    // Empty link is to be removed when empty but not anchor. (#7894)
    return node.name == 'a' && node.attributes.href || CKEDITOR.dtd.$removeEmpty[ node.name    ];
}

BTW. CKEditor removes empty inline elements, because they are not editable (and some things may start working incorrectly). To ensure correct editability of these elements you can write widgets for them.

Upvotes: 1

Related Questions