首页 > 建站教程 > 编辑器、IDE >  CkEditor 5 粘贴内容后样式丢失正文

CkEditor 5 粘贴内容后样式丢失

网上有很多关于Ckeditor粘贴样式都是的解决办法,但那都是ckeditor4或者3,没有关于ckeditor5的,老版本解决办法这里就不说了,这里说下ckeditor5的解决办法。


先看下ckeditor5和ueditor粘贴后的代码对比:

1、ueditor粘贴后,可以看到很多行内样式:

ckeditor5


2、ckeditor5粘贴后,可以看到样式几乎全部没了:

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后的文件重新覆盖到项目中。打开编辑器页面,重新粘贴,发现样式都在了:

ckeditor5