Question

我为ckeditor创建了一个自定义图像浏览器/上传器插件。我在整合advanced content filter

时遇到了一些麻烦

基本上发生的事情是我在对话框选项卡上有一个字段，允许用户编辑图像的内联样式。这是正常工作似乎样式添加到img标记并保存到数据库后，当查看生成的HTML时，图像的样式正确。但是当你再次编辑文档时，CKeditor已经删除了style属性。

在plugin.js中的

我将allowedContent属性设置为包含样式属性

editor.addCommand( 'sbImageDialog', new CKEDITOR.dialogCommand( 'sbImageDialog', 
   {allowedContent: 'img[src][style]', requiredContent: 'img[src]' }
));

在对话框j中的

我定义了一个名为“advanced”的标签，要求允许使用style属性才能显示

{
    id: 'advanced',
    label: 'Advanced',
    elements: [
        {
            type: 'text',
            id: 'style',
            label: 'Style',
            requiredContent: 'img[style]',
            setup: function( element ) {
                this.setValue( element.getAttribute('style') );
            },
            commit: function ( element ) {
                var style = this.getValue();
                if ( style )
                    element.setAttribute( 'style', style );
                else if ( !this.insertMode )
                    element.removeAttribute( 'style' );
            }
        },
    ]
}

因为该选项卡确实显示并且在查看时图像的样式正确，所以我似乎正确设置了它。

那么为什么CKeditor在我返回编辑文档时会删除样式属性？谁能看到我错过的东西？

Answer 1

我找到了答案，所以我会在这里添加它，以防它帮助其他人。

我在plugin.js中的位置

editor.addCommand( 'sbImageDialog', new CKEDITOR.dialogCommand( 'sbImageDialog', 
   {allowedContent: 'img[src][style]', requiredContent: 'img[src]' }
));

我必须将allowedContent属性从'img[src][style]'更改为'img[src][style]{*}'

花括号表示允许元素具有的css样式属性。通过放置*我允许所有css样式属性。

即使在allowedContent中设置，CKeditor也会删除样式属性

1 个答案: