CKEditor5 经验总结

• 背景
• CKEditor5 简介
• 使用
• • 基础初始化
  • 定义HTML
  • 实例
  • 自定义图片上传适配器
  • 开启图片上传
  • • 图片上传遇到的问题
    • 开启视频上传
    • • 视频上传遇到的问题
      • 参考博客

        背景

        项目中 CKEditor4 更新到 CKEditor5(CKEditor4 不支持视频，除升级版本外也可以通过安装插件的方式实现，点击这里)，两个版本间的变化很大，且 CKEditor5 没有对应的中文文档以及相关资料较少。

        最终通过 CKEditor5 实现富文本的图片、视频上传功能。

        本文以 Classic editor 经典编辑器为例，记录在使用过程中遇到的问题。

        CKEditor5 简介

        CKEditor 5是一个超现代的JavaScript富文本编辑器，具有MVC架构、自定义数据模型和虚拟DOM。它是在ES6中从头编写的，并且有出色的webpack支持。包含经典编辑器、内联编辑器、气球编辑器、气球块编辑器、文档编辑器。

        官方提供了四种引入方式：

        • CDN
        • npm
        • Online builder
        • Zip download

          使用

          基础初始化

          定义HTML

          实例

          自定义图片上传适配器

          官方文档参考：https://ckeditor.com/docs/ckeditor5/latest/framework/deep-dive/upload-adapter.html

          开启图片上传

          初始化内容富文本时，引入自定义上传Adapter👉extraPlugins: [ MyCustomUploadAdapterPlugin ]。

          官方文档提供两种图片上传方案，Official upload adapters 和 Custom upload adapters ，区别在于前者功能更强大但需要付费订阅，参考地址：官方文档参考

          图片上传遇到的问题

          a、无法上传图片

          场景描述： 控制台提示：filerepository-no-upload-adapter

          原因： 未定义图片上传适配器

          解决方案： 参考官方文档，自定义图片上传适配器，并在初始化ClassicEditor插件时，配置自定义图片上传适配器MyCustomUploadAdapterPlugin官方文档参考

          b、403异常

          场景描述： 初始化ClassicEditor并配置自定义图片上传适配器，上传图片时提示控制台403异常

          原因： 未放开CSRF校验

          解决方案： 在Security配置文件中加如下代码，放开请求路径的CSRF保护等安全机制，以避免出现403错误。

          import org.springframework.beans.factory.annotation.Autowired;
          import org.springframework.context.annotation.Configuration;
          import org.springframework.security.authentication.AuthenticationDetailsSource;
          import org.springframework.security.authentication.AuthenticationProvider;
          import org.springframework.security.config.annotation.authentication.builders.AuthenticationManagerBuilder;
          import org.springframework.security.config.annotation.method.configuration.EnableGlobalMethodSecurity;
          import org.springframework.security.config.annotation.web.builders.HttpSecurity;
          import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
          import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter;
          import org.springframework.security.web.authentication.WebAuthenticationDetails;
          import org.springframework.security.web.util.matcher.AntPathRequestMatcher;
          import javax.servlet.http.HttpServletRequest;
          @EnableWebSecurity
          @Configuration
          @EnableGlobalMethodSecurity(prePostEnabled = true) 
          public class Security extends WebSecurityConfigurerAdapter {
              @Autowired
              private AuthenticationDetailsSource authenticationDetailsSource;
              @Autowired
              private AuthenticationProvider authenticationProvider;
              @Override
              protected void configure(HttpSecurity http) throws Exception {
          			http.csrf().ignoringAntMatchers("/upload/**").and().headers().frameOptions().sameOrigin().xssProtection().block(true).and();
          			... // 其他配置
              }
          }
          

          c、需要注意的细节：

          • 图片上传URL根据实际情况修改，xhr.open( ‘POST’, ‘admin/upload/rest/files’, true

            )；

          • Controller在定义时，@RequestParam(“uploadFiles”) 要与 data.append(

            ‘uploadFiles’, file );一致。

            import com.alibaba.fastjson.JSON;
            import org.springframework.beans.factory.annotation.Autowired;
            import org.springframework.web.bind.annotation.*;
            import org.springframework.web.multipart.MultipartFile;
            import javax.servlet.http.HttpServletRequest;
            import javax.servlet.http.HttpServletResponse;
            @RestController
            public class UploadRestController {
            	@Autowired
            	private UploadService uploadService;
            	@RequestMapping(value = "/admin/upload/rest/files", method = RequestMethod.POST)
            	public JSON uploadFiles(@RequestParam("uploadFiles") MultipartFile file, HttpServletRequest request,
            								HttpServletResponse response)
            			throws IOException {
            		return uploadService.uploadFiles(request, response, file);
            	}
            }
            

            • 请求返回值格式

              成功：

              {
                  "uploaded":true,
                  "url":"图片地址(如：/upload/xxx/abc.jpg)"
              }
              

              失败：

              {
                  "uploaded":false,    
                  "url":
              }
              

              开启视频上传

              视频上传遇到的问题

              a. 视频部分引入媒体url失败

              场景描述： 点击工具栏中的视频选项，随便引入一个媒体url，提示不支持该媒体url;

              原因： 目前CKEditor5支持的视频provider仅有dailymotion、spotify、youtube、vimeo、instagram、twitter、googleMaps、flickr和facebook，每个provider都有自己的媒体url匹配路径 ，具体可查看meida-embed原文档;

              解决方案： 自定义视频provider

              在原有js部分中的初始化加入自定义的provider，在url属性中定义自己的url匹配规则，详见上文。

              b. 视频预览及页面不显示视频问题

              场景描述： 在富文本框贴入视频链接后，视频不能显示；

              原因： 当视频链接贴入富文本筐后，插件会自动生成一个如下标签：

              
              	
              
              		...
              	
              	...
              
              

              解决方案： H5 标签

              参考博客

              https://blog.csdn.net/oldpubcat/article/details/105518980

              https://blog.csdn.net/huhui806/article/details/105312410