我为 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/