Jeecg-boot 开发挖坑日记06 富文本编辑器tinyMCE 图片附件上传

这个富文本组件本质是 TinyMCE github.com/tinymce/tinymce，
在 Vue 项目中使用的封装库 github.com/tinymce/tinymce-vue

Github 上有一个人回复了，框架是使用的 TinyMCE 这个富文本编辑器的 封装库，
所以在其手册里找到了，修改 上传方式的部分

内置方法自动上传

可以使用内置的 automatic_uploads 方法来上传图片文件，并且使用 images_upload_url 指定上传的 URL 地址，但是对后端返回的数据有要求

#automatic_uploads

Enable or disable automatic upload of images represented by data URLs or blob URIs. Such images get generated, for example, as a result of image manipulation through Image Tools plugin, or after image is drag-n-dropped onto the editor from the desktop.
Warning: Note that, this option will do nothing if images_upload_url is not specified.

启用或禁用自动上传由 URL 或 Blob URI 表示的图像。例如，通过 Image Tools 插件的 result，或从本地上传的图片附件。
警告：请注意，如果 images_upload_url 未指定，此项将不执行任何操作。

#images_upload_url

This option lets you specify a URL for the server-side upload handler. Upload will get triggered whenever you call editor.uploadImages() or - automatically, if automatic_uploads option is enabled. Upload handler should return a new location for the uploaded file in the following format:

{ "location": "folder/sub-folder/new-location.png" }

此项使您可以指定上传处理的 URL 地址。 每当调用 editor.uploadImages() 或启用了 automatic_uploads 功能，则会自动触发上传。 上传处理程序应以以下格式返回上传文件的新位置：

{ "location": "folder/sub-folder/new-location.png" }

例子：

tinymce.init({
  selector: "textarea", // change this value according to your HTML
  automatic_uploads: true,
  images_upload_url: "postAcceptor.php"
});

自动拼接 base_url 在上传成功返回的图片地址之前

#images_upload_base_path

This option lets you specify a basepath to prepend to URLs returned from the configured images_upload_url page.

通过此项，可以指定 base_path，并拼接在 images_upload_url 返回的 URL 之前。

例子：

tinymce.init({
  selector: "textarea", // change this value according to your HTML
  automatic_uploads: true,
  images_upload_url: "postAcceptor.php",
  images_upload_base_path: "/some/basepath"
});

自定义上传方法

#images_upload_handler

The images_upload_handler option allows you to specify a function that is used to replace TinyMCE’s default JavaScript upload handler function with custom logic.
The upload handler function takes three arguments: blobInfo, a success callback, and a failure callback. When this option is not set, TinyMCE utilizes an XMLHttpRequest to upload images one at a time to the server and calls the success callback with the location of the remote image.

images_upload_handler 可让指定一个函数，该函数用于用自定义逻辑替换 TinyMCE 默认的 JavaScript 上传函数。
上传函数采用三个参数：blobInfo, success 回调和 failure 回调，如果此项未设置，则 TinyMCE 会利用 XMLHttpRequest 一次一个将图像上传到服务器，并调用 success 回调 返回的 URL 地址。

Note: Please note that when using this option, no other image uploader options are necessary. Additionally, if you would like TinyMCE to replace the tag’s src attribute with the remote location, please use the success callback defined in the images_upload_handler function with the returned JSON object’s location property.

提示：请注意，使用此项时，不要使用其他图像上传器选项。 此外，如果您希望 TinyMCE 将 <image> 标签的 src 属性替换为远程位置，请使用 images_upload_handler 函数中定义的成功回调 和 返回的 JSON 对象的 location 属性。

例子：

tinymce.init({
  selector: "textarea", // change this value according to your HTML
  images_upload_handler: function(blobInfo, success, failure) {
    var xhr, formData;
    xhr = new XMLHttpRequest();
    xhr.withCredentials = false;
    xhr.open("POST", "postAcceptor.php");
    xhr.onload = function() {
      var json;
      if (xhr.status != 200) {
        failure("HTTP Error: " + xhr.status);
        return;
      }
      json = JSON.parse(xhr.responseText);
      if (!json || typeof json.location != "string") {
        failure("Invalid JSON: " + xhr.responseText);
        return;
      }
      success(json.location);
    };
    formData = new FormData();
    formData.append("file", blobInfo.blob(), blobInfo.filename());
    xhr.send(formData);
  }
});

疑问？

1.使用编辑器内置的图片上传方法，为何拼接的是当前的 domain URL,而不是 base_url

  • 使用完整的 URL 地址即可 images_upload_url:'http://www.domain.com/project/Controller/fanction'

2.如按照文档上所说的，使用 images_upload_base_path，是否会自动拼接 URL?

  • 只有在 automatic_uploads: true 时使用的自动上传功能才会拼接

3.如何关闭多媒体附件功能

  • 如在 Jeecg-boot 框架下，注释掉 @/components/jeecg/JEditor.vue 的第 13 行 import 'tinymce/plugins/media' MediaPlugin 的引入
  • 去除 tinymce.init() 初始化函数内 plugins 和 toolbar 属性内的 media 即可。

4.为什么会自动替换图片URL为相对路径

默认情况下URL会被编辑器自动转化，如果图片URL和当前域名相同的话，如果不希望被自动转换，可以是修改 convert_urls 为 flase。
更多内容可以查看官方文档URL handling options | Docs | TinyMCE

附