本文共 2779 字，大约阅读时间需要 9 分钟。

项目场景：

提示：上回分析了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",        ],      },```

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