此插件使用户能够将图像插入到 TinyMCE 的可编辑区域中。该插件还添加了一个工具栏按钮和一个 插入/编辑图像 菜单项，位于 插入 菜单下。

基本设置

tinymce.init({
  selector: 'textarea',  // 根据您的HTML更改此值
  plugins: 'image',
  toolbar: 'image',
  image_list: [
    { title: 'My image 1', value: 'https://www.example.com/my1.gif' },
    { title: 'My image 2', value: 'http://www.moxiecode.com/my2.gif' }
  ]
});

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

此功能不支持拖放操作，用户需要输入图像的路径。用户还可以选择输入图像的描述、尺寸以及是否应该约束图像比例（通过复选框选择）。其中一些设置可以通过插件的配置选项进行预设。

插件兼容性问题

Media Optimizer Powered by Uploadcare 高级插件不能与以下插件同时配置：

推荐的解决方案：

对于图像：

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

为了保护用户及其终端用户，TinyMCE 不支持 SVG（可缩放矢量图形）。SVG 可以用于执行客户端和服务器端攻击。

选项

这些配置选项会影响 image 插件的执行。这里的许多设置会禁用用于插入或编辑图像的对话框功能。还可以提供预定义的图像列表，以便快速插入这些图像。

如果您希望对齐图像，还可以在选择图像时使用文本对齐按钮。

a11y_advanced_options

此选项影响以下插件的功能：

将 a11y_advanced_options 设置为 true：

  • 在 Insert/Edit Image 对话框中添加 Image is decorative 选项，允许用户指定图像是装饰性的，不需要为辅助功能提供替代文本。

  • 在 Media Optimizer 的 Alt text 上下文工具栏中添加 Decorative image 按钮，允许用户指定图像是装饰性的，不需要为辅助功能提供替代文本。

  • 在 Accessibility Checker error 对话框中为需要标记为装饰性的图像添加 Image is decorative 选项。

如果 a11ychecker_allow_decorative_images 未明确设置，将使用 a11y_advanced_options 中定义的值。

类型： Boolean

默认值： false

可能的值： true, false

示例：使用 a11y_advanced_options

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

file_picker_callback

此钩子可用于为那些具有文件选择器的对话框添加自定义文件选择器。一旦定义了 file_picker_callback，在支持的文件类型字段旁边会出现一个小的浏览按钮（参见 file_picker_types）。当用户点击按钮时，TinyMCE 将自动调用带有三个参数的回调函数：

  • callback - 一旦获取到文件后要调用的回调函数；它期望字段的新值作为第一个参数，对话框中其他字段的可选元信息作为第二个参数

  • value - 受影响字段的当前值

  • meta - 包含指定对话框中其他字段值的对象（注意 meta.filetype 包含字段的类型）

需要注意的是，我们只提供了一个钩子。实现具体的功能取决于您自己。

类型： Function

下面的示例演示了如何使用 file_picker_callback API，但不会选择任何实际文件。有关更具功能性的示例，请查看交互式示例。

示例：使用 file_picker_callback

tinymce.init({
  selector: 'textarea',  // 根据你的 HTML 更改此值
  file_picker_callback: (callback, value, meta) => {
    // 为链接对话框提供文件和文本
    if (meta.filetype == 'file') {
      callback('mypage.html', { text: 'My text' });
    }

    // 为图像对话框提供图像和 alt 文本
    if (meta.filetype == 'image') {
      callback('myimage.jpg', { alt: 'My alt text' });
    }

    // 为媒体对话框提供替代源和海报
    if (meta.filetype == 'media') {
      callback('movie.mp4', { source2: 'alt.ogg', poster: 'image.jpg' });
    }
  }
});

交互式示例

HTML

<textarea id="file-picker"></textarea>

JS

tinymce.init({
  selector: 'textarea#file-picker',
  plugins: 'image code',
  toolbar: 'undo redo | link image | code',
  /* 启用图像对话框中的标题字段*/
  image_title: true,
  /* 启用由 blob 或 data URI 表示的图像的自动上传*/
  automatic_uploads: true,
  /*
    我们的上传处理程序的 URL（有关更多详细信息，请查看： https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_url）
    images_upload_url: 'postAcceptor.php',
    在这里，我们仅为图像对话框添加自定义文件选择器
  */
  file_picker_types: 'image',
  /* 这里是我们的自定义图像选择器*/
  file_picker_callback: (cb, value, meta) => {
    const input = document.createElement('input');
    input.setAttribute('type', 'file');
    input.setAttribute('accept', 'image/*');

    input.addEventListener('change', (e) => {
      const file = e.target.files[0];

      const reader = new FileReader();
      reader.addEventListener('load', () => {
        /*
          注意：现在我们需要将 blob 注册到 TinyMCEs 图像 blob
          注册表中。在下一个版本中，这部分希望不再
          需要，因为我们打算在内部处理它。
        */
        const id = 'blobid' + (new Date()).getTime();
        const blobCache =  tinymce.activeEditor.editorUpload.blobCache;
        const base64 = reader.result.split(',')[1];
        const blobInfo = blobCache.create(id, file, base64);
        blobCache.add(blobInfo);

        /* 调用回调函数并用文件名填充标题字段 */
        cb(blobInfo.blobUri(), { title: file.name });
      });
      reader.readAsDataURL(file);
    });

    input.click();
  },
  content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }'
});

file_picker_types

此选项使你能够通过空格或逗号分隔的类型名称列表来指定所需的文件选择器类型。目前有三个有效类型：file、image 和 media。

类型： String

可能的值： 'file'、'image'、'media'

示例：使用 file_picker_types

tinymce.init({
  selector: 'textarea',  // 根据你的 HTML 更改此值
  file_picker_types: 'file image media'
});

image_caption

此选项允许用户为图像启用标题。当启用此选项时，图像对话框将有一个名为“Caption”的额外复选框。当用户选中该复选框时，图像将被包裹在一个 HTML5 figure 元素中，并在其中包含一个 figcaption。然后，用户可以在编辑器中输入标题内容。

类型： Boolean

默认值： false

可能的值： true、false

示例：使用 image_caption

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

下面是用户选中标题复选框时创建的 HTML 示例。

<figure class="image">
<img src="url" alt="" />
<figcaption>Caption</figcaption>
</figure>

请注意，figure 元素需要添加一些自定义 CSS 才能正确渲染。以下是 TinyMCE 内部 content.css 中使用的内容，可以通过你自己的自定义 content_css 样式表进行覆盖。

figure.image {
  display: inline-block;
  border: 1px solid gray;
  margin: 0 2px 0 1px;
  background: #f5f2f0;
}

figure.align-left {
  float: left;
}

figure.align-right {
  float: right;
}

figure.image img {
  margin: 8px 8px 0 8px;
}

figure.image figcaption {
  margin: 6px 8px 6px 8px;
  text-align: center;
}

image_list

此选项允许你为图像指定一个预定义的来源列表。image_list 采用数组形式，包含要添加到列表中的项以及相应的图像。每个项都有一个 title 和一个 value。

类型： false、String、Function 或 Array

默认值： false

示例：使用 image_list

tinymce.init({
  selector: 'textarea',  // 根据 HTML 更改此值
  plugins: 'image',
  toolbar: 'image',
  image_list: [
    { title: 'Cat', value: 'cat.png' },
    { title: 'Dog', value: 'dog.jpg' }
  ]
});

图像嵌套列表示例

若要创建嵌套列表，请将 value 替换为 menu 以添加列表的顶层，然后提供项目数组。

例如：

tinymce.init({
  selector: 'textarea',  // 根据 HTML 更改此值
  plugins: 'image',
  toolbar: 'image',
  image_list: [
    { title: 'Cat', value: 'cat.png' },
    { title: 'Dogs',
      menu: [
        { title: 'Alaskan Husky', value: 'husky.jpg' },
        { title: 'Dingo', value: 'dingo.png' },
        { title: 'Swedish Lapphund', value: 'swedish_lapphund.gif' }
      ]
    }
  ]
});

返回图像 JSON 数组的外部脚本示例

您也可以配置一个包含 JSON 数据的 URL。该列表的格式与上述相同。

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

自定义异步函数示例

tinymce.init({
  selector: 'textarea',  // 根据 HTML 更改此值
  plugins: 'image',
  toolbar: 'image',
  image_list: (success) => {
    success([
      { title: 'Dog', value: 'mydog.jpg' },
      { title: 'Cat', value: 'mycat.gif' }
    ]);
  }
});

image_advtab

此选项会向图像对话框添加一个 "高级" 选项卡，允许您为图像添加自定义样式、间距和边框。

类型： Boolean

默认值： false

可能的值： true, false

示例：使用 image_advtab

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

image_class_list

此选项允许您指定一个预定义的类列表以添加到图像上。它采用数组的形式，其中包含用于在链接上设置类的元素。

类型： Array

示例：使用 image_class_list

tinymce.init({
  selector: 'textarea',  // 根据 HTML 更改此值
  plugins: 'image',
  toolbar: 'image',
  image_class_list: [
    { title: 'None', value: '' },
    { title: 'No border', value: 'img_no_border' },
    { title: 'Green border', value: 'img_green_border' },
    { title: 'Blue border', value: 'img_blue_border' },
    { title: 'Red border', value: 'img_red_border' }
  ]
});

图像类的嵌套列表示例

若要创建嵌套列表，请将 value 替换为 menu 以添加列表的顶层，然后提供项目数组。

例如：

tinymce.init({
  selector: 'textarea',  // 根据 HTML 更改此值
  plugins: 'image',
  toolbar: 'image',
  image_class_list: [
    { title: 'None', value: '' },
    { title: 'No border', value: 'img_no_border' },
    { title: 'Borders',
      menu: [
        { title: 'Green border', value: 'img_green_border' },
        { title: 'Blue border', value: 'img_blue_border' },
        { title: 'Red border', value: 'img_red_border' }
      ]
    }
  ]
});

image_description

此选项允许您禁用图像对话框中的图像描述输入字段。

类型： Boolean

默认值： true

可能的值： true, false

示例：使用 image_description

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

image_dimensions

此选项允许您禁用图像对话框中的图像尺寸输入字段。

类型： Boolean

默认值： true

可能的值： true, false

示例：使用 image_dimensions

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

image_prepend_url

此选项允许您指定一个 URL 前缀，该前缀将在适当的时候应用于图像。

类型： String

示例：使用 image_prepend_url

tinymce.init({
  selector: 'textarea',  // 根据 HTML 更改此值
  plugins: 'image',
  toolbar: 'image',
  image_prepend_url: 'https://www.example.com/images/'
});

image_title

此选项允许您启用图像对话框中的图像标题输入字段。

类型： Boolean

默认值： false

可能的值： true, false

示例：使用 image_title

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

image_uploadtab

当 images_upload_url 配置完毕后，此选项会在图像对话框中添加一个 “Upload” 标签，允许您上传本地图像。

类型： Boolean

默认值： true

可能的值： true，false

示例：使用 image_uploadtab

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

images_file_types

此选项配置编辑器接受哪些图像文件格式。修改此选项将调整以下编辑器行为：

  • 图像对话框中允许上传哪些图像文件格式。

  • 核心粘贴和 PowerPaste smart_paste 功能识别并将哪些图像文件格式放入 img 元素中。

类型： String

默认值： 'jpeg,jpg,jpe,jfi,jif,jfif,png,gif,bmp,webp'

可能的值： 有效的 Web 图像文件扩展名列表。有关可能值的列表，请参阅：MDN Web 文档 - 图像文件类型和格式指南。

示例：使用 images_file_types

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'image',
  toolbar: 'image',
  images_file_types: 'jpg,svg,webp'
});

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_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',  // 根据需要修改此值以匹配您的 HTML
  images_upload_handler: example_image_upload_handler
});

images_upload_url

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

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

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

类型： String

示例：使用 images_upload_url

tinymce.init({
  selector: 'textarea',  // 根据需要修改此值以匹配您的 HTML
  images_upload_url: 'postAcceptor.php'
});

object_resizing

此选项允许您启用或禁用图像、表格或媒体对象上的调整大小手柄。此选项默认启用，允许您调整表格和图像的大小。您还可以指定要启用调整大小功能的 CSS3 选择器。

禁用所有图像/表格的调整大小功能

类型： Boolean, String

默认值： true

可能的值： true, false, 或有效的 CSS 选择器

此选项的默认值在移动设备上有所不同。有关移动设备默认选项的信息，请参阅：TinyMCE Mobile — 带有移动设备默认值的配置选项。
示例：禁用对象调整大小功能
tinymce.init({
  selector: 'textarea',  // 根据需要修改此值以匹配您的 HTML
  object_resizing: false
});

仅启用图像的调整大小功能

类型： Boolean, String

默认值： true

可能的值： true, false, img

示例：为图像启用对象调整大小功能
tinymce.init({
  selector: 'textarea',  // 根据需要修改此值以匹配您的 HTML
  object_resizing: 'img'
});

resize_img_proportional

当用户在编辑器中调整图像大小时，此选项控制图像是按比例调整还是自由调整。如果设置为：

  • true — 当用户调整图像大小时，图像将按比例调整（图像的两个维度将按相同百分比的长度进行调整）。用户可以通过在调整大小的同时按住 Shift 键来自由调整图像大小。

  • false — 当用户调整图像大小时，图像可以自由调整。用户可以通过在调整大小的同时按住 Shift 键来按比例调整图像大小。

类型： Boolean

默认值： true

可能的值： true, false

示例：使用 resize_img_proportional

要禁用按比例调整图像大小：

tinymce.init({
  selector: 'textarea',  // 根据需要修改此值以匹配您的 HTML
  resize_img_proportional: false
});

typeahead_urls

此选项控制是否应启用或禁用 URL 字段的自动补全功能。

类型： Boolean

默认值： true

可能的值： true, false

示例：使用 typeahead_urls

tinymce.init({
  selector: 'textarea',  // 根据需要修改此值以匹配您的 HTML
  typeahead_urls: false
});

问：高级图像选项在哪里？

请改用 Style Formats 选项，该选项功能更强大。

style_formats: [
  {
    title: 'Image Left',
    selector: 'img',
    styles: {
      float: 'left',
      margin: '0 10px 0 10px'
    }
  },
  {
    title: 'Image Right',
    selector: 'img',
    styles: {
      float: 'right',
      margin: '0 10px 0 10px'
    }
  }
]

工具栏按钮

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

工具栏按钮标识符描述

image

在编辑器中创建/编辑图像。

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

菜单项

Image 插件提供以下菜单项：

菜单项标识符默认菜单位置描述

image

Insert

打开图像对话框。

可以通过以下方式将这些菜单项添加到编辑器中：

命令

Image 插件提供以下 TinyMCE 命令。

命令描述

mceImage

打开插入/编辑图像对话框。

示例
tinymce.activeEditor.execCommand('mceImage');