基本配置

在對 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 的編輯器的基本配置示例的詳解

總結

以上是生活随笔為你收集整理的富文本框让最大四百像素_TinyMCE 富文本编辑器 ━━ 基本配置的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。