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

项目场景：

提示：上回分析了ckeditor的简单应用，因为交互关系我采用的是JQurey,用的是upload的方法现在用接口联调的过程中遇到图片上传及显示的问题如下：

1. 图片上传文件所需要的参数找不到，file
2. 图片位置调整，尺寸调整不够便捷
3. 数据返回后样式不符–所见即所得
4. 保存数据和解析数据只能是行内样式标签形式

---

问题描述及原因分析：：

提示：

//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'
            ]
        },
    //

3. 数据返回后样式不符–所见即所得
   图片返回的样式不能按着约定的样式进行展示
4. 保存数据和解析数据只能是行内样式标签形式
   涉及到文件上传，后端对文件解析之后是标准的HTML格式的数据，而ckeditor只支持对它本身独有的进行展示

---

解决方案：

提示：

1. 图片上传文件所需要的参数找不到，file
   文档上说的直接可以用

  // 填坑
     constructor(loader) {
           loade.file.then(data=>{
           this.file=data
          }  
   data.append("upload", this.loader.file);  

2. 看了官方文档发现需要加载控制尺寸的插件，对图片进行重新配置
   
   可以调节左右位置，和选择预制尺寸

     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

3. 数据返回后样式不符–所见即所得
   图片返回的样式不能按着约定的样式进行展示
   图片数据回显之后发现img尺寸未设置
   只需要将。image_resized img { width:100% }即可
4. 涉及到文件上传，后端通过POI对文件解析之后是标准的HTML格式的数据，而ckeditor只支持对它本身独有的进行展示，所以解决方案是，后端把HTML格式进行转化成行内样式的标签形式。