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

标签 javascript ckeditor

我为 ckeditor 创建了一个自定义图像浏览器/ uploader 插件。我在集成 advanced content filter 时遇到一些问题

基本上发生的事情是我在对话框选项卡上有一个字段,允许用户编辑图像的内联样式。这看起来工作正常,因为样式被添加到 img 标签中,并且在保存到数据库后,并且在查看生成的 html 时,图像的样式正确。然而,当您再次编辑文档时,CKeditor 已删除样式属性。

在plugin.js中,我设置 allowedContent 属性以包含样式属性

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

在对话框js中,我定义了一个名为“高级”的选项卡,需要允许样式属性才能显示

{
    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 会删除样式属性呢?谁能看到我缺少的东西吗?

最佳答案

我找到了答案,因此我会将其添加到此处,以防对其他人有所帮助。

我在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 样式属性。

关于javascript - 即使在 allowedContent 中设置,CKeditor 也会删除样式属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24964336/

相关文章:

javascript - 使用 promises 获取 ajax 数据

javascript - 如何阻止对 CKEDITOR textarea 中的某些内容进行编辑?

css - 强制 CKEditor 添加一个类到 p-tags

javascript - 当它说element.style时如何找到代码的来源?

python - 在 Django 设置中找不到使用 venv 安装的包

javascript - CKEditor 文件浏览器作为图像对话框上的选项卡

tags - CKEditor防止<p>开头

javascript - BehaviorSubject 不工作 Angular 5

javascript - 有没有办法过滤从 AJAX 查询创建的数组?

javascript - '&' symbol got escaped in the url when used with ' 窗口位置'