基本设置 | TinyMCE中文文档中文手册

简介与入门 \ 基本设置

此页更新时间：2020-10-28 15:17

此页英文文档：https://www.tiny.cloud/docs/general-configuration-guide/basic-setup/

TinyMCE提供多种配置选项，可与您的程序紧密集成。

此部分将对TinyMCE中常用配置参数进行实例说明。

将TinyMCE的js文件引入后，首先需要考虑这三部分的配置：

选择器配置
插件配置
工具栏配置
菜单栏配置

将TinyMCE的js文件引入后，首先需要考虑这三部分的配置：

1.选择器配置

selector是TinyMCE的重要配置选项，使用CSS选择器语法来确定页面上哪个元素被TinyMCE替换成编辑器。

在经典模式中，TinyMCE将会在selector指定的textarea处插入一个iframe。

以下为selector用法的示例：

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

而在内联模式下，此选项可用于任何块元素，内联模式直接将编辑器插入到指定的容器中，而不使用iframe，再次提示，此处css样式将继承自外部。

指定参数inline:true将开启内联模式：

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

提示：有关经典模式与内联模式的差异，请参考【内联模式】。

2.插件配置

plugins配置参数用于指定哪些插件被用在当前编辑器实例中。TinyMCE自带丰富的插件，您也可以编写自己的插件，用此选项引入。

启用插件非常简单，只需将插件名作为参数，多个插件用空格分隔的字符串，也支持使用数组的方式。

以下为此参数的配置示例：

tinymce.init({
    selector: '#textarea',
    plugins : 'advlist autolink link image lists preview', //字符串方式
    //plugins : ['advlist','autolink','link'], //数组方式
});

查询全部可用插件的列表，可参考tinymce主程序下的plugins文件夹，其内部包含当前所有可用的插件，文件夹是以插件名命名。而插件的使用说明及配置，可在本文档导航的“插件使用”以及“*更多插件”栏目中查看。

3.工具栏配置

在未指定参数的情况下，默认提供的工具栏及菜单如下：

默认工具栏控件

此处默认的意思，是指未加载任何插件，仅由核心提供的工具栏控件。

TinyMCE默认的工具栏按钮列表：

lineheight（行高 5.5新增）
newdocument（新文档）
bold（加粗）
italic（斜体）
underline（下划线）
strikethrough（删除线）
alignleft（左对齐）
aligncenter（居中对齐）
alignright（右对齐）
alignjustify（两端对齐）
styleselect（格式设置）
formatselect（段落格式）
fontselect（字体选择）
fontsizeselect（字号选择）
cut（剪切）
copy（复制）
paste（粘贴）
bullist（项目列表UL）
numlist（编号列表OL）
outdent（减少缩进）
indent（增加缩进）
blockquote（引用）
undo（撤销）
redo（重做/重复）
removeformat（清除格式）
subscript（下角标）
superscript（上角标）

使用toolbar来配置工具栏上可用的按钮，多个控件使用空格分隔，使用“|”来创建分组。

例1：配置工具栏

tinymce.init({
    selector: 'textarea',
    toolbar: 'undo redo | styleselect | bold italic | link image',
});

如要隐藏工具栏，则将其设为false即可。

例2：完全隐藏工具栏

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

也可使用数组来配置多行工具栏。

例3：toolbar的参数为数组

tinymce.init({
    selector: 'textarea',
    toolbar: [
        'undo | bold italic ',
        'alignleft styleselect alignright',
    ],
});

菜单栏配置

与菜单相关的配置选项有两个：menu和menubar。

menu：影响菜单上放置的项目（其还提供创建自定义标题菜单的方法）。

menubar：影响菜单下拉列表中显示的项目。

默认menubar控件：

此处默认的意思，是指未加载任何插件，仅由核心提供的控件。

lineheight（行高 5.5新增）
newdocument（新文档））
undo（撤销））
redo（重做/重复）
visualaid（网格线）
cut（剪切）
copy（复制））
paste（粘贴））
selectall（全选）
bold（加粗））
italic（斜体））
underline（下划线））
strikethrough（删除线））
subscript（下角标））
superscript（上角标））
removeformat（清除格式））
formats（格式）

例1：下方代码将创建只含有文件和编辑的菜单栏。

注意：每个菜单栏（menubar）会包含默认的下拉菜单（menu）。例如：编辑会加载默认的撤销、重做、剪切、复制、粘贴和全选

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

menubar也可以传入自定义菜单项，通过在menu内配置title值可以创建自定义菜单的名称，items可配置下拉列表的项目，用空格分隔。

例2：以下会创建一个名为【我的菜单】的菜单项，其下拉列表中仅包含复制和粘贴

tinymce.init({
    selector: 'textarea',
    toolbar: false,
    menubar: 'my1',
    menu: {
        my1: {title: '我的菜单', items: 'copy paste formats' }
    },
});

而让菜单栏消失也很简单，直接menubar: false

更复杂的玩法将在配置参考部分介绍。

最后再提几个配置选项

原英文文档在这里列出了几个常用配置参数，这里也简单罗列一下。

固定宽高（单位：像素）

width: 600,
height: 300,

设置编辑器中可编辑区域内的样式

content_css: 'css/content.css',

以上配置的更多说明请参考这里。

中文文档