2

我正在使用 Froala 编辑器。我想将图像上传到自己的服务器，如文档响应格式中所述{ link: 'path/to/image.jpg' }，但我的服务器以另一种格式返回响应。

是否可以通过处理某些事件来使用 Froala 的自定义响应格式？

4

4 回答 4

1

通过前端与服务器响应模型无关。它的模型是在后端设计的，如果您需要更改它，您可以解析您获得的 Json 并根据需要更改模型。要完全按照您上面提到的方式获得模型，您应该与您的后端团队交谈。

于 2016-07-01T11:59:18.447 回答
0

我正在使用 cloudinary.com 上传和提供图像，我也无法控制响应。我的临时解决方案是像这样（coffeescript）修补 JSON.parse 方法：

var _parseJSON = JSON.parse; JSON.parse = function(j) { var response = _parseJSON(j); response.link = response.secure_url; return response; };

我真的希望找到一个更优雅的解决方案！

于 2017-10-27T14:41:55.080 回答
0

只要有来自服务器的响应，就会触发image.uploaded事件。您可以使用此事件的响应参数和image.insert 方法在编辑器中添加图像。

此外，在回调结束时返回 false 以防止默认编辑器上传链也很重要。

下面是一个代码片段：

$('.selector')
  .froalaEditor()
  .on('froalaEditor.image.uploaded', function (e, editor, response) {
    // Parse response to get image url.
    var img_url = ... ;

    // Insert image.
    editor.image.insert(img_url, false, null, editor.image.get(), response);

    return false;
  });
于 2018-06-12T18:33:45.710 回答
0

Froala 在管理上传时似乎没有修改服务器响应的机制。有一个合适的 froala 事件froalaEditor.file.uploaded，但它只能中止上传过程。将来可能会更新以适应此类情况

但是，您想要的绝对是可行的。首先，您需要imageUploadURL在 froala 配置中添加一个查询参数来支持，例如const froalaConfig = {imageUploadURL: '/yourUploadsEndpoint?fromFroala'}. 需要此参数来区分 froala 与其他人实际发出的请求。

然后我们将做一个小猴子补丁XMLHttpRequestObject，froala 内部使用它来发出 http 请求：

const accessor = Object.getOwnPropertyDescriptor(XMLHttpRequest.prototype, 'responseText')

Object.defineProperty(XMLHttpRequest.prototype, 'responseText', {
  get() {
    const responseText = accessor.get.call(this)
    // here we can check if response url includes our previously set query param
    if (this.responseURL.includes('?fromFroala')) {
    // r is our response object
      const r = JSON.parse(responseText)

      return JSON.stringify({ link: <path to your uploaded image url here> })
    }

    return responseText
  },
  configurable: true,
})

这应该可以解决问题，直到 froala 切换到另一个数据获取 API。

于 2018-04-18T13:25:45.267 回答