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

創(chuàng)新互聯(lián)建站成立與2013年，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元中陽(yáng)做網(wǎng)站,已為上家服務(wù),為中陽(yáng)各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:18982081108

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

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

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

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

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

• WordPress文本編輯器
• 覆蓋Quicktags設(shè)置
• 將WordPress編輯器包含在首頁(yè)
• 使用AddQuicktag插件增強(qiáng)WordPress文本編輯器

WordPress文本編輯器

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

然而，文本編輯器不僅僅是一個(gè)表單元素。編輯器工具欄提供了一組按鈕（稱為快速標(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提供了一種簡(jiǎn)單的方法來(lái)添加自定義按鈕并將代碼和內(nèi)容注入編輯器文本區(qū)域。該QTags.addButton方法增加一個(gè)按鈕，工具欄和定義如下：

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

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

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

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

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

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


admin_print_footer_scripts是一個(gè)動(dòng)作鉤子，用于在管理頁(yè)面的頁(yè)腳中打印腳本?；卣{(diào)函數(shù)檢查quicktags腳本是否在使用中，然后打印JS代碼。此腳本向管理面板中的Quicktags的任何實(shí)例添加了另外三個(gè)按鈕，如下圖所示。
圖像顯示了我們新的自定義按鈕
向編輯器工具欄添加按鈕相對(duì)簡(jiǎn)單，但我們可以使用Quicktags API做更多事情。例如，我們可以向QTags.addButton方法傳遞一個(gè)回調(diào)函數(shù)，當(dāng)用戶點(diǎn)擊相應(yīng)的按鈕時(shí)運(yùn)行。考慮以下代碼：
function custom_quicktags() {
if ( wp_script_is( 'quicktags' ) ) {
?>


css_callback是一個(gè)自定義 JS 函數(shù)，當(dāng)用戶點(diǎn)擊自定義按鈕時(shí)運(yùn)行。在我們的示例中，該函數(shù)會(huì)提示輸入框以允許用戶為div元素設(shè)置類名。QTags.insertContent方法將打印指定的字符串到編輯器中textarea的。
 我們示例的回調(diào)函數(shù)會(huì)提示一個(gè)輸入框，允許用戶設(shè)置類名。
到目前為止，由于admin_print_footer_scripts操作，我們一直在管理頁(yè)面中向WordPress編輯器添加快速標(biāo)簽。如果您在站點(diǎn)前端有任何編輯器實(shí)例，則應(yīng)將回調(diào)函數(shù)掛鉤到wp_print_footer_scripts操作。
無(wú)論如何，在生產(chǎn)中，您應(yīng)該考慮將JavaScript文件排入WordPress注冊(cè)的腳本中，如如何將您的資產(chǎn)排入WordPress中所述。GenerateWP的Quicktags Generator是構(gòu)建自定義快速標(biāo)簽的一個(gè)有用工具。
覆蓋Quicktags設(shè)置
Quicktags API提供了一種向工具欄添加新按鈕的方法。由于quicktags_settings過(guò)濾器，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ù)有兩個(gè)參數(shù)：$qtInit是一個(gè)設(shè)置數(shù)組，$editor_id是編輯器的唯一 ID。在我們的示例中，$editor_id默認(rèn)為“content” ——編輯文章頁(yè)面中的編輯器文本區(qū)域的ID。
請(qǐng)注意，quicktag列表中的標(biāo)簽名稱由逗號(hà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”元素分配了一個(gè)逗號(hào)作為值?？兆址粫?huì)按預(yù)期工作，并且不會(huì)覆蓋默認(rèn)設(shè)置。
將WordPress編輯器包含在首頁(yè)
wp_editor函數(shù)從3.3版開(kāi)始提供，它提供了一種簡(jiǎn)單的方法來(lái)將WordPress編輯器包含在站點(diǎn)的任何位置。
該函數(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屬性（只能包含小寫(xiě)字母和下劃線）；
$settings ( array ) （可選）參數(shù)數(shù)組。
參數(shù)數(shù)組允許為兩個(gè)編輯器設(shè)置許多配置參數(shù)。特定參數(shù)可以將設(shè)置直接傳遞給Quicktags（請(qǐng)參閱Codex中的完整參數(shù)列表）。
例如，您可能希望在頁(yè)面模板中包含編輯器?？紤]以下示例：
$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 );

這幾行代碼將一個(gè)id為“myeditor”的空編輯器和指定的按鈕打印到文本編輯器的工具欄中。
該wpautop參數(shù)設(shè)置為false，這樣的
元素將被用來(lái)包裹段落到編輯器。
該media_buttons參數(shù)設(shè)置為false，所以用戶無(wú)法上傳媒體文件。
所述quicktags陣列確定按鈕上的文本編輯器工具欄顯示。
對(duì)于WordPress文本編輯器，wp_editor()函數(shù)和quicktags_settings過(guò)濾器之間的主要區(qū)別在于該函數(shù)適用于編輯器的特定實(shí)例。您可以使用它在站點(diǎn)的任何位置包含新的編輯器（如頁(yè)面模板），而quicktags_settings過(guò)濾器過(guò)濾所有現(xiàn)有實(shí)例并且不能用于生成新的編輯器實(shí)例。
以上示例的完整代碼可在Gist上找到。
使用AddQuicktag插件增強(qiáng)WordPress文本編輯器
如果您需要一個(gè)工具來(lái)快速向WordPress文本編輯器添加按鈕，AddQuicktag就是適合您的插件。
 AddQuicktag允許用戶向WordPress文本編輯器添加自定義按鈕。
該插件提供了一個(gè)可從“設(shè)置”菜單訪問(wèn)的選項(xiàng)頁(yè)面。在此頁(yè)面上，管理員用戶可以添加自定義按鈕和刪除現(xiàn)有按鈕。
AddQuicktag允許專門為文章、頁(yè)面和其他啟用編輯器的文本區(qū)域（評(píng)論、文本小部件等）配置編輯器。
該插件還將Quicktags添加到可視化編輯器中。只需選中Visual?選項(xiàng)，可視化編輯器將顯示帶有自定義按鈕的Quicktags下拉菜單。
AddQuicktag選項(xiàng)頁(yè)面的第二部分專用于內(nèi)置快速標(biāo)簽配置。在本節(jié)中，可以刪除特定文本區(qū)域中的按鈕。
 三個(gè)按鈕已從編輯頁(yè)面文本編輯器中刪除
最后一部分為編輯器工具欄提供了附加功能。第一行選項(xiàng)增強(qiáng)了默認(rèn)代碼按鈕，提供了一個(gè)選擇菜單，根據(jù)所選語(yǔ)言為代碼標(biāo)簽設(shè)置CSS類。
第二行提供了兩個(gè)用于編碼和解碼特殊字符 ( htmlentities ) 的按鈕。
高級(jí)AddQuicktag功能
小結(jié)
如果您是開(kāi)發(fā)人員，您可能會(huì)發(fā)現(xiàn)向WordPress編輯器添加主題或特定于插件的功能會(huì)很有幫助。Quicktags API和許多過(guò)濾器和功能提供了有價(jià)值的工具來(lái)為我們的產(chǎn)品增加價(jià)值。如果您不是開(kāi)發(fā)人員，您也可以配置WordPress編輯器，這要?dú)w功于WordPress插件目錄中的幾個(gè)免費(fèi)插件，例如本文中介紹的AddQuicktag插件。
                    

                    文章題目：深入了解WordPress文本編輯器                    

                    網(wǎng)頁(yè)鏈接：http://uogjgqi.cn/article/ccodsoc.html