集成选项

TinyMCE 的目标位置

selector

此选项允许指定一个 CSS 选择器，用于 TinyMCE 应当设为可编辑的区域。

在 TinyMCE 的常规编辑模式中使用此选项时，该元素会被替换为一个 iframe，TinyMCE 将在此 iframe 内执行所有操作。在 TinyMCE 的内联编辑模式中使用此选项时，该选择器可应用于任意块级元素，并直接在原地编辑内容，而不会用 iframe 替换该元素。

有关常规编辑模式与内联编辑模式差异的更多信息，请参阅 设置内联编辑模式。

类型： String

示例：替换页面上所有 textarea 元素

tinymce.init({
  selector: 'textarea'  // 根据 HTML 更改此值
});

示例：替换 id 为 "editable" 的 textarea 元素

tinymce.init({
  selector: 'textarea#editable'
});

示例：在 id 为 "editable" 的 div 元素上启用内联编辑模式

tinymce.init({
  selector: 'div#editable',
  inline: true
});

target

有时可能已有一个 DOM 元素的引用，例如当元素是动态创建的。在这种情况下，通过选择器初始化编辑器可能不太合理（因为必须先创建选择器——id 或 class）。在此类情况下，可以通过 target 选项直接提供该元素。

selector 选项优先于 target，因此若要使 target 生效，请勿使用 selector 选项。

类型： Node

示例：使用 target

const el = document.createElement('textarea');
document.body.appendChild(el);

// ...

tinymce.init({
  target: el
});

向编辑器添加占位内容

placeholder

此选项添加占位内容，当编辑器为空时显示。

如果在 textarea 元素上初始化编辑器，也可以使用 placeholder 属性。

类型： String

示例：使用 placeholder

tinymce.init({
  selector: 'textarea',  // 根据 HTML 更改此值
  placeholder: '在此输入...'
});

配置编辑器 iframe

iframe_attrs

此选项允许在经典模式下运行时，为编辑器的内容 iframe 元素添加自定义属性。这些属性将在 iframe 创建过程中应用。

此选项仅影响主编辑器内容 iframe，不影响其他 iframe，例如预览框架、对话框 iframe 或编辑器内容中创建的 iframe 元素。

类型： Object

示例：使用 iframe_attrs 增强无障碍性

tinymce.init({
  selector: 'textarea',  // 根据 HTML 更改此值
  iframe_attrs: {
    'aria-required': 'true',
    'aria-describedby': 'editor-description'
  }
});

示例：使用 iframe_attrs 进行自定义样式设置

tinymce.init({
  selector: 'textarea',  // 根据 HTML 更改此值
  iframe_attrs: {
    'style': 'background-color:rgb(64, 167, 99); border: 2px solid #ddd;',
    'class': 'custom-editor-frame'
  }
});

示例：验证 iframe_attrs 配置

// 编辑器初始化后，可以验证配置：
console.log(tinymce.activeEditor.options.get('iframe_attrs'));
// 输出:  {style: 'background-color:rgb(64, 167, 99); border: 2px solid #ddd;', class: 'custom-editor-frame'}

聚焦编辑器

Tab 顺序

页面元素（包括 TinyMCE）的 Tab 顺序，应通过在相关 HTML 元素上设置 tabindex 属性 来配置。浏览器将原生处理 Tab 顺序。

若要为 TinyMCE 编辑器配置 tabindex，请在编辑器的目标元素上设置该属性。

在 iframe（经典编辑器）模式下，TinyMCE 会将目标元素的 tabindex 属性复制到编辑器的 iframe，以确保此功能正常工作。

示例：配置 Tab 顺序

<script>
tinymce.init({
  selector: 'textarea'
});
</script>
...
<input tabindex="1">
<textarea tabindex="2"></textarea>
<input tabindex="3">

auto_focus

自动将焦点设置到一个编辑器实例。此选项的值应为编辑器实例的 id。编辑器实例 id 是被替换的原始 textarea 或 div 元素的 id。

类型： String

示例：使用 auto_focus

tinymce.init({
  selector: 'textarea',  // 根据 HTML 更改此值
  auto_focus: 'element1'
});

custom_ui_selector

使用 custom_ui_selector 选项指定希望 TinyMCE 视为编辑器界面一部分的元素。指定元素后，即使焦点移到匹配此选择器的元素上，编辑器也不会丢失选区。如果焦点移到匹配此选择器的元素上，则不会触发 editor blur 事件，因为它被视为编辑器界面的一部分。

类型： String

示例：使用 custom_ui_selector

tinymce.init({
  selector: 'textarea',  // 根据需要更改此值以匹配您的 HTML
  custom_ui_selector: '.my-custom-button'
});
...
<textarea></textarea>
<button class="my-custom-button">Button</button>

highlight_on_focus

在 TinyMCE 7.0 中，highlight_on_focus 的默认设置已从 false 更改为 true。在 TinyMCE 中使用 highlight_on_focus: true 选项的编辑器，在升级到 TinyMCE 7.0 时，可以从其 TinyMCE 初始化配置中删除此选项。

highlight_on_focus 选项会在实例化的 TinyMCE 编辑器获得输入焦点时为其添加蓝色轮廓。使用 oxide-dark 皮肤时，该轮廓为白色。

这样用户就能清楚地看到编辑器何时处于焦点状态，或者在有多个 TinyMCE 实例时，能看到哪个编辑器具有焦点。

类型： Boolean

默认值： true

可能的值： true，false

示例：使用 highlight_on_focus

tinymce.init({
  selector: "textarea",
  highlight_on_focus: false
});

将 highlight_on_focus 与自定义皮肤结合使用

如果使用自定义皮肤，可以更新两个变量，使 highlight_on_focus 选项的外观与自定义皮肤相匹配。

这两条规则及其默认值为：

@edit-area-border-color: #2D6ADF;
@edit-area-border-width: 2px;

这完全是可选的。如果默认值未更改，highlight_on_focus 选项在使用自定义皮肤时的行为与使用 TinyMCE 默认皮肤时完全一致。

使用插件扩展 TinyMCE

向 TinyMCE 添加插件有两种选项：plugins 和 external_plugins。Tiny 建议使用 plugins 选项来添加随产品捆绑或包含在云订阅中的插件。自定义或第三方插件应使用 external_plugins 选项添加，以简化 TinyMCE 的更新和升级过程。

plugins

此选项允许配置 TinyMCE 在启动时尝试加载的插件。默认情况下，TinyMCE 不会加载任何插件。

插件可以按以下任一方式提供：

• 以空格或逗号分隔的插件名称字符串，例如 'plugin1 plugin2'，或

• 插件名称数组，例如 [ 'plugin1' , `plugin2' ]

类型： String 或 Array

示例：使用字符串的 plugins

tinymce.init({
  selector: 'textarea',  // 根据需要更改此值以匹配您的 HTML
  plugins: 'advlist autolink link image lists charmap preview'
});

示例：使用数组的 plugins

tinymce.init({
  selector: 'textarea',  // 根据需要更改此值以匹配您的 HTML
  plugins: [ 'advlist', 'autolink', 'link', 'image', 'lists', 'charmap', 'preview' ]
});

查看此文档页面获取可用插件列表。

external_plugins

此选项允许从默认 TinyMCE 插件目录之外加载插件。只要所需文件存在，TinyMCE 在启动时就会尝试像往常一样加载这些插件。

在以下情况下可以使用此选项：

• 使用自定义插件。

• 从 CDN 加载 TinyMCE 但不加载插件。

• 从 tinymce-premium NPM 包加载付费插件，无需捆绑或堆叠文件。

• 从与 TinyMCE 核心文件分离的任何位置加载插件。

此选项接受一个对象，该对象包含插件名称及其 JavaScript 文件应加载位置 URL 的 key-value 键值对。

提供的 URL 可以是：

• 绝对 URL：包含协议，例如 https://www.example.com/plugin.min.js。

• 相对于 Web 服务器的根目录：包含前导 “/” 表示相对于 Web 服务器根目录，例如 /plugin.min.js。

• 相对于 TinyMCE base_url：不包含前导 “/” 的相对路径，例如 ../../myplugins/plugin.min.js。默认情况下，base_url 是包含 TinyMCE javascript 文件（例如 tinymce.min.js）的目录。有关 base_url 选项的信息，请参阅：Integration and setup options - base_url。

类型： Object

示例：使用 external_plugins

tinymce.init({
  selector: 'textarea',  // 根据您的 HTML 更改此值
  external_plugins: {
    'customplugin': 'https://cdn.example.com/customplugin/plugin.min.js',
    'advcode': '/<path_to_tinymce-premium>/plugins/advcode/plugin.min.js'
  },
  plugins: 'customplugin advcode',
  // ... 其他配置
});

使用 external_plugins 选项从 NPM 使用 premium 插件

当在不进行打包的情况下使用 tinymce-premium 包时，可以使用 external_plugins 选项配置 premium 插件。URL 可以通过三种方式指定：

绝对 URL

如果插件托管在 CDN 或单独的服务器上，请使用绝对 URL：

tinymce.init({
  selector: 'textarea',
  external_plugins: {
    'advcode': 'https://cdn.example.com/tinymce-premium/plugins/advcode/plugin.min.js',
    'licensekeymanager': 'https://cdn.example.com/tinymce-premium/plugins/licensekeymanager/plugin.min.js',
    'tinycomments': 'https://cdn.example.com/tinymce-premium/plugins/tinycomments/plugin.min.js'
  },
  plugins: 'advcode tinycomments',
  // ... 其他配置
});

相对于 Web 服务器根目录

使用前导“/”表示路径相对于 Web 服务器根目录：

tinymce.init({
  selector: 'textarea',
  external_plugins: {
    'advcode': '/node_modules/tinymce-premium/plugins/advcode/plugin.min.js',
    'licensekeymanager': '/node_modules/tinymce-premium/plugins/licensekeymanager/plugin.min.js',
    'tinycomments': '/node_modules/tinymce-premium/plugins/tinycomments/plugin.min.js'
  },
  plugins: 'advcode tinycomments',
  // ... 其他配置
});

这假定 node_modules 目录可从您的 Web 服务器访问。在生产环境中，您可能需要将插件文件复制到公共目录。

相对于 TinyMCE base_url

使用相对路径（不带前导“/”）指定相对于 TinyMCE base_url 的插件：

tinymce.init({
  selector: 'textarea',
  base_url: '/tinymce', // TinyMCE 位置
  external_plugins: {
    'advcode': 'tinymce-premium/plugins/advcode/plugin.min.js',
    'licensekeymanager': 'tinymce-premium/plugins/licensekeymanager/plugin.min.js',
    'tinycomments': 'tinymce-premium/plugins/tinycomments/plugin.min.js'
  },
  plugins: 'advcode tinycomments',
  // ... 其他配置
});

• 在使用商业许可的 premium 插件时，请记得包含 licensekeymanager 插件。

• 当您想要懒加载插件或无法进行打包时，external_plugins 选项非常有用。

• 选择最适合您的部署结构的 URL 格式。

对于大多数现代应用程序，建议打包 premium 插件。有关更多信息，请参阅 打包 TinyMCE 插件。

有关 URL 格式和路径解析的更多信息，请参阅 base_url 选项。

以只读状态启动编辑器

readonly

将 readonly 选项设置为 true 会以只读模式而不是编辑（设计）模式初始化编辑器。初始化后，可以使用 tinymce.editor.mode.set API 将编辑器切换到设计模式。

类型： Boolean

默认值： false

可能的值： true, false

示例：使用 readonly

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

HTML

<script type="text/javascript">
  function getEditorStatus (editorId) {
    return tinymce.get(editorId).mode.get();
  }

  function toggleEditorStatus (editorId, currentStatus) {
    if (currentStatus === "design") {
      tinymce.get(editorId).mode.set("readonly");
    } else {
      tinymce.get(editorId).mode.set("design");
    }
  }

  function enableDisable (targetEditor, targetElement) {
    const status = getEditorStatus(targetEditor);
    const button = document.getElementById(targetElement);
    toggleEditorStatus(targetEditor, status);
    if (status === "design") {
      button.innerText = "Enable editor";
    } else {
      button.innerText = "Disable editor";
    }
  }
</script>

<textarea id="readonly-demo">Hello, World!</textarea>

<button id="enableDisableButton" class="live_demo" onclick="enableDisable('readonly-demo','enableDisableButton')">Enable editor</button>

CSS

.button {
  display: inline-block;
  min-width: 158px;
  height: 45px;
  line-height: 45px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 14px;
  padding: 0 25px;
  text-align: center;
}
.button:active {
  transform: translateY(1px);
}

.button-color {
  background-color: #1976D2;
}

.button-color:hover {
  background-color: #1d6abe;
}

.link-text {
  color: #fff;
  font-weight: 600;
}

JS

tinymce.init({
  selector: 'textarea#readonly-demo',
  readonly: true,
  content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }'
});

示例：以编程方式切换模式

使用 editor.mode.set() API 在运行时切换 readonly 和 design（可编辑）模式：

const editor = tinymce.activeEditor;

// 切换到只读
editor.mode.set('readonly');

// 切换回可编辑
editor.mode.set('design');

在 readonly 模式下的行为

行为	详情	允许 (True/False)
导航和交互	用户可以将光标放置在编辑器内 导航行为与 design 模式相同，包括： 在块元素（目录、图像、媒体元素）之间移动 使用箭头键、Home、End、Page Up、Page Down 可以播放媒体元素 用户可以选择并复制文本 用户可以与链接进行交互	True
被阻止的操作	所有输入事件（键盘和 IME 输入） 内容修改： 粘贴内容 剪切内容 删除内容 拖放操作 格式更改： 格式化的键盘快捷键（例如，Cmd/Ctrl + B） 在 URL 后按空格键自动链接 元素修改： 切换清单（通过点击或 Cmd/Ctrl + Enter） 缩进列表 通过 Tab 键添加新的表格行 调整表格、媒体元素或图像的大小	False
工具栏和 UI 行为	大多数工具栏按钮被禁用 对话框中的字段（例如，链接对话框）被禁用 当从 design 切换到 readonly 模式时： 所有打开的对话框和 UI 组件会调整以反映只读状态	False
启用的功能	以下工具栏/菜单项在 readonly 模式下保持启用： 全屏 帮助 预览 视觉块 视觉字符 字数统计 导出为 PDF 导出为 Word 视觉辅助 复制 全选	True

将编辑器设置为禁用状态

disabled

禁用编辑器的所有用户交互（包括光标放置、内容修改、UI 组件）。此选项提供的行为类似于 TinyMCE 7.4.0 中对 readonly 模式所做的更改。启用时，编辑器将完全不可交互。

要以编程方式启用/禁用编辑器，请使用 tinymce.activeEditor.options.set('disabled', false/true)。

类型： Boolean

默认值： false

可能的值： true， false

示例：使用 disabled

tinymce.init({
  selector: 'textarea',  // 根据需要修改此值
  disabled: true
});

在编辑器启动（初始化）时执行自定义函数

setup

此选项允许提供一个回调函数，该函数将在 TinyMCE 编辑器实例渲染之前执行。

要指定 setup 回调，请提供一个带有 setup 选项的 JavaScript 函数。此函数应有一个参数，即正在设置的编辑器的引用。

此设置的一个常见用例是将编辑器事件添加到 TinyMCE。例如，如果你想向 TinyMCE 添加点击事件，你可以通过 setup 配置设置来添加它。

类型： Function

示例：使用 setup

tinymce.init({
  selector: 'textarea',  // 根据需要修改此值
  setup: (editor) => {
    editor.on('click', () => {
      console.log('Editor was clicked');
    });
  }
});

init_instance_callback

此选项允许提供一个函数，该函数将在每次编辑器实例初始化时执行。此函数的格式为 initInstance(editor)，其中 editor 是编辑器实例对象的引用。

类型： Function

示例：使用 init_instance_callback

tinymce.init({
  selector: 'textarea',  // 根据需要修改此值
  init_instance_callback: (editor) => {
    console.log(`Editor: ${editor.id} is now initialized.`);
  }
});

您可能还想查看 setup callback 选项，因为它可用于在编辑器实例初始化之前绑定事件。

更改用于加载编辑器的 URL

base_url

此选项允许配置 TinyMCE 的基础 URL。如果 TinyMCE 应从一个位置加载，而主题、模型和插件从另一个位置加载，此选项很有用。

默认情况下，base_url 是包含 TinyMCE JavaScript 文件（例如 tinymce.min.js）的目录。

类型： String

示例：使用 base_url

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

cache_suffix

此选项允许在 TinyMCE 加载 CSS、脚本等的每个请求末尾添加自定义缓存破坏 URL 部分。只需添加应附加到每个 URL 请求的查询字符串部分，例如 "?v=4.1.6"。

类型： String

示例：使用 cache_suffix

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  cache_suffix: '?v=4.1.6'
});

content_security_policy

此选项允许为编辑器的 iframe 内容设置自定义内容安全策略。

类型： String

示例：使用 content_security_policy

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  content_security_policy: "default-src 'self'"
});

referrer_policy

用于设置加载插件和 CSS 时发送的 referrer 信息级别。Referrer 策略可用于：

• 提高最终用户的隐私。

• 协助服务器端过滤 TinyMCE 资源的跨域请求。

类型： String

有关有效的 referrer 策略（指令）列表，请参阅：MDN Web Docs - Referrer-Policy。

示例：使用 referrer_policy

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

suffix

此选项允许手动提供 TinyMCE 的后缀。默认情况下，此值将设置为与包含 TinyMCE 的脚本的后缀相同。加载主题和插件等内容时，此后缀将插入到所有请求中。例如，使用 tinymce.min.js 文件加载 TinyMCE 将使 TinyMCE 加载其延迟加载的所有内容的 .min 版本，例如 theme.min.js 和 plugin.min.js。suffix 选项可用于覆盖此行为。

类型： String

示例：使用 suffix

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