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'
            ]
        },
    //
  1. 数据返回后样式不符–所见即所得
    图片返回的样式不能按着约定的样式进行展示
  2. 保存数据和解析数据只能是行内样式标签形式
    涉及到文件上传,后端对文件解析之后是标准的HTML格式的数据,而ckeditor只支持对它本身独有的进行展示

解决方案:

提示:

  1. 图片上传文件所需要的参数找不到,file
    文档上说的直接可以用
  // 填坑
     constructor(loader) {
    
    
           loade.file.then(data=>{
    
    
           this.file=data
          }  
   data.append("upload", this.loader.file);  
  1. 看了官方文档发现需要加载控制尺寸的插件,对图片进行重新配置
    在这里插入图片描述
    可以调节左右位置,和选择预制尺寸
     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
  1. 数据返回后样式不符–所见即所得
    图片返回的样式不能按着约定的样式进行展示
    图片数据回显之后发现img尺寸未设置
    只需要将。image_resized img { width:100% }即可
  2. 涉及到文件上传,后端通过POI对文件解析之后是标准的HTML格式的数据,而ckeditor只支持对它本身独有的进行展示,所以解决方案是,后端把HTML格式进行转化成行内样式的标签形式。

猜你喜欢

转载自blog.csdn.net/weixin_45176415/article/details/111271128
今日推荐