Използване на TinyMCE редактор в WordPress [Guide]

Въпреки че те не знаят името му, всеки, който използва WordPress е запознат с TinyMCE редактор. Това е редакторът, който използвате, когато създавате или редактирате съдържанието си - този с бутоните за създаване на удебелен текст, заглавия, подравняване на текст и т.н. Ето какво ще разгледаме в този пост и ще ви покажа как можете да добавите функционалност и как можете да го използвате в плъгините си.

Редакторът е изграден на платформа-независима Javascript система, наречена TinyMCE, която се използва в редица проекти в мрежата. Той има чудесен API, който WordPress ви позволява да се включите, за да създадете свои собствени бутони и да го добавите към други места в WordPress.

Добавяне на налични бутони

WordPress използва някои опции, налични в TinyMCE, за да деактивира определени бутони - като горен индекс, индекс и хоризонтални правила - за да изчисти интерфейса. Те могат да бъдат добавени обратно без прекалено много шум.

Първата стъпка е да създадете плъгин. Обърнете внимание на кодовете на WordPress за това как да направите това. Накратко, можете да създадете папка с име „my-mce-plugin“ в папката wp-content / plugins. Създайте файл със същото име с разширение PHP: ми-MCE-plugin.php.

В този файл поставете следното:

  
След като сте готови, трябва да можете да изберете този плъгин в WordPress и да го активирате. Целият код от сега нататък може да бъде поставен в този файл.
 
Така че, обратно към активиране на някои вградени, но скрити бутони. Ето кода, който ни позволява да активираме 3-те бутона, които споменах:
 
 add_filter ('mce_buttons_2', 'my_tinymce_buttons'); функция my_tinymce_buttons ($ buttons) $ buttons [] = 'надпис'; $ buttons [] = 'индекс'; $ buttons [] = hr; връщане на бутоните $;  
 
 
 
За да разберете кои бутони могат да се добавят и какви са те, вижте списъка, който се намира в документацията на TinyMCE за контролите.
 
Създаване на собствени бутони
 
Какво ще кажете за създаването на собствени бутони от нулата? Много уебсайтове използват Prism за осветяване на код, който използва много семантичен подход за маркиране на кодовите сегменти. Трябва да включите кода си вътре  и 
 тагове, нещо подобно:
 
$ variable = 'value'
 
Нека създадем бутон, който ще направи това за нас!
 
Това е процес от три стъпки. Трябва да добавите бутон, да заредите javascript файл и да напишете съдържанието на Javascript файла. Да започваме!
 
Добавянето на бутона и зареждането на Javascript файла е доста лесно, ето кода, който използвах, за да го направя:
 
 add_filter ('mce_buttons', 'pre_code_add_button'); функция pre_code_add_button ($ buttons) $ buttons [] = 'pre_code_button'; връщане на бутоните $;  add_filter ('mce_external_plugins', 'pre_code_add_javascript'); функция pre_code_add_javascript ($ plugin_array) $ plugin_array ['pre_code_button'] = get_template_directory_uri (). "/Tinymce-plugin.js"; return $ plugin_array;  
 
Когато виждам уроци за това често виждам 2 проблема.
 
Те пренебрегват това името на бутона, добавено в функцията pre_code_add_button (), трябва да бъде същото като ключа за променливата $ plugin_array в функцията pre_code_add_javascript (). Ние също ще трябва използвайте същия низ в нашия Javascript по-късно.
 
Някои уроци също използвайте допълнителна кука за admin_head, за да приключите всичко. Макар това да работи, то не е необходимо и тъй като Кодексът не го използва, вероятно би трябвало да се избягва.
 
Следващата стъпка е да напишем Javascript, за да реализираме нашата функционалност. Ето какво използвах, за да получа 
 и  излизат всички едновременно.
 
 (function () tinymce.PluginManager.add ('pre_code_button', функция (редактор, url) editor.addButton ('pre_code_button', text: 'Prism', икона: false, onclick: function () var selected = tinyMCE.activeEditor.selection.getContent (); var content = '
„+ избрано +“
"; editor.insertContent (съдържание + "\ t ); ); ) (); 
 
Повечето от това е продиктувано от начина, по който трябва да бъде кодиран TinyMCE плъгин, можете да намерите информация за това в документацията на TinyMCE. Засега всичко, което трябва да знаете, е това името на бутона ви (Pre_code_button) трябва да се използва в ред 2 и 3. Стойността на "текст" в ред 4 ще се покаже, ако не използвате икона (ще разгледаме добавянето на икони в момента).
 
Методът onclick диктува какво прави този бутон, когато се кликне. Искам да го използвам, за да обвивам избрания текст в структурата на HTML, обсъдена по-горе.
 
Избраният текст може да бъде използван tinyMCE.activeEditor.selection.getContent (). След това обгръщам елементите около него и го вмъквам, заменяйки маркираното съдържание с новия елемент. Също така добавих нова линия, така че лесно да започна да пиша след елемента код.
 
Ако искате да използвате икона, предлагам да изберете един от набора Dashicons, който се доставя с WordPress. Справочникът на разработчиците е чудесен инструмент за намиране на икони и техните CSS / HTML / Glyph. Намерете кодовия символ и отбележете под него unicode: f475.
 
Ще трябва да прикачим стилова таблица към нашия плъгин и след това да добавим прост стил за показване на нашата икона. Първо, добавете стила си в WordPress:
 
 add_action ('admin_enqueue_scripts', 'pre_code_styles'); функция pre_code_styles () wp_enqueue_style ('pre_code_button', plugins_url ('/style.css', __FILE__));  
 
Върнете се към Javascript и до иконата в функцията addButton, заменете “фалшив” с клас, който бихте искали вашият бутон да има - аз използвах pre_code_button.
 
Сега създайте файла style.css в директорията на плъгините и добавете следния CSS:
 
 i.mce-i-pre_code_button: преди font-family: dashicons; съдържание: "f475";  
 
 
 
Обърнете внимание, че бутонът ще получи mce-i- [класът ви тук] клас, който можете да използвате за насочване и добавяне на стилове. Посочете шрифта като dashicons и съдържанието, използвайки unicode стойността от по-рано.
 
Използване на TinyMCE На друго място
 
Приставките често създават текстови области за въвеждане на по-дълъг текст, няма ли да е чудесно, ако можем да използваме и TinyMCE? Разбира се, че можем и това е доста лесно. Функцията wp_editor () ни позволява да изведем някъде в администратора, ето как изглежда:
 
wp_editor ($ initial_content, $ element_id, $ settings);
 
Първият параметър задава първоначалното съдържание за кутията. Това може да се използва например за зареждане на опция от базата данни. Вторият параметър задава идентификатора на HTML елемента. Третият параметър е набор от настройки. За да прочетете за точните настройки, които можете да използвате, погледнете документацията на wp редактора.
 
Най-важната настройка е textarea_name. Това запълва атрибута name на елемента textarea, което ви позволява лесно да запазите данните. Ето как изглежда редакторът ми, когато се използва в страницата с опции:
 
$ settings = array ('textarea_name' => 'buyer_bio');
 
wp_editor (get_option ('buyer_bio'), 'buyer_bio', $ settings);
 
Това е еквивалентно на писане на следния код, който би довел до просто текстово поле:
 
<?php get_option( 'buyer_bio' ) ?>
 
заключение
 
Редакторът TinyMCE е лесен за ползване начин, позволяващ на потребителите по-голяма гъвкавост при въвеждане на съдържание. Тя позволява на тези, които не искат да форматират съдържанието им, просто да го напишат и да го направят, както и тези, които искат да се занимават с него, за да прекарват толкова време, колкото им трябва,.
 
Създаването на нови бутони и функционалност може да се извърши по много модулен начин, а ние само току-що почесвахме повърхността на възможностите. Ако знаете за особено добър TinyMCE плъгин или случай на използване, който ви е помогнал много, споделете с нас в коментарите по-долу!