CKEditor5 经验总结 (SpringBoot项目)
作者:mmseoamin日期:2023-12-20

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