當(dāng)我們在wordpress中創(chuàng)建或編輯文章時，如果把古騰堡編輯器禁用，我們有兩個內(nèi)容編輯器可供選擇：TinyMCE可視化編輯器和WordPress文本編輯器。后者由一個由按鈕增強的文本區(qū)域元素組成，提供了一種將HTML代碼注入文章內(nèi)容的快速方法。

用戶可以通過單擊右上角的標(biāo)簽輕松地從視覺模式切換到文本模式。WordPress將保留文章內(nèi)容，但TinyMCE會將特殊字符轉(zhuǎn)換為相應(yīng)的HTML實體。出于這個原因，您可能更喜歡

推薦閱讀：深入了解WordPress新的古騰堡編輯器（優(yōu)點和缺點）

在文本編輯器正好說明了文章內(nèi)容的HTML結(jié)構(gòu)，它賦予了用戶輸入的完全控制權(quán)，所以這個文章是關(guān)于WordPress的文本編輯器。首先，我們將從開發(fā)人員的角度深入探討該主題：我們將查看Quicktags JS API、quicktags_settings過濾器和wp_editor()函數(shù)。

這篇文章的最后一部分專門針對非開發(fā)人員。我將向您展示一個插件，允許用戶從WordPress管理面板快速配置文本編輯器。

比較可視化和文本編輯器。

• • WordPress文本編輯器
  • 覆蓋Quicktags設(shè)置
  • 將WordPress編輯器包含在首頁
  • 使用AddQuicktag插件增強WordPress文本編輯器
  • WordPress文本編輯器替代方案和工具

WordPress文本編輯器

如果您習(xí)慣于在文章中添加大量代碼，或者您想預(yù)覽內(nèi)容的確切HTML結(jié)構(gòu)，您可能更喜歡準(zhǔn)系統(tǒng)文本編輯器，而不是高級可視化編輯器的易用性。

然而，文本編輯器不僅僅是一個表單元素。編輯器工具欄提供了一組按鈕（稱為快速標(biāo)簽），允許用戶快速將大量標(biāo)簽注入 HTML 帖子結(jié)構(gòu)。

默認(rèn)情況下，WordPress提供以下快速標(biāo)簽：

• a
• strong
• code
• del
• em
• ol
• ul
• li
• img
• blockquote
• ins
• fullscreen
• lookup
• close

圖像顯示了WordPress文本編輯器的默認(rèn)按鈕

由于Quicktags API，可以覆蓋默認(rèn)設(shè)置。javaScript API提供了一種簡單的方法來添加自定義按鈕并將代碼和內(nèi)容注入編輯器文本區(qū)域。該QTags.addButton方法增加一個按鈕，工具欄和定義如下：

QTags.addButton( 
id, 
display, 
arg1, 
arg2, 
access_key, 
title, 
priority, 
instance );

此方法保留以下參數(shù)：

• id?(?string ) (required) 是按鈕的HTML id；
• display?(?string ) (required) 是HTML值；
• arg1?(?string?) (必需) 是要包含的開始標(biāo)記或單擊按鈕時要運行的自定義回調(diào)函數(shù)；
• arg2?(?string?) (可選) 是結(jié)束標(biāo)簽；
• access_key?(?string?) (可選) 是按鈕的快捷鍵；
• title?(?string ) (可選) 是HTML標(biāo)題；
• 優(yōu)先級（int）（可選）是一個數(shù)字，表示按鈕在工具欄中的位置；
• 實例（字符串）（可選）將按鈕限制為特定的Quicktags實例。

現(xiàn)在讓我們假設(shè)我們想要添加像Prism這樣的語法高亮器所需的標(biāo)簽，并且我們想要為編輯器工具欄提供打印以下標(biāo)記的按鈕：

要完成此任務(wù)，我們需要將以下代碼添加到插件的主文件中：

function my_quicktags() {
if ( wp_script_is( 'quicktags' ) ) {
?>


admin_print_footer_scripts是一個動作鉤子，用于在管理頁面的頁腳中打印腳本?；卣{(diào)函數(shù)檢查quicktags腳本是否在使用中，然后打印JS代碼。此腳本向管理面板中的Quicktags的任何實例添加了另外三個按鈕，如下圖所示。

圖像顯示了我們新的自定義按鈕
向編輯器工具欄添加按鈕相對簡單，但我們可以使用Quicktags API做更多事情。例如，我們可以向QTags.addButton方法傳遞一個回調(diào)函數(shù)，當(dāng)用戶點擊相應(yīng)的按鈕時運行?？紤]以下代碼：
function custom_quicktags() {
if ( wp_script_is( 'quicktags' ) ) {
?>


css_callback是一個自定義 JS 函數(shù)，當(dāng)用戶點擊自定義按鈕時運行。在我們的示例中，該函數(shù)會提示輸入框以允許用戶為div元素設(shè)置類名。QTags.insertContent方法將打印指定的字符串到編輯器中textarea的。
 我們示例的回調(diào)函數(shù)會提示一個輸入框，允許用戶設(shè)置類名。
到目前為止，由于admin_print_footer_scripts操作，我們一直在管理頁面中向WordPress編輯器添加快速標(biāo)簽。如果您在站點前端有任何編輯器實例，則應(yīng)將回調(diào)函數(shù)掛鉤到wp_print_footer_scripts操作。
無論如何，在生產(chǎn)中，您應(yīng)該考慮將JavaScript文件排入WordPress注冊的腳本中，如如何將您的資產(chǎn)排入WordPress中所述。GenerateWP的Quicktags Generator是構(gòu)建自定義快速標(biāo)簽的一個有用工具。
覆蓋Quicktags設(shè)置
Quicktags API提供了一種向工具欄添加新按鈕的方法。由于quicktags_settings過濾器，WordPress也允許我們刪除按鈕。
function my_quicktags( $qtInit, $editor_id = 'content' ) {
$qtInit['buttons'] = 'strong,em,link,block,del,ins,img,ul,ol,li,code,more,close';
return $qtInit;
}
add_filter( 'quicktags_settings', 'my_quicktags', 10, 2 );

回調(diào)函數(shù)有兩個參數(shù)：$qtInit是一個設(shè)置數(shù)組，$editor_id是編輯器的唯一 ID。在我們的示例中，$editor_id默認(rèn)為“content” ——編輯文章頁面中的編輯器文本區(qū)域的ID。
請注意，quicktag列表中的標(biāo)簽名稱由逗號分隔，后跟空格。
此函數(shù)將覆蓋默認(rèn)設(shè)置，也可用于從工具欄中刪除所有按鈕：
function my_quicktags( $qtInit, $editor_id = 'content' ) {
$qtInit['buttons'] = ',';
return $qtInit;
}
add_filter( 'quicktags_settings', 'my_quicktags', 10, 2 );
我們已經(jīng)為$qtInit數(shù)組的“buttons”元素分配了一個逗號作為值。空字符串不會按預(yù)期工作，并且不會覆蓋默認(rèn)設(shè)置。
將WordPress編輯器包含在首頁
wp_editor函數(shù)從3.3版開始提供，它提供了一種簡單的方法來將WordPress編輯器包含在站點的任何位置。
該函數(shù)在wp-includes/general-template.php文件中定義如下：
wp_editor( $content, $editor_id, $settings = array() );

$content?(?string?) (required) 設(shè)置編輯器的初始內(nèi)容；
$editor_id?(?string?) （必填）為textarea和TinyMCE編輯器設(shè)置id屬性（只能包含小寫字母和下劃線）；
$settings?(?array?) （可選）參數(shù)數(shù)組。

參數(shù)數(shù)組允許為兩個編輯器設(shè)置許多配置參數(shù)。特定參數(shù)可以將設(shè)置直接傳遞給Quicktags（請參閱Codex中的完整參數(shù)列表）。
例如，您可能希望在頁面模板中包含編輯器?？紤]以下示例：
$content = '';
$editor_id = 'mycustomeditor';
$settings = array( 
'wpautop' => false, 
'media_buttons' => false, 
'quicktags' => array(
'buttons' => 'strong,em,del,ul,ol,li,block,close'
),
);
wp_editor( $content, $editor_id, $settings );

這幾行代碼將一個id為“myeditor”的空編輯器和指定的按鈕打印到文本編輯器的工具欄中。

該wpautop參數(shù)設(shè)置為false，這樣的
元素將被用來包裹段落到編輯器。
該media_buttons參數(shù)設(shè)置為false，所以用戶無法上傳媒體文件。
所述quicktags陣列確定按鈕上的文本編輯器工具欄顯示。

對于WordPress文本編輯器，wp_editor()函數(shù)和quicktags_settings過濾器之間的主要區(qū)別在于該函數(shù)適用于編輯器的特定實例。您可以使用它在站點的任何位置包含新的編輯器（如頁面模板），而quicktags_settings過濾器過濾所有現(xiàn)有實例并且不能用于生成新的編輯器實例。
以上示例的完整代碼可在Gist上找到。
使用AddQuicktag插件增強WordPress文本編輯器
如果您需要一個工具來快速向WordPress文本編輯器添加按鈕，AddQuicktag就是適合您的插件。
 AddQuicktag允許用戶向WordPress文本編輯器添加自定義按鈕。
該插件提供了一個可從“設(shè)置”菜單訪問的選項頁面。在此頁面上，管理員用戶可以添加自定義按鈕和刪除現(xiàn)有按鈕。
AddQuicktag允許專門為文章、頁面和其他啟用編輯器的文本區(qū)域（評論、文本小部件等）配置編輯器。
該插件還將Quicktags添加到可視化編輯器中。只需選中Visual?選項，可視化編輯器將顯示帶有自定義按鈕的Quicktags下拉菜單。
AddQuicktag選項頁面的第二部分專用于內(nèi)置快速標(biāo)簽配置。在本節(jié)中，可以刪除特定文本區(qū)域中的按鈕。
 三個按鈕已從編輯頁面文本編輯器中刪除
最后一部分為編輯器工具欄提供了附加功能。第一行選項增強了默認(rèn)代碼按鈕，提供了一個選擇菜單，根據(jù)所選語言為代碼標(biāo)簽設(shè)置CSS類。
第二行提供了兩個用于編碼和解碼特殊字符 (?htmlentities?) 的按鈕。

高級AddQuicktag功能
WordPress文本編輯器替代方案和工具
WordPress文本編輯器可能難以理解和使用，而Gutenberg編輯器在自定義選項方面似乎有限。
如果這些編輯器選擇都沒有為您提供您所追求的外觀，那么研究其他替代方案可能是個好主意。
這是我們推薦的插件列表，可以幫助您擴展WordPress編輯器的功能。
1.高級編輯器工具（TinyMCE Advanced）


此插件將經(jīng)典段落塊添加到古騰堡編輯器，它將顯示W(wǎng)ordPress用戶熟悉的完整經(jīng)典工具欄。這允許訪問古騰堡中的文本塊和其他新功能，以及所有經(jīng)典文本編輯器元素。
經(jīng)典工具欄上的菜單可以根據(jù)您的需要重新排列。只需轉(zhuǎn)到插件設(shè)置并通過拖放按鈕添加或刪除功能。
此外，此插件允許輕松調(diào)整表、行和列的大小。但是，請記住，此功能可能會覆蓋特定WordPress網(wǎng)站主題設(shè)置的某些樣式。
高級編輯器工具也與經(jīng)典編輯器插件兼容。因此，也可以在經(jīng)典編輯器上自定義工具欄選項菜單。
2.Ultimate Blocks


Ultimate Blocks是最簡單的插件之一。它附帶20個額外的博客和與內(nèi)容相關(guān)的設(shè)置，您可以將它們添加到Gutenberg編輯器中。
例如，目錄、倒計時、內(nèi)容過濾器和推薦是可用于您的項目的一些獨特元素。這些元素也與大多數(shù)wordpress主題和其他WordPress插件兼容。
古騰堡提供的高級塊也收到了新的自定義選項。Button 塊獲得更多大小、樣式和按鈕圖標(biāo)，而Social Share區(qū)塊將具有LinkedIn、Pinterest和Reddit的圖標(biāo)。
如果您在使用Ultimate Blocks插件方面需要幫助，請隨時訪問支持論壇或他們的Facebook群組。
3. WP Table Builder


WP Table Builder是為您的WordPress網(wǎng)站創(chuàng)建表格的最佳插件之一。它引入了拖放功能和更直觀的界面。有了這些功能，為價格、多重比較和其他列表創(chuàng)建各種表格將變得簡單快捷。
用戶可以通過七種方式添加到表格中——使用Text?、Image?、List 、 Button?、Star Rating?、Custom HTML和Shortcode?。每個元素都有自己的自定義選項，可以進一步改進您的帖子。
單元格管理的常用設(shè)置允許您添加新行/列和合并/拆分單元格。此外，您可以從.CSV和.XML文件導(dǎo)入預(yù)制表格或?qū)С鍪褂貌寮?chuàng)建的表格。
在響應(yīng)能力方面，WP Table Builder可以選擇編輯表格在移動設(shè)備、平板電腦和桌面屏幕上的外觀。此功能不僅可以讓您迎合更多的受眾，還可以讓您的網(wǎng)站適應(yīng)各種不同的目的。
要獲得其他功能，例如表格模板、完整的列/行復(fù)制和邊框顏色，您需要升級。WP Table Builder的高級版起價為39.99美元/年，包括插件更新和開發(fā)團隊的優(yōu)先支持。
如果您想自己找到問題的解決方案，該插件還有一個支持論壇。
4.?Zedity


Zedity是一個插件，可以將多媒體內(nèi)容添加到您的WordPress網(wǎng)站。學(xué)習(xí)編輯器的工作原理不需要很長時間，因為它為首次使用的用戶提供了教程。
拖放功能使編輯變得輕松。因為它是無布局的，所以用戶可以將內(nèi)容框放置在頁面的任何位置。從畫廊到信息圖表，您無需任何代碼即可直觀地調(diào)整這些框。
免費版的Zedity 讓您可以添加來自YouTube和Vimeo的視頻，以及來自SoundCloud和ReverbNation的音頻。除了文本、圖像和顏色框外，還有用于自定義腳本的HTML框，可以輕松調(diào)整大小和旋轉(zhuǎn)。
該插件的高級版還帶有附加功能，如SEO友好標(biāo)簽、無限顏色、網(wǎng)絡(luò)/自定義字體和段落間距/對齊，并且需要39美元/年的費用。
安裝此插件后，您將在經(jīng)典編輯器工具欄和古騰堡經(jīng)典塊的右上角找到Zedity按鈕。
5. Content Manager for WordPress


Content Manager for WordPress簡化了復(fù)雜頁面和文章的創(chuàng)建。它允許您從WordPress網(wǎng)站的前端編輯和排列頁面布局。
憑借其拖放系統(tǒng)和網(wǎng)格管理器，您可以立即擁有設(shè)計精美的頁面。布局也將是響應(yīng)式的，因此訪問者可以在他們的移動設(shè)備上享受您的網(wǎng)站。
Content Manager for WordPress附帶50多個即用型元素短代碼。每個簡碼都有自己的用戶友好界面和自定義選項。
因此，在您網(wǎng)站的任何位置添加按鈕、社交圖標(biāo)和畫廊都不會是一件麻煩事。此外，還提供用于翻轉(zhuǎn)框、進度條和滑塊的動畫短代碼。
最重要的是，這個插件帶有博客和投資組合模板。它還可以使用 .PO 和 .MO 文件翻譯成任何語言。
該插件與WordPress很好地集成并使用AJAX。一次性支付39美元/常規(guī)許可證安裝后，您會在WordPress編輯器上找到一個添加短代碼的按鈕。
小結(jié)
如果您是開發(fā)人員，您可能會發(fā)現(xiàn)向WordPress編輯器添加主題或特定于插件的功能會很有幫助。Quicktags API和許多過濾器和功能提供了有價值的工具來為我們的產(chǎn)品增加價值。如果您不是開發(fā)人員，您也可以配置WordPress編輯器，這要歸功于WordPress插件目錄中的幾個免費插件，例如本文中介紹的AddQuicktag插件。