基本设置

最后更新：2026-11-04 10:10:15

本文介绍了TinyMCE中用于传统表单布局的选项，为创建精简的用户体验提供了有用信息，并给出了将TinyMCE用作inline editor的示例。

TinyMCE最常用的四个配置选项为：

（必需）Selector配置
Plugin配置
Toolbar配置
Menu和Menu Bar配置

关于代码片段示例的说明

在TinyMCE文档中，提供了代码片段作为实现示例。

代码片段示例：

tinymce.init({
  selector: 'textarea',  // 根据HTML修改此值
  plugins: 'a_tinymce_plugin',
  a_plugin_option: true,
  a_configuration_option: 400
});

代码片段包含selector选项，该选项的说明如下。请根据HTML修改可用代码块的值。

将片段插入到HTML文档的<script>标签之间，并按如下说明更新selector。

Selector配置

TinyMCE集成需要Selector配置。Selector配置使用CSS selector语法来确定页面上的哪些元素可通过TinyMCE编辑。

TinyMCE会在视觉上用一个iframe（可编辑内容区域）以及UI元素（如toolbar、menu bar和status bar）替换所选元素。

以下示例将页面上的所有textarea元素替换为TinyMCE实例：

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

TinyMCE也可以匹配id属性。

以下示例将页面上具有id "default"的textarea元素替换为TinyMCE：

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

为TinyMCE编辑器提供默认配置，例如：

HTML

<textarea id="default">Hello, World!</textarea>

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

当编辑器在inline editing mode下使用时，selector可以定位大多数块级元素。Inline mode会就地编辑内容，而不是用iframe替换元素。

以下示例在inline editing mode下，对具有id 'editable'的div元素使用selector：

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

有关classic和inline editing modes之间差异的信息，请参见：Setup inline editing mode。

Plugin配置

通过使用plugins来扩展TinyMCE的功能，plugins通过plugins选项启用。

以下示例启用了lists（lists）、List Styles（advlist）、Link（link）和Image（image）插件。

tinymce.init({
  selector: 'textarea',  // 根据HTML修改此值
  plugins: 'advlist link image lists'
});

有关完整的插件及其选项列表，请参见：Add plugins to TinyMCE。

Toolbar配置

TinyMCE提供了一组默认的toolbar控件，可通过toolbar选项进行覆盖。

默认toolbar控件

TinyMCE默认toolbar包含以下按钮：

tinymce.init({
  selector: 'textarea',  // 根据HTML修改此值
  toolbar: 'undo redo | styles | bold italic | alignleft aligncenter alignright alignjustify | outdent indent'
});

toolbar选项定义toolbar按钮的存在、顺序和分组。

使用以空格分隔的列表来指定TinyMCE的toolbar按钮。在按钮名称之间使用“|”管道字符创建toolbar组。

Menu和Menu bar配置

有两个menu选项：menubar和menu。menubar用于定义菜单的存在和顺序，如File、Edit和View。menu用于定义菜单项的存在和顺序，如New Document、Select all和Source code。

Menu和Menu bar配置示例

要显示File、Edit和View菜单：

tinymce.init({
  selector: 'textarea',  // 根据HTML修改此值
  menubar: 'file edit view'
});

HTML

<textarea id="menubar">A simple menubar change.</textarea>

tinymce.init({
  selector: 'textarea#menubar',
  menubar: 'file edit view'
});

要创建仅包含撤销、重做和全选项的编辑菜单。

tinymce.init({
  selector: 'textarea',  // 根据 HTML 更改此值
  menu: {
    edit: { title: 'Edit', items: 'undo, redo, selectall' }
  }
});

HTML

<textarea id="menu1">修改后的<strong>编辑</strong>菜单。</textarea>

tinymce.init({
  selector: 'textarea#menu1',
  menu: {
    edit: { title: 'Edit', items: 'undo redo | selectall' }
  }
});

要创建名为“Happy”的菜单，需为该菜单提供标识符以及包含title和items属性的对象。

例如：

tinymce.init({
  selector: 'textarea',  // 根据 HTML 更改此值
  menu: {
    happy: { title: 'Happy', items: 'code' }
  },
  plugins: 'code',  // code 菜单项所需插件
  menubar: 'happy'  // 将 happy 添加到菜单栏
});

HTML

<textarea id="menu2">自定义<em>Happy</em>菜单。</textarea>

tinymce.init({
  selector: 'textarea#menu2',
  plugins: 'code',
  menu: {
    happy: { title: 'Happy', items: 'code' }
  },
  menubar: 'happy'
});

默认菜单控件

默认菜单如下：

tinymce.init({
  selector: 'textarea',  // 根据 HTML 更改此值
  menu: {
    file: { title: 'File', items: 'newdocument restoredraft | preview | importword exportpdf exportword | print | deleteallconversations' },
    edit: { title: 'Edit', items: 'undo redo | cut copy paste pastetext | selectall | searchreplace' },
    view: { title: 'View', items: 'code suggestededits revisionhistory | visualaid visualchars visualblocks | spellchecker | preview fullscreen | showcomments' },
    insert: { title: 'Insert', items: 'image link media addcomment pageembed codesample inserttable | math | charmap emoticons hr | pagebreak nonbreaking anchor tableofcontents | insertdatetime' },
    format: { title: 'Format', items: 'bold italic underline strikethrough superscript subscript codeformat | styles blocks fontfamily fontsize align lineheight | forecolor backcolor | language | removeformat' },
    tools: { title: 'Tools', items: 'spellchecker spellcheckerlanguage | a11ycheck code wordcount' },
    table: { title: 'Table', items: 'inserttable | cell row column | advtablesort | tableprops deletetable' },
    help: { title: 'Help', items: 'help' }
  }
});

某些菜单项需要插件，例如table菜单及其项需要table插件。

附加信息

有关menu设置的信息，请参见：用户界面选项 - 菜单。
有关menubar设置的信息，请参见：用户界面选项 - 菜单栏。
有关所有可用菜单项的列表，请参见：TinyMCE 可用菜单项。

基本配置示例

以下示例是一个基本的 TinyMCE 配置。

<!DOCTYPE html>
<html>
<head>
  <script
    type="text/javascript"
    src='https://cdn.tiny.cloud/1/no-api-key/tinymce/8/tinymce.min.js'
    referrerpolicy="origin"
    crossorigin="anonymous">
  </script>
  <script type="text/javascript">
  tinymce.init({
    selector: '#myTextarea',
    width: 600,
    height: 300,
    plugins: [
      'advlist', 'autolink', 'link', 'image', 'lists', 'charmap', 'preview', 'anchor', 'pagebreak',
      'searchreplace', 'wordcount', 'visualblocks', 'visualchars', 'code', 'fullscreen', 'insertdatetime',
      'media', 'table', 'emoticons', 'help'
    ],
    toolbar: 'undo redo | styles | bold italic | alignleft aligncenter alignright alignjustify | ' +
      'bullist numlist outdent indent | link image | print preview media fullscreen | ' +
      'forecolor backcolor emoticons | help',
    menu: {
      favs: { title: 'My Favorites', items: 'code visualaid | searchreplace | emoticons' }
    },
    menubar: 'favs file edit view insert format tools table help',
    content_css: 'css/content.css'
  });
  </script>
</head>

<body>
  <textarea id="myTextarea"></textarea>
</body>
</html>

基本配置示例的分解说明

以下部分是对基本配置示例中使用的选项的分解说明。

选择 ID 为myTextarea的textarea元素，以便用编辑器替换它。

selector: '#myTextarea',

以像素为单位设置可编辑区域的宽度和高度，数值为数字类型。

width: 600,
height: 300,

选择加载时要包含的插件。

plugins: [
  'advlist', 'autolink', 'link', 'image', 'lists', 'charmap', 'preview', 'anchor', 'pagebreak',
  'searchreplace', 'wordcount', 'visualblocks', 'visualchars', 'code', 'fullscreen', 'insertdatetime',
  'media', 'table', 'emoticons', 'help'
],

选择向用户显示的工具栏按钮。使用逗号或空格作为分隔符。

toolbar: 'undo redo | styles | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media | forecolor backcolor emoticons',

使用 menu 添加一个名为“My Favorites”的额外菜单，然后使用 menubar 将其添加到菜单栏。

menu: {
  favs: { title: 'My Favorites', items: 'code visualaid | searchreplace | emoticons' }
},
menubar: 'favs file edit view insert format tools table help',

使用 content_css 设置可编辑区域的样式。

content_css: 'css/content.css',

HTML

<textarea id="basic-conf">
This editor uses the Basic configuration example.
</textarea>

tinymce.init({
  selector: '#basic-conf',
  width: 600,
  height: 300,
  plugins: [
    'advlist', 'autolink', 'link', 'image', 'lists', 'charmap', 'preview', 'anchor', 'pagebreak',
    'searchreplace', 'wordcount', 'visualblocks', 'code', 'fullscreen', 'insertdatetime', 'media',
    'table', 'emoticons', 'help'
  ],
  toolbar: 'undo redo | styles | bold italic | alignleft aligncenter alignright alignjustify | ' +
    'bullist numlist outdent indent | link image | print preview media fullscreen | ' +
    'forecolor backcolor emoticons | help',
  menu: {
    favs: { title: 'My Favorites', items: 'code visualaid | searchreplace | emoticons' }
  },
  menubar: 'favs file edit view insert format tools table help',
  content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }'
});

Additional information

有关配置选项的完整列表，请参阅侧边导航栏中的以下页面：
- Initial configuration - 用于初始配置和重要设置。
- Interface - 用于自定义编辑器的外观和感觉。
- Content - 用于自定义允许的内容及相关行为。
有关Plugins及其选项的信息，请参阅：Add plugins to TinyMCE。
有关在编辑器外部渲染某些TinyMCE元素所需的CSS的信息，请参阅：Boilerplate content CSS。

基本设置

关于代码片段示例的说明

Selector配置

Plugin配置

Toolbar配置

默认toolbar控件

更多信息

Menu和Menu bar配置

Menu和Menu bar配置示例

默认菜单控件

附加信息

基本配置示例

基本配置示例的分解说明

Additional information