ckeditor图片上传及预览展示问题解决_ckeditor5 图片预览

项目场景：

提示：上回分析了ckeditor的简单应用，因为交互关系我采用的是JQurey,用的是upload的方法现在用接口联调的过程中遇到图片上传及显示的问题如下：
图片上传文件所需要的参数找不到，file
图片位置调整，尺寸调整不够便捷
数据返回后样式不符–所见即所得
保存数据和解析数据只能是行内样式标签形式
问题描述及原因分析：：

//1. 图片上传文件所需要的参数找不到，file 
     class UploadAdapter {
          constructor(loader) {
            this.loader = loader;
          upload() {
            return new Promise((resolve, reject) => {
              const data = new FormData();
              // 此处有坑
              data.append("upload", this.loader.file);
              data.append("allowSize", 10); //允许图片上传的大小/兆
              $.ajax({
                url: "http:www.baidu.com",
                type: "POST",
                data: data,
                dataType: "json",
                processData: false,
                contentType: false,
                success: function (data) {
                  if (data.res) {
                    resolve({
                      default: data.url,
                    });
                  } else {
                    reject(data.msg);
              });
            });
          abort() {}
         // 加载了适配器
        editor.plugins.get("FileRepository").createUploadAdapter = (loader) => {
          return new UploadAdapter(loader);
       // 2. 图片位置调整，尺寸调整不够便捷
        image: {
            toolbar: [
              'imageTextAlternative','imageStyle:full','imageStyle:side'
数据返回后样式不符–所见即所得
 图片返回的样式不能按着约定的样式进行展示
保存数据和解析数据只能是行内样式标签形式
 涉及到文件上传，后端对文件解析之后是标准的HTML格式的数据，而ckeditor只支持对它本身独有的进行展示 
解决方案：
 
图片上传文件所需要的参数找不到，file
 文档上说的直接可以用 
  // 填坑
     constructor(loader) {
           loade.file.then(data=>{
           this.file=data
   data.append("upload", this.loader.file);  
看了官方文档发现需要加载控制尺寸的插件，对图片进行重新配置
 
 可以调节左右位置，和选择预制尺寸 
     image: {
        // Configure the available styles.
        styles: ["alignLeft", "alignCenter", "alignRight"],
        // Configure the available image resize options.
        resizeOptions: [
            name: "imageResize:original",
            label: "Original",
            value: null,
            name: "imageResize:50",
            label: "50%",
            value: "50",
            name: "imageResize:75",
            label: "75%",
            value: "75",
        toolbar: [
          "imageStyle:alignLeft",
          "imageStyle:alignCenter",
          "imageStyle:alignRight",
          "|",
          "imageResize",
          "|",
          "imageTextAlternative",
      },```
<hr style=" border:solid; width:100px; height:1px;" color=#000000 size=1
数据返回后样式不符–所见即所得
 图片返回的样式不能按着约定的样式进行展示
 图片数据回显之后发现img尺寸未设置
 只需要将。image_resized img { width:100% }即可
涉及到文件上传，后端通过POI对文件解析之后是标准的HTML格式的数据，而ckeditor只支持对它本身独有的进行展示，所以解决方案是，后端把HTML格式进行转化成行内样式的标签形式。
                                    前言CKEditor其实不需要多介绍，最早之前叫FCKEditor，后面改名了，其实就是一个富文本编辑器。
  The best web text editor for everyone
上面是官网首页的内容，看上去挺牛逼的，其实也是，以前富文本编辑器还不是特别多，CKEditor算是老牌中的佼佼者吧，如今选择就有很多了，比如KindEditor，百度UEditor，CKEditor算是经典吧，功能
                                    参考文章：http://blog.ncmem.com/wordpress/2023/11/02/ckeditor%e5%9b%be%e7%89%87%e4%b8%8a%e4%bc%a0%e5%ae%9e%e7%8e%b0%e8%af%a6%e7%bb%86%e6%ad%a5%e9%aa%a4/CKEditor的编辑器工具栏中有一项“图片域”，该工具可以贴上图片地址来在文本编辑器中加入图片，但是没有图片上传。这段代码是Struts 2上传图片的核心代码，把图片上传后保存在项目的某个目录下，并随机重命名。
                                    了解 CKEditor5-Reacthttps://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/react.html
业务场景：图文混排，图片支持截图粘贴和上传
CKEditor5-React 经典模式ckeditor5-build-classic 可以实现这些基本需求。该模式组件仅支持标题、段落、加粗、倾斜、撤销、重做、块引用、超链接、表格、项目编号/符号列表、图片，视频等，而且图片仅支持占用整栏...
编辑文本的过程中，文本超出换行与预览页面显示不一致
不支持wps赋值黏贴，仅仅支持个浏览器最高版本
在支持预览样式的情况下，需要加载ckeditor5.js暴露的问题加载失败。
问题描述及原因分析：：
预览过程中，编辑器自带标签样式不起作用，需要进行加载ckeditor5.js，在使用的预览盒子上使用ck-content类，进行样式关联。
编辑文本的过程中，文本超出换
const questionBodyEditor = CKEDITOR.replace( 'questionBodyEditor');
questionBodyEditor.on( 'fileUploadRequest', function( evt ) {
    var fileLoader = evt.data.fileLoader,
                                    ckeditor编辑器在上传图片或文件时是没有大小限制的，下面我们来给大家介绍两种ckeditor上传图片文件大小限制问题解决办法。一种可以通过修改PHP.INI配置文件上传大小来限制，另一种方法只能手动修改Fckeditor源码，方法如下1、打开editor/filemanager/connectors/php目录下config.php，创建Config变量设置上传图片大小，这里以KB为单位1、...
                                    问题起因：config.js文件都配置好了，页面上也显示了富文本编辑器，点击图片上传，上传到服务器，也成功了，本地文件夹里也有图片了。但是预览块就是没有图片，只有一个红色的错误提示图片。解决思路：各种百度查资料，大部分都是说文件配置问题，但是，我这里以前也使用过配置是没问题的。所以我就从图片路径上找问题。乍一看文件夹里都已经有上传的图片是没问题了，接着找，上传没问题，就找回显到预览的路径。发现，富...
                                    关于解决CKEditor 4 富文本编辑器在图片组件无法显示[上传]选项卡的相关问题。本文可能会对以下现象得以解决：图片上传组件，没有 [上传] 选项卡。资源无法加载 [imgupload] ( Uncaught Error: [CKEDITOR.resourceManager.load] Resource name "imgupload" was not found at )预览框默认的英文介...
一、集成ckeditor
jsp文件
&lt;%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%&gt;
&lt;%@ taglib uri="/struts-tags" prefix=&quot