防止CKEditor过滤辐射标签（无效的HTML标签） [英] Prevent CKEditor filtering Radiant Tags (non-valid HTML tags)

问题描述

我使用CKEditor与refinerycms（rails CMS）我还添加了对半径标签的基本支持（它们是Radiant中使用的标签，另一个是CMS），因此我可以在页面中列出模型中的一些元素，只是插入一个代码。
问题是半径标签模仿html：

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"/>

当使用CKEditor修改页面内容时，它认为radius标签是无效的HTML，

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.

有没有想法？

提前感谢

编辑：发现标签被 sanitize 方法在RefineryCMS调用的rails中。

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

推荐答案

您对自定义代码有什么问题？和在哪些浏览器？

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

我检查CKEditor保留此标签，但包装整个内容。要避免您必须编辑 CKEDITOR.dtd ，即：

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.

所以，如果你需要更可靠的支持，我会尝试一点点不同的方式。使用 CKEDITOR.dataProcessor ，您可以将数据转换为正常的标签

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.

示例解决方案：

// 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' ]
                        }
                    }
                }
            } );
        }
    }
} );

现在 r：product_listing 元素将被转换进入具有零宽度空间的跨度。内部编辑器将有一个正常的跨度，但是在源模式和在编辑器＃getData（）方法中的数据将看到原始 r： product_listing 标签。

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.

这篇关于防止CKEditor过滤辐射标签（无效的HTML标签）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！