简介与入门 \ 基本设置

此页更新时间:2019-11-06 09:26

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

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

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

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

  1. 选择器配置
  2. 插件配置
  3. 工具栏配置
  4. 菜单栏配置

将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默认的工具栏按钮列表:

  • 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控件:

此处默认的意思,是指未加载任何插件,仅由核心提供的控件。
  • 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' }
    },
});

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

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

最后再提几个配置选项

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

固定宽高(单位:像素)

width: 600,
height: 300,

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

content_css: 'css/content.css',

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

更多配置

请查阅“配置参考”

下一节是“经典编辑模式”