建站
咨詢
售后
建站咨詢
新聞中心
當我們在wordpress中創(chuàng)建或編輯文章時，如果把古騰堡編輯器禁用，我們有兩個內(nèi)容編輯器可供選擇：TinyMCE可視化編輯器和WordPress文本編輯器。后者由一個由按鈕增強的文本區(qū)域元素組成，提供了一種將HTML代碼注入文章內(nèi)容的快速方法。
創(chuàng)新互聯(lián)建站成立與2013年，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項目成都網(wǎng)站設(shè)計、成都做網(wǎng)站網(wǎng)站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元中陽做網(wǎng)站,已為上家服務(wù),為中陽各地企業(yè)和個人服務(wù),聯(lián)系電話:18982081108
用戶可以通過單擊右上角的標簽輕松地從視覺模式切換到文本模式。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文本編輯器
如果您習(xí)慣于在文章中添加大量代碼，或者您想預(yù)覽內(nèi)容的確切HTML結(jié)構(gòu)，您可能更喜歡準系統(tǒng)文本編輯器，而不是高級可視化編輯器的易用性。
然而，文本編輯器不僅僅是一個表單元素。編輯器工具欄提供了一組按鈕（稱為快速標簽），允許用戶快速將大量標簽注入 HTML 帖子結(jié)構(gòu)。
默認情況下，WordPress提供以下快速標簽：
- a
- strong
- code
- del
- em
- ol
- ul
- li
- img
- blockquote
- ins
- fullscreen
- lookup
- close
圖像顯示了WordPress文本編輯器的默認按鈕
由于Quicktags API，可以覆蓋默認設(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 ) (必需) 是要包含的開始標記或單擊按鈕時要運行的自定義回調(diào)函數(shù)；
- arg2 ( string ) (可選) 是結(jié)束標簽；
- access_key ( string ) (可選) 是按鈕的快捷鍵；
- title ( string ) (可選) 是HTML標題；
- 優(yōu)先級（int）（可選）是一個數(shù)字，表示按鈕在工具欄中的位置；
- 實例（字符串）（可選）將按鈕限制為特定的Quicktags實例。
現(xiàn)在讓我們假設(shè)我們想要添加像Prism這樣的語法高亮器所需的標簽，并且我們想要為編輯器工具欄提供打印以下標記的按鈕：
要完成此任務(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ù)，當用戶點擊相應(yīng)的按鈕時運行?？紤]以下代碼：
function custom_quicktags() {
if ( wp_script_is( 'quicktags' ) ) {
?>
css_callback是一個自定義 JS 函數(shù)，當用戶點擊自定義按鈕時運行。在我們的示例中，該函數(shù)會提示輸入框以允許用戶為div元素設(shè)置類名。QTags.insertContent方法將打印指定的字符串到編輯器中textarea的。
我們示例的回調(diào)函數(shù)會提示一個輸入框，允許用戶設(shè)置類名。
到目前為止，由于admin_print_footer_scripts操作，我們一直在管理頁面中向WordPress編輯器添加快速標簽。如果您在站點前端有任何編輯器實例，則應(yīng)將回調(diào)函數(shù)掛鉤到wp_print_footer_scripts操作。
無論如何，在生產(chǎn)中，您應(yīng)該考慮將JavaScript文件排入WordPress注冊的腳本中，如如何將您的資產(chǎn)排入WordPress中所述。GenerateWP的Quicktags Generator是構(gòu)建自定義快速標簽的一個有用工具。
覆蓋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默認為“content” ——編輯文章頁面中的編輯器文本區(qū)域的ID。
請注意，quicktag列表中的標簽名稱由逗號分隔，后跟空格。
此函數(shù)將覆蓋默認設(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”元素分配了一個逗號作為值?？兆址粫搭A(yù)期工作，并且不會覆蓋默認設(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)置快速標簽配置。在本節(jié)中，可以刪除特定文本區(qū)域中的按鈕。
三個按鈕已從編輯頁面文本編輯器中刪除
最后一部分為編輯器工具欄提供了附加功能。第一行選項增強了默認代碼按鈕，提供了一個選擇菜單，根據(jù)所選語言為代碼標簽設(shè)置CSS類。
第二行提供了兩個用于編碼和解碼特殊字符 ( htmlentities ) 的按鈕。
高級AddQuicktag功能
小結(jié)
如果您是開發(fā)人員，您可能會發(fā)現(xiàn)向WordPress編輯器添加主題或特定于插件的功能會很有幫助。Quicktags API和許多過濾器和功能提供了有價值的工具來為我們的產(chǎn)品增加價值。如果您不是開發(fā)人員，您也可以配置WordPress編輯器，這要歸功于WordPress插件目錄中的幾個免費插件，例如本文中介紹的AddQuicktag插件。
本文題目：深入了解WordPress文本編輯器
本文網(wǎng)址：http://www.5511xx.com/article/ccodsoc.html
