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
});