TinyMCE基础配置

• 选择器配置
• 插件配置
• 工具栏配置
• 菜单配置
• 皮肤配置
• 编辑区宽高配置
• 编辑区样式配置
• 隐藏状态栏

选择器配置

选择器就是CSS选择器，它告诉TinyMCE哪个元素是可编辑的。

示例：

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

插件配置

插件扩展了TinyMCE的功能，插件通过plugins选项配置，多个插件之间使用空格分隔。

示例演示了advlist、link、image和lists插件的配置。

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins : 'advlist link image lists'
});

工具栏配置

TinyMCE提供了默认的工具栏配置，可以通过toolbar选项覆盖。类似于plugins插件，多个工具栏之间使用空格分隔。|符号用于工具栏分组。

示例演示了工具栏的配置。

tinymce.init({
  selector: 'textarea',  // change this value according to the HTML
  toolbar: 'undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | outdent indent',
});

菜单栏配置

菜单配置有两个选项menubar和menu，menubar定义的是顶级菜单，这类菜单直接显示在界面上。menu定义的子级菜单，这类菜单只有点击顶级菜单后才会出现。

menubar的配置：

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  menubar: 'file edit view'
});

menu的配置：

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  menu: {
    edit: {title: 'Edit', items: 'undo, redo, selectall'}
  }
});

默认菜单：

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  menu: {
    file: { title: 'File', items: 'newdocument restoredraft | preview | print ' },
    edit: { title: 'Edit', items: 'undo redo | cut copy paste | selectall | searchreplace' },
    view: { title: 'View', items: 'code | visualaid visualchars visualblocks | spellchecker | preview fullscreen' },
    insert: { title: 'Insert', items: 'image link media template codesample inserttable | charmap emoticons hr | pagebreak nonbreaking anchor toc | insertdatetime' },
    format: { title: 'Format', items: 'bold italic underline strikethrough superscript subscript codeformat | formats blockformats fontformats fontsizes align | forecolor backcolor | removeformat' },
    tools: { title: 'Tools', items: 'spellchecker spellcheckerlanguage | code wordcount' },
    table: { title: 'Table', items: 'inserttable | cell row column | tableprops deletetable' },
    help: { title: 'Help', items: 'help' }
  }
});

皮肤配置

皮肤的配置使用skin选项，下面演示设置一个黑色的皮肤：

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  skin: 'oxide-dark',
  content_css: 'dark'  // > **Note**: This feature is only available for TinyMCE 5.1 and later.
});　　

编辑区的宽高配置

设置编辑区的宽度和高度的选项有：

• width 编辑区的宽度
• height 编辑区的高度
• max-width 最大宽度
• min-width 最小宽度
• max-height 最大高度
• min-height 最小高度

编辑区的样式配置

编辑区的样式使用content_css配置。

示例：

// File: http://domain.mine/mysite/index.html

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  content_css : '/mycontent.css'  // resolved to http://domain.mine/mycontent.css
});

隐藏状态栏

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