如何从CKEditor 5 getData方法获取img URL?

时间:2018-10-17 02:46:35

标签: ckeditor5

我使用自己的UploadAdapter在CKEditor 5中上传img。 像the official guideline说明一样,实现方法上传如下。

upload() {
    const data = new FormData();
    data.append('file', this.loader.file);
    data.append('token', this.token);
    data.append('key', guid() + '.jpg');

    return new Promise((resolve, reject) => {
        axios({
            url: '{my server url}',
            method: 'post',
            data,
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'Content-Type': 'application/x-www-form-urlencoded'
            },
            withCredentials: false
        }).then(res => {
            var resData = eval("("+res.data+")");
            resData.url = 'my own domain' + resData.url;
            resolve(resData);
        }).catch(error => {
            reject(error)
        });
    });
}

我的服务器响应如下:{上传:true 网址:“ ***。jpg”} 并且上面的代码运行良好。 CKEditor可以得到响应。我可以在编辑器中看到img:

the success result

但是,查看img html代码不是我的期望,它的src属性具有base64,否则我给定的url参数:

<img src="data:image/jpeg;base64,/9j/4*********">

the wrong img html tag

并且编辑器的getData方法无法获取img数据: enter image description here

1 个答案:

答案 0 :(得分:2)

upload() {
  const data = new FormData();
  data.append('file', this.loader.file);
  data.append('token', this.token);
  data.append('key', guid() + '.jpg');

  return new Promise((resolve, reject) => {
    axios({
      url: '{my server url}',
      method: 'post',
      data,
      headers: {
        'X-Requested-With': 'XMLHttpRequest',
        'Content-Type': 'application/x-www-form-urlencoded'
      },
      withCredentials: false
    }).then(res => {
      var resData = res.data;
      resData.default = resData.url; <----------- https://ckeditor.com/docs/ckeditor5/latest/api/module_upload_filerepository-UploadAdapter.html#function-upload
      resolve(resData);
    }).catch(error => {
        reject(error)
    });
  });
}