c# - 使用 Jodit WYSIWYG 和 .NET 上传图像

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);

有一篇带有示例源代码的文章，说明如何在此处完成此操作

Answer 2

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

首先注意后端将如何接收名为files. 我的示例是在 PHP 中，@mark-adesina-omoniyi 提供了.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 提供的示例是预期的响应。

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

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函数需要三个参数：

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

否则，您可能会收到如下所示的相同错误：

希望这有助于马克的回答。