Question

I’m using CKEditor with refinerycms (rails CMS) I’ve also added basic support for radius tags (they are the tags used in Radiant, another rails CMS) so I’m able to list some elements from the model in the page just inserting a code.
The problem is that the radius tags mimic html:

<r:product_listing category="products" list_as="grid"/>

When using CKEditor to modify the page contents it thinks the radius tags are invalid HTML, which is correct and the expected behaviour, but I can’t find the way to tell CKEditor to just ignore those tags.

Any ideas?

Thanks in advance

EDIT: Turned out that the tag was being filtered by the sanitize method in rails being called by RefineryCMS.

Answer 1

What kind of issues do you have with custom tags? And on which browsers?

I checked that CKEditor preserves this tag, but wraps entire content with it. To avoid that you have to edit CKEDITOR.dtd, namely:

CKEDITOR.dtd.$empty[ 'r:product_listing' ] = 1;

But that still may not be enough. To have better support you’d need to make more changes in this object – especially important is to define what can be its parents and that it’s an inline tag. For example:

CKEDITOR.dtd.p[ 'r:product_listing' ] = 1; // it is allowed in <p> tag
CKEDITOR.dtd.$inline[ 'r:product_listing' ] = 1;

This still may not be enough – for example you’ll most likely won’t have copy&paste support.

So, if you need more reliable support I’d try a little bit different way. Using CKEDITOR.dataProcessor you can transform this tag into some normal one when data are loaded into editor and when data are retrieved transform it back to that tag.

Example solution:

// We still need this, because this tag has to be parsed correctly.
CKEDITOR.dtd.p[ 'r:product_listing' ] = 1;
CKEDITOR.dtd.$inline[ 'r:product_listing' ] = 1;
CKEDITOR.dtd.$empty[ 'r:product_listing' ] = 1;

CKEDITOR.replace( 'editor1', {
    on: {
        instanceReady: function( evt ) {
            var editor = evt.editor;

            // Add filter for html->data transformation.
            editor.dataProcessor.dataFilter.addRules( {
                elements: {
                    'r:product_listing': function( element ) {
                        // Span isn't self closing element - change that.
                        element.isEmpty = false;
                        // Save original element name in data-saved-name attribute.
                        element.attributes[ 'data-saved-name' ] = element.name;
                        // Change name to span.
                        element.name = 'span';
                        // Push zero width space, because empty span would be removed.
                        element.children.push( new CKEDITOR.htmlParser.text( '\u200b' ) );
                    }
                }
            } );

            // Add filter for data->html transformation.
            editor.dataProcessor.htmlFilter.addRules( {
                elements: {
                    span: function( element ) {
                        // Restore everything.
                        if ( element.attributes[ 'data-saved-name' ] ) {
                            element.isEmpty = true;
                            element.children = [];
                            element.name = element.attributes[ 'data-saved-name' ];
                            delete element.attributes[ 'data-saved-name' ]
                        }
                    }
                }
            } );
        }
    }
} );

Now r:product_listing element will be transformed into span with zero-width space inside. Inside editor there will be a normal span, but in source mode and in data got by editor#getData() method you’ll see original r:product_listing tag.

I think that this solution should be the safest one. E.g. copy and pasting works.