Question

我正试图建立一个Jodit WYSIWYG，我发现他们的文档相当混乱。我正在寻找一种使用Jodit和C＃ASP.NET上传图像的方法。

Answer 1

您需要做的是拥有可以处理文件上传的服务器端代码，并确保响应格式如下：

{
  "success": true,
  "data": {
  "files": [
  "ionicui_challenge03.png"
],
   "baseurl": "http://localhost:62072/uploads/",
   "message": "",
   "error": "",
   "path": "http://localhost:62072/uploads/ionicui_challenge03.png"
  }
}

之后，您可以像这样初始化Jodit插件：

var uploadOptions = {
            enableDragAndDropFileToEditor: true,
            uploader: {
                url: 'file/upload',
                isSuccess: function (resp) {
                    return resp;
                },
                process: function (resp) { 

                    console.log(JSON.stringify(resp));
                    return {
                        files: resp.data.files,
                        path: resp.data.path,
                        baseurl: resp.data.baseurl,
                        error: resp.data.error,
                        message: resp.data.message
                    }
                },
                defaultHandlerSuccess: function (data) {
                    var i, field = 'files';                      
                    if (data[field] && data[field].length) {
                        for (i = 0; i < data[field].length; i += 1) {
                            this.selection.insertImage(data.baseurl + data[field][i]);
                        }
                    }
                },
            }
        }


        var editor = new Jodit("#editor", uploadOptions);

有一篇文章带有示例源代码，介绍了如何完成此操作here

Answer 2

您没错，因为文档令人困惑，并且有时会遗漏某些细节。这就是我在实现Jodit编辑器方面的经验。

首先请注意后端将如何接收名为files的FILES帖子对象。我的示例在PHP中，@ mark-adesina-omoniyi提供了link for .NET。

if(isset($_FILES['files'])){

  // Count # of uploaded files in array
  $total = count($_FILES['files']['name']);

  // Check if any files have been selected
  if ($total > 0) {

    // Default return array
    $return_list = [];

    // Loop through files
    for ($i = 0; $i < $total; $i++) {

      // Notice how the file data has been received
      $file_data = array(
        'name' => $_FILES['files']['name'][$i],
        'tmp_name' => $_FILES['files']['tmp_name'][$i],
        'size' => $_FILES['files']['size'][$i],
        'type' => $_FILES['files']['type'][$i],
        'error' => $_FILES['files']['error'][$i]
      );

      // Use whatever function to upload signle file
      $file_response = handleUploadSingleFile($file_data);

      // If response is true, add to array
      if ($file_response) {
        $return_list[] = $file_response;
      }
    }

    // The return that is received on the Process function
    return array(
      'success' => true,
      'message' => "Upload completed.",
      "list" => $return_list
    );
  } else {
    return array(
      'success' => false,
      'message' => "Please select file."
    );
  }
}

响应不一定必须采用任何特定格式。但是，@ mark-adesina-omoniyi提供的示例是expected response。

要实现上传图像，您需要在options config对象中设置uploader对象，如下所示：

uploader: {
  url: "/api/path/upload/", // Upload API for the backend
  format: 'json', // Response format
  data: {}, // Pass whatever post data you need here
  isSuccess: function(resp) {
    return !resp.error;
  },
  getMsg: function(resp) {
    return resp.msg.join !== undefined ? resp.msg.join(' ') : resp.msg;
  },
  baseurl: relativePathURL, // Ex: /subdir/path/to/files/
  process: function(resp) {
    // Use custom response from upload to build expected object on success
    let files = [];
    resp.list.map((file) => {
      files.push(file.name);
    });
    // Passes through to defaultHandlerSuccess as response
    return { 
      files, // {array} The names of uploaded files. Field name uploader.filesVariableName
      path: relativePathURL, // {string} Real relative path 
      baseurl: relativePathURL, // {string} Base url for filebrowser
      error: (resp.success ? 0 : 1), // {int}
      msg: resp.message // {string}
    };
  },
  error: function(e) {
    console.log(e);
  },
  defaultHandlerSuccess: function(resp) {  
    if (resp.files && resp.files.length) {
      for (let i = 0; i < resp.files.length; i++) {
        let full_file_path = resp.path + resp.files[i];
        this.selection.insertImage(full_file_path, null, 250);
      }
    }
  },
  defaultHandlerError: function (resp) {
    this.events.fire('errorPopap', [this.options.uploader.getMsg(resp)]);
  }
}

请注意process函数如何处理来自后端的响应并准备所需的数据，然后将其发送到defaultHandlerSuccess。

请注意insertImage函数requires three parameters：

url: string | HTMLImageElement,
styles: IDictionary<string> | null,
defaultWidth: number | string | null

否则，您可能会看到以下相同的错误：

希望这对Mark的回答会有所帮助。

使用Jodit WYSIWYG和.NET上传图像

2 个答案: