Question

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

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

Answer 1

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

Answer 2

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

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

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

Answer 3

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

然而，你想要的是绝对可行的。首先，您需要在froala配置中向const froalaConfig = {imageUploadURL: '/yourUploadsEndpoint?fromFroala'}道具添加查询参数，例如： XMLHttpRequestObject。需要此参数来区分froala实际发出的请求与其他请求。

然后我们将对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内部用来发出http请求：

var record = app.datasources.DataSourceName.item.FieldName;

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

Answer 4

一旦服务器收到响应，就会触发image.uploaded事件。您可以将此事件的响应参数与image.insert method一起使用，以在编辑器中添加图像。

此外，在回调结束时返回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;
  });

使用自定义响应格式将Froala上传到服务器

4 个答案: