基本配置
在对 TinyMCE 配置的介绍中，我们将讨论基于传统表单的布局中通常使用的最重要的选项，以及如何将 TinyMCE 用作内联编辑器的示例。
将 TinyMCE 脚本添加到页面后，需要考虑三个配置方面：
选择器配置
插件配置
工具栏和菜单配置
关于代码段示例的说明
在整个参考文档中，我们使用代码片段展示正在讨论的主题的示例实现。以下是整个文档中的代码片段的一些示例。
片段通常如下所示：
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugin: 'a_tinymce_plugin',
a_plugin_option: true,
a_configuration_option: 400
});
片段始终包含 selector 值 ‘textarea’ 。你需要根据 HTML 更改此值
选择器配置
选择器配置是 TinyMCE 集成的最关键配置选项。选择器配置允许您使用 CSS selector 语法来确定页面上的哪些元素可以通过 TinyMCE 进行示例化。
换句话说，这是为 TinyMCE 可编辑区域指定 CSS 选择器的位置。
在 TinyMCE 的常规编辑模式中使用此选项时，所选元素将替换为 iframe 并且 TinyMCE 将在此上下文中执行所有操作。
这是替换 textarea 页面上所有元素的示例：
tinymce.init({
selector: 'textarea'
});
你还可以匹配 ID 属性。以下是在页面上替换textarea 元素的 ID 为 'editable' 示例：
tinymce.init({
selector: 'textarea#editable'
});
或者：
tinymce.init({
selector: '#editable'
});
插件配置
该 plugins 可以让你在编辑器中启用插件功能。由于几个 TinyMCE 插件为用户提供了有用的功能，因此必须考虑你希望包含哪些插件。
幸运的是，启用插件功能很容易。只需要将 plugins 键添加配置中并提供逗号，空格分隔的字符串或字符串数组作为值。例如：
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins : 'advlist autolink link image lists charmap print preview'
});
工具栏和菜单配置
TinyMCE 带有一组默认的工具栏控件，例如粗体，斜体和文本对齐按钮。但是，在大多数集成中，需要更改工具栏配置以满足你的需要。
默认工具栏控件
在我们开始配置工具栏之前，让我们看看默认的工具栏按钮。你可以从他们的名字中找出他们做的事情。
newdocument, bold, italic, underline, strikethrough, alignleft, aligncenter, alignright, alignjustify, styleselect, formatselect, fontselect, fontsizeselect, cut, copy, paste, bullist, numlist, outdent, indent, blockquote, undo, redo, removeformat, subscript, superscript
默认的TinyMCE工具栏和菜单栏状态
该 toolbar 选项允许选择工具栏上显示的按钮，以及这些项目的顺序和分组。
工具栏选项提供了一个以空格分隔的 toolbar 值列表，以指定应出现在 TinyMCE 工具栏上的控件。要在此列表中创建组，请在要创建”|”的控件组之间添加管道字符。
例
tinymce.init({
selector: 'textarea', // change this value according to your HTML
toolbar: 'undo redo | styleselect | bold italic | link image',
});
如果想禁用 toolbar, 可以设置 toolbar 的值为 false
例
tinymce.init({
selector: 'textarea', // change this value according to your HTML
toolbar: false
});
也可以指定多个工具栏，此时应该为 toolbar 选项提供一个 array 类型的值。也可以使用数字后缀指定多个 toolbar
例
tinymce.init({
selector: 'textarea', // change this value according to your HTML
toolbar: [
'undo redo | styleselect | bold italic | link image',
'alignleft aligncenter alignright'
]
});
或
tinymce.init({
selector: 'textarea', // change this value according to your HTML
toolbar1: 'undo redo | styleselect | bold italic | link image',
toolbar2: 'alignleft aligncenter alignright'
});
快速浏览菜单和菜单栏控件
就像toolbar一样，menu也有一个选项。实际上，有两个与菜单相关的选项：menu和menubar。
默认菜单控件
newdocument, undo, redo, visualaid, cut, copy, paste, selectall, bold, italic, underline, strikethrough, subscript, superscript, removeformat, formats
这两个选项(快速浏览菜单和菜单栏控件)之间的区别在于menubar影响菜单栏上放置的项目，这些项目menu会影响菜单下拉列表中显示的各个项目。此外，menu可以更精细地控制菜单。例如，可以使用创建自己的菜单项标题menu。
在下面的代码片段中，我们的菜单栏只包括菜单项File，Edit和View。但是，这也会加载每个相应菜单中包含的默认项目。例如，Edit加载 “undo”, “redo”, “cat”, “copy”, “paste” 和 “select all”。
tinymce.init({
selector: 'textarea', // change this value according to your HTML
menubar: 'file edit view'
});
如果你想创建一个Edit菜单，并且仅包含剪切，复制，粘贴项目，则可以使用menu。例如：
tinymce.init({
selector: 'textarea', // change this value according to your HTML
menu: {
view: {title: 'Edit', items: 'cut, copy, paste'}
}
});
甚至可以创建自己的菜单标题。在下面的代码段中，我们创建一个标题为 “Happy” 的菜单，并包含“源代码”项。
tinymce.init({
selector: 'textarea', // change this value according to your HTML
menu: {
view: {title: 'Happy', items: 'code'}
},
plugins: 'code' // required by the code menu item
});
同样的，如果想隐藏菜单栏可以这么设置：
tinymce.init({
selector: 'textarea', // change this value according to your HTML
menubar: false, // removes the menubar
});
基本配置示例
使用上面的配置选项，将能够实例化 TinyMCE 并执行初始自定义以符合你要求的编辑器。TinyMCE 还有许多其他配置选项可用于进一步定制和扩展编辑器。
以下是一个基于 Tiny Cloud 编辑器的基本配置的示例代码
tinymce.init({
selector: '#myTextarea',
theme: 'modern',
width: 600,
height: 300,
plugins: [
'advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker',
'searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking',
'save table contextmenu directionality emoticons template paste textcolor'
],
content_css: 'css/content.css',
toolbar: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media fullpage | forecolor backcolor emoticons'
});
上面示例代码的配置详解
首先，我们选择textarea带有 id 为myTextarea的元素作为编辑器的容器
selector: '#myTextarea',
接下来选择一个主题，这里选择的是现代主题(这是默认主题)，主题不是必需的。
theme: 'modern',
这里我们设置可编辑区域的宽度和高度(以像素为单位)。这些必须是数值。
width: 600,
height: 300,
这里设置我们需要加载的插件
plugins: [
'advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker',
'searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking',
'save table contextmenu directionality emoticons template paste textcolor'
],
接下来，我们设置可编辑区域的样式content_css。样式应该是您的网站 CSS 的(非常)精简版本，包括标题样式(H1-H6)，表格布局，边距，元素周围的填充(图像，段落)等。
content_css: 'css/content.css',
最后，我们要选择向用户公开的工具栏按钮。可以使用逗号或空格作为分隔符。
toolbar: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media fullpage | forecolor backcolor emoticons',
以上便是一个基于 Tiny Cloud 的编辑器的基本配置示例的详解
