此插件仅适用于付费的TinyMCE订阅。

图像编辑(editimage)插件会在编辑器中的图像上添加上下文编辑工具栏。

如果在单击图像后工具栏未显示，您可能需要启用 editimage_cors_hosts 或 editimage_proxy_service_url（见下文）。

交互示例

HTML

<textarea id="edit-image">
  <p><img style="display: block; margin-left: auto; margin-right: auto;" title="Tiny Logo" src="https://www.tiny.cloud/docs/tinymce/latest/_images/logos/android-chrome-256x256.png" alt="TinyMCE Logo" width="128" height="128"></p>
  <h2 style="text-align: center;">Welcome to the TinyMCE editor demo!</h2>
  <h2><img style="float: right; padding: 0 0 10px 10px;" title="Tiny Husky" src="//www.tiny.cloud/docs/images/tiny-husky.jpg" alt="Tiny Husky" height="320" width="304" /></h2>
  <h2>Image Editing Plugin feature<br>Click on the image to get started</h2>

  <h2>Got questions or need help?</h2>

  <ul>
    <li>Our <a href="https://www.tiny.cloud/docs/tinymce/8/">documentation</a> is a great resource for learning how to configure TinyMCE.</li>
    <li>Have a specific question? Try the <a href="https://stackoverflow.com/questions/tagged/tinymce" target="_blank" rel="noopener"><code>tinymce</code> tag at Stack Overflow</a>.</li>
    <li>We also offer enterprise grade support as part of <a href="https://www.tiny.cloud/pricing">TinyMCE premium plans</a>.</li>
  </ul>
  <h2>A simple table to play with</h2>
  <table style="border-collapse: collapse; width: 100%;" border="1">
    <thead>
      <tr>
        <th>Product</th>
        <th>Cost</th>
        <th>Really?</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td style="text-align: center;">TinyMCE</td>
        <td style="text-align: center;">Free</td>
        <td style="text-align: center;">YES!</td>
      </tr>
    </tbody>
  </table>

  <h2>Found a bug?</h2>
  <p>If you think you have found a bug please create an issue on the <a href="https://github.com/tinymce/tinymce/issues">GitHub repo</a> to report it to the developers.</p>

  <h2>Finally ...</h2>
  <p>Need file uploads in your app? Consider using <a href="https://www.tiny.cloud/docs/tinymce/latest/uploadcare/" target="_blank" rel="noopener noreferrer">Uploadcare</a> with TinyMCE for a fast, modern upload experience.</p>
  <p>Thanks for supporting TinyMCE! We hope it helps you and your users create great content.<br>All the best from the TinyMCE team.</p>
</textarea>

JS

tinymce.init({
  selector: 'textarea#edit-image',
  height: 500,
  plugins: [
    'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview',
    'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',
    'insertdatetime', 'media', 'table', 'editimage', 'wordcount'
  ],
  toolbar: 'undo redo | styles | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
  content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }'
});
SVG（可缩放矢量图形）在TinyMCE中不受支持，以保护我们的用户及其最终用户。SVG可用于执行客户端和服务器端攻击。

插件兼容性问题

由Uploadcare提供支持的媒体优化器（Media Optimizer Powered by Uploadcare）高级插件无法与以下插件一起配置：

推荐的解决方案：

对于图像：

如果启用了所有三个插件，编辑器将显示通知：“由于存在不兼容的插件，无法初始化uploadcare。详细信息在浏览器控制台中。”同时控制台会出现错误：“由于存在不兼容的插件：image、editimage，无法初始化uploadcare”。

云端安装

图像编辑插件随所有Tiny Cloud订阅一起提供，包括自动配置的图像代理。只需将 image 添加到 toolbar 列表，并将 image editimage 添加到 plugins 列表。

使用Tiny Cloud的基本设置

tinymce.init({
  selector: 'textarea',  // 根据您的HTML更改此值
  toolbar: 'image',
  plugins: 'image editimage'
});

有关使用模块打包器捆绑此插件的信息，请参阅捆绑TinyMCE - 概述。

自托管安装

要启用TinyMCE图像编辑插件：

  1. 将 image 添加到 toolbar 列表，并将 image editimage 添加到 plugins 列表。

  2. 根据需要启用 editimage_cors_hosts 和 editimage_proxy_service_url 选项。

基本自托管设置

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  toolbar: 'image',
  plugins: 'image editimage',
  editimage_cors_hosts: [ 'example.com', 'example.net' ],
  editimage_proxy_service_url: 'http://example.com/ephox-image-proxy/'
});

选项

editimage_cors_hosts

由于浏览器对所谓的跨源 HTTP 请求实施了安全限制，Image Editing 插件无法处理来自其他域的图片。为了克服这些限制，必须在指定的域（有关更多信息，请查看HTTP 访问控制）上显式启用跨源资源共享（CORS）。

可以通过 editimage_cors_hosts 选项向 TinyMCE 提供一组支持的域（已启用 CORS）以供图片使用。

数组中的每个字符串必须采用 example.com 的格式。请勿在域名中包含协议（例如 http://, https://）或任何尾部斜杠。
当通过Tiny Cloud启用此插件时，editimage_cors_hosts 不是必需的。

类型：Array

默认值：[]

示例：editimage_cors_hosts

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  toolbar: 'editimage',
  plugins: 'image editimage',
  editimage_cors_hosts: [ 'example.com', 'example.net' ]
});

editimage_credentials_hosts

此选项可与 editimage_cors_hosts 选项配合使用，以允许向 CORS 主机发送凭据。默认情况下，此功能未启用，因为服务器需要具备适当的 CORS 头才能支持该功能。

类型：Array

示例：使用 editimage_credentials_hosts

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  toolbar: 'image',
  plugins: 'image editimage',
  editimage_cors_hosts: [ 'example.com', 'example.net' ],
  editimage_credentials_hosts: [ 'example.com', 'example.net' ]
});

editimage_fetch_image

此选项可用于定义自定义 fetch 函数，为在复杂情况下访问图片提供另一种方式。该函数将传入要获取的图片的 HTML 元素，并应返回一个包含图片的 Blob 表示形式的 Promise。

类型：Function

示例：使用 editimage_fetch_image

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  toolbar: 'image',
  plugins: 'image editimage',
  editimage_fetch_image: (img) => new Promise((resolve) => {
    // Fetch the image and return a blob containing the image content
    ...
    resolve(new Blob(...));
  })
});

editimage_proxy

此选项可用作通过第三方本地服务器端代理来编辑跨域图片的方法。代理是一个脚本，它会检索远程图片并将其传回 TinyMCE，就好像它是托管在同一域上的图片一样。

当通过Tiny Cloud启用此插件时，editimage_proxy 不是必需的。如果使用付费 TinyMCE 订阅提供的自托管 Java 代理服务，请改用 editimage_proxy_service_url 选项。

类型：String

示例：使用 editimage_proxy

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  toolbar: 'editimage',
  plugins: 'image editimage',
  editimage_proxy: 'proxy.php'
});

editimage_proxy_service_url

此选项配置服务器端代理服务的 URL，该服务允许 Image Editing 插件检索托管在不同域上的远程图片。如果未配置代理，则可能无法编辑远程图片。有关配置 Docker 容器的详细信息，请查看使用 Docker 部署 TinyMCE 图片代理服务器端组件指南，该容器是TinyMCE 企业订阅的一部分。

当通过Tiny Cloud启用此插件时，editimage_proxy_service_url 不是必需的。

类型：String

示例：使用 editimage_proxy_service_url

tinymce.init({
  selector: 'textarea',
  plugins: 'image editimage',
  editimage_proxy_service_url: 'http://example.com/ephox-image-proxy/'
});

editimage_toolbar

可以通过 editimage_toolbar 选项控制上下文工具栏上将显示的确切按钮选择。

类型：String

默认值：'rotateleft rotateright | flipv fliph | editimage imageoptions'

可能的值：

  • rotateleft

  • rotateright

  • flipv

  • fliph

  • editimage

  • imageoptions

示例：使用 editimage_toolbar

tinymce.init({
  selector: 'textarea',  // 根据HTML更改此值
  toolbar: 'image',
  plugins: 'image editimage',
  editimage_toolbar: 'rotateleft rotateright | flipv fliph | editimage imageoptions'
});

editimage_upload_timeout

此选项可用于设置在编辑图像后，图像上传在超时之前允许的最长时间。该值应为超时前的毫秒数。

类型： Number

默认值： 30000

示例：使用 editimage_upload_timeout

tinymce.init({
  selector: 'textarea',  // 根据HTML更改此值
  toolbar: 'image',
  plugins: 'image editimage',
  editimage_upload_timeout: 60000
});

工具栏按钮

Image Editing插件提供以下工具栏按钮：

工具栏按钮标识符描述

editimage

在图像对话框中编辑当前图像。

fliph

水平翻转当前图像。

flipv

垂直翻转当前图像。

imageoptions

打开图像选项对话框。

rotateleft

逆时针旋转当前图像。

rotateright

顺时针旋转当前图像。

这些工具栏按钮可通过以下方式添加到编辑器中：

命令

Image Editing插件提供以下TinyMCE命令。

命令描述

mceEditImage

打开图像编辑对话框。

mceImageRotateRight

顺时针旋转所选图像90度。

mceImageRotateLeft

逆时针旋转所选图像90度。

mceImageFlipVertical

垂直翻转所选图像。

mceImageFlipHorizontal

水平翻转所选图像。

示例
tinymce.activeEditor.execCommand('mceEditImage');
tinymce.activeEditor.execCommand('mceImageRotateRight');
tinymce.activeEditor.execCommand('mceImageRotateLeft');
tinymce.activeEditor.execCommand('mceImageFlipVertical');
tinymce.activeEditor.execCommand('mceImageFlipHorizontal');