网上有很多关于Ckeditor粘贴样式都是的解决办法,但那都是ckeditor4或者3,没有关于ckeditor5的,老版本解决办法这里就不说了,这里说下ckeditor5的解决办法。
先看下ckeditor5和ueditor粘贴后的代码对比:
1、ueditor粘贴后,可以看到很多行内样式:
2、ckeditor5粘贴后,可以看到样式几乎全部没了:
这里仍然以vue3使用ck-editor5这篇文章介绍的安装方法来操作。在build插件前,找到src/ckeditor.js文件,看看有没有安装“GeneralHtmlSupport”查看,没有的话安装下。
1、在ckeditor.js中引入GeneralHtmlSupport插件:
import GeneralHtmlSupport from '@ckeditor/ckeditor5-html-support/src/generalhtmlsupport.js';
2、在Editor.builtinPlugins中,加入插件:
Editor.builtinPlugins = [ GeneralHtmlSupport, ]
3、在编辑器配置里使用:
Editor.defaultConfig = { // GeneralHtmlSupport插件配置 htmlSupport: { // 允许所有粘贴的样式和标签 allow: [{ name: /.*/, attributes: true, classes: true, styles: true }], disallow: [ /* HTML features to disallow */ ] }, }
allow就是允许的样式、标签、属性等,详细配置可查看:https://ckeditor.com/docs/ckeditor5/latest/api/html-support.html
4、配置好后,run build,将build后的文件重新覆盖到项目中。打开编辑器页面,重新粘贴,发现样式都在了: