给编辑器赋值的时候传的明明是带着内联样式的元素一块传的,结果经过编辑器后内联样式被清空了
赋的值:
经过编辑器后(style="color:red"直接被清空了):
解决后页面展示
原因:经过ckeditor编辑器的标签内的属性、类、样式等会被编辑器给过滤掉
解决方法:引入GeneralHtmlSupport插件
安装@ckeditor/ckeditor5-html-support包
npm install --save @ckeditor/ckeditor5-html-support
添加插件配置
import { GeneralHtmlSupport } from '@ckeditor/ckeditor5-html-support';
ClassicEditor
.create( document.querySelector( '#editor' ), {
plugins: [ GeneralHtmlSupport, /* ... */ ],
} )
.then( /* ... */ )
.catch( /* ... */ );
配置config.htmlSupport,allow里面设置允许所有标签元素的样式、属性,保证不被编辑器过滤掉
htmlSupport: {
allow: [//哪些功能被支持
{
name: /.*/,//需要启用的元素名称
attributes: true,
classes: true,//允许所有标签的样式
styles: true,//允许的内联样式
}
],
disallow:[//不支持哪些功能
{name:'script'},//不允许创建script元素
{
name:/.*/,//不允许所有元素执行点击事件
attributes:['onclick'],
}
]
}
具体可见官方文档详解: