TinyMCE 通过图片上传器上传编辑后的图片。这补充了 TinyMCE 的图片编辑功能。

通过其他方式添加的本地图片也会使用此功能进行上传，例如在使用 paste_data_images 配置属性时通过拖放添加的图片，或使用 Tiny PowerPaste 插件。

TinyMCE 会自动更新 <img> 的 src 属性为远程图片的新路径。

本地图片使用 editor.uploadImages() 函数上传到 TinyMCE。此功能允许用户在所有图片完成上传 之前 保存内容。如果发生这种情况且没有可用的远程图片服务器路径，图片将保存为 Base64。

在将编辑器内容提交到服务器 之前 执行 editor.uploadImages() 函数，以避免将图片存储为 Base64。使用成功回调在所有图片上传完成后执行代码。此成功回调可以通过 POST 将编辑器的内容保存到服务器。

查看以下示例：

使用 uploadImages 然后提交表单

tinymce.activeEditor.uploadImages().then(() => {
  document.forms[0].submit();
});

在 jQuery 中使用 uploadImages

tinymce.activeEditor.uploadImages().then(() => {
  $.post('ajax/post.php', tinymce.activeEditor.getContent()).done(() => {
    console.log("Uploaded images and posted content as an ajax request.");
  });
});
TinyMCE 不支持 SVG（可缩放矢量图形），以保护我们的用户及其最终用户。SVG 可用于执行客户端和服务器端攻击。

图片上传器要求

服务器端上传处理程序脚本将本地图片上传到远程服务器。该脚本必须：

  • 在服务器上接受图片

  • 适当地存储图片

  • 返回包含图片上传位置的 JSON 对象

PHP 上传处理程序的示例实现可在 此处 找到。

图片通过 HTTP POST 发送到图片上传器，每个请求包含一张图片。images_upload_url 中引用的 URL 处的图片处理程序必须在应用程序中“存储”图片。一些示例包括：

  • 将项目存储在 Web 服务器的文件夹中

  • 将项目存储在 CDN 服务器上

  • 将项目存储在数据库中

  • 将项目存储在资产管理系统中

上传图片时使用标准化名称（例如 blobid0、blobid1、imagetools0、imagetools1）。

确保您的上传处理程序脚本在存储图片之前为每个上传的文件生成唯一名称。一种常见的方法是在文件名末尾附加当前毫秒时间戳。这将创建如 blobid0-1458428901092.png 或 blobid0-1460405299-0114.png 这样的文件名。
如果文件名 不 唯一，文件将被覆盖。

此服务器端上传处理程序脚本必须返回一个包含 "location" 属性的 JSON 对象。该属性表示新上传图片的远程位置和文件名。

{ location: '/uploaded/image/path/image.png' }

图片上传选项

设置 images_upload_url 或 images_upload_handler 选项以使图片上传功能生效。此处显示的其他选项为可选。

必需：

  • images_upload_url

或

  • images_upload_handler

可选：

  • images_upload_base_path

  • images_upload_credentials

  • images_reuse_filename

images_upload_url

此选项允许您指定服务器端上传处理程序的 URL。每当调用 editor.uploadImages() 或启用 automatic_uploads 选项时自动触发上传。上传处理程序应以以下格式返回上传文件的新位置：

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

请务必在此处查看服务器端上传处理程序的演示实现 here（使用 PHP 编写）。

类型： String

示例：使用 images_upload_url

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

images_upload_handler

此选项允许您指定一个函数，用于替换 TinyMCE 默认的 JavaScript 上传处理程序函数并自定义逻辑。

上传处理程序函数接受两个参数：

  • blobInfo

  • 一个 progress 回调函数，接受 1 到 100 之间的值。

并返回一个 Promise，该 Promise 将以上传的图片 URL 解析或以错误拒绝。错误可以是字符串或包含以下属性的对象：

  • message - 要在 UI 中显示的错误消息。

  • remove - 从文档中移除图片的标志，如果未设置则默认为 false。

当未设置此选项时，TinyMCE 使用 XMLHttpRequest 一次将一个图片上传到服务器，并以服务器返回的 JSON location 属性解析 Promise 作为远程图片的位置。

类型： Function

示例：使用 images_upload_handler

const example_image_upload_handler = (blobInfo, progress) => new Promise((resolve, reject) => {
  const xhr = new XMLHttpRequest();
  xhr.withCredentials = false;
  xhr.open('POST', 'postAcceptor.php');

  xhr.upload.onprogress = (e) => {
    progress(e.loaded / e.total * 100);
  };

  xhr.onload = () => {
    if (xhr.status === 403) {
      reject({ message: 'HTTP Error: ' + xhr.status, remove: true });
      return;
    }

    if (xhr.status < 200 || xhr.status >= 300) {
      reject('HTTP Error: ' + xhr.status);
      return;
    }

    const json = JSON.parse(xhr.responseText);

    if (!json || typeof json.location != 'string') {
      reject('Invalid JSON: ' + xhr.responseText);
      return;
    }

    resolve(json.location);
  };

  xhr.onerror = () => {
    reject('Image upload failed due to a XHR Transport error. Code: ' + xhr.status);
  };

  const formData = new FormData();
  formData.append('file', blobInfo.blob(), blobInfo.filename());

  xhr.send(formData);
});

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  images_upload_handler: example_image_upload_handler
});

images_upload_base_path

此选项允许您指定一个 basepath，用于追加到配置的 images_upload_url 页面返回的 URL 前。

类型： String

示例：使用 images_upload_base_path

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

images_upload_credentials

images_upload_credentials 选项指定对配置的 images_upload_url 的调用是否应传递凭据（如 cookie、授权头或 TLS 客户端证书）以进行跨域上传。当设置为 true 时，凭据将发送给上传处理程序，类似于 XMLHttpRequest 的 withCredentials 属性。

类型： Boolean

默认值： false

可能值： true, false

示例：使用 images_upload_credentials

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

images_reuse_filename

默认情况下，TinyMCE 会为每个上传的文件生成唯一的文件名（详情参见 上传图片）。有时这可能会产生不良的副作用。例如，当启用 automatic_uploads 时，使用 图像编辑 插件对图像进行的任何操作都会导致文件上传，并且每次都以不同的文件名上传，尽管图像本身并未改变。

将 images_reuse_filename 设置为 true 可告诉 TinyMCE 使用图像的实际文件名，而不是每次都生成新文件名。请注意，相应 <img> 标签的 src 属性将被您从服务器返回的任何文件名替换（参见 images_upload_url）。它可以是相同的文件名，也可以是其他名称，但下次使用该文件名进行上传时，将继续使用它。

类型： Boolean

默认值： false

可能的值： true, false

示例：使用 images_reuse_filename

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

CORS 注意事项

配置 跨域资源共享 (CORS) 以将图像数据上传到单独的域，并符合 JavaScript 的“同源”限制。

CORS 对什么构成跨域请求有着严格的规定。浏览器在上传到与编辑器托管在同一服务器时可能要求 CORS 头。例如：

  • 同一域名上的不同端口

  • 使用主机 IP 地址而不是域名

  • 页面和上传脚本之间切换 HTTP 和 HTTPS

上传脚本的 URL 源必须与地址栏中的 URL 源完全匹配，否则浏览器将要求 CORS 头才能访问它。请使用相对 URL 来指定脚本地址，而不是绝对 URL，以确保这一点。

如果存在 CORS 错误，所有支持的浏览器都会向 JavaScript 控制台打印消息。

此处提供的 PHP 上传处理程序脚本 在 $accepted_origins 变量中配置了 CORS。请在 Web 应用程序层 或 HTTP 服务器层 配置 CORS。

CORS 进一步阅读