Коришћење ТиниМЦЕ Едитор-а у ВордПресс-у [Водич]

Иако можда не знају његово име, свако ко користи ВордПресс је упознат са ТиниМЦЕ едитор. То је едитор који користите када креирате или уређујете свој садржај - онај са тастерима за креирање подебљаног текста, заглавља, поравнања текста и тако даље. То је оно што ћемо погледати у овом посту, и показат ћу вам како можете додати функционалност и како га можете користити у својим додатцима.

Уредник је изграђен на платформи независном Јавасцрипт систему званом ТиниМЦЕ који се користи у великом броју пројеката на Вебу. Има одличан АПИ који вам ВордПресс омогућава да тапкате да бисте креирали сопствене тастере и да бисте их додали на друге локације у оквиру програма ВордПресс.

Аддинг Аваилабле Буттонс

ВордПресс користи неке опције доступне у ТиниМЦЕ за онемогућавање одређених дугмади - као што су суперсцрипт, субсцрипт и хоризонтална правила - како би очистили интерфејс. Могу се додати без превише напора.

Први корак је креирање додатка. Погледајте ВордПресс кодекс о томе како то урадити. Укратко, можете направити са креирањем мапе под називом 'ми-мце-плугин' у вп-цонтент / плугинс фолдеру. Креирајте датотеку са истим именом, са ПХП екстензијом: ми-мце-плугин.пхп.

Унутар те датотеке залијепите сљедеће:

  
Када завршите, моћи ћете да изаберете овај додатак у ВордПресс-у и активирате га. Сав код од сада се може налепити у овај фајл.
 
Дакле, назад омогућавање неких уграђених, али скривених тастера. Ево кода који нам омогућава да омогућимо 3 дугмета која сам споменуо:
 
 адд_филтер ('мце_буттонс_2', 'ми_тинимце_буттонс'); функција ми_тинимце_буттонс ($ буттонс) $ буттонс [] = 'суперсцрипт'; $ буттонс [] = 'индекс'; $ буттонс [] = хр; ретурн $ буттонс;  
 
 
 
Да бисте знали који тастери се могу додати и како се зову, погледајте листу која се налази у ТиниМЦЕ документацији за контроле.
 
Креирање сопствених дугмади
 
Шта мислите о креирању сопствених дугмета од нуле? Многе веб странице користе Присм за истицање кода које користи врло семантички приступ означавању сегмената кода. Морате омотати свој код унутар  и 
 ознаке, нешто као ово:
 
$ променљива = 'вредност'
 
Направимо дугме које ће то учинити за нас!
 
Ово је процес у три корака. Морат ћете додати гумб, учитати јавасцрипт датотеку и заправо писати садржај Јавасцрипт датотеке. Хајде да почнемо!
 
Додавање дугмета и учитавање Јавасцрипт фајла је прилично једноставно, ево кода који сам користио да бих га извршио:
 
 адд_филтер ('мце_буттонс', 'пре_цоде_адд_буттон'); функција пре_цоде_адд_буттон ($ буттонс) $ буттонс [] = 'пре_цоде_буттон'; ретурн $ буттонс;  адд_филтер ('мце_ектернал_плугинс', 'пре_цоде_адд_јавасцрипт'); функција пре_цоде_адд_јавасцрипт ($ плугин_арраи) $ плугин_арраи ['пре_цоде_буттон'] = гет_темплате_дирецтори_ури (). '/тинимце-плугин.јс'; ретурн $ плугин_арраи;  
 
Када видим туторијале о овоме често видим 2 проблема.
 
Они то занемарују име дугмета додато у функцији пре_цоде_адд_буттон () мора бити исто што и кључ за променљиву $ плугин_арраи у функцији пре_цоде_адд_јавасцрипт (). Такође ћемо морати користите исти стринг у нашем Јавасцрипт-у после.
 
И неке туторијале Користите додатну админ_хеад куку да све обавијете. Иако ће ово функционисати, то није потребно и пошто га Кодекс не користи, вероватно би га требало избећи.
 
Следећи корак је да напишете неки Јавасцрипт да би имплементирали нашу функционалност. Ево шта сам ја добила 
 и  излазе све одједном.
 
 (фунцтион () тинимце.ПлугинМанагер.адд ('пре_цоде_буттон', функција (едитор, урл) едитор.аддБуттон ('пре_цоде_буттон', тект: 'Присм', икона: фалсе, онцлицк: фунцтион () вар селецтед = тиниМЦЕ.ацтивеЕдитор.селецтион.гетЦонтент (); вар цонтент = '
'+ изабрано +'
'; едитор.инсертЦонтент (садржај + "\ т ); ); ) (); 
 
Већина тога је диктирана начином на који је ТиниМЦЕ плугин требао бити кодиран, а неке информације о томе можете наћи у ТиниМЦЕ документацији. За сада, све што треба да знате је то име вашег дугмета (пре_цоде_буттон) треба користити у 2. и 3. реду. Вредност "текста" у реду 4 ће се приказати ако не користите икону (погледаћемо додавање икона у тренутку).
 
Метода онцлицк диктира шта ово дугме ради када се кликне. Желим да га користим за замотавање одабраног текста унутар ХТМЛ структуре о којој смо раније говорили.
 
Изабрани текст се може искористити тиниМЦЕ.ацтивеЕдитор.селецтион.гетЦонтент (). Затим омотам елементе око њега и убацим га, замењујући истакнути садржај новим елементом. Додао сам и нову линију тако да могу лако почети писати након елемента кода.
 
Ако желите да користите икону, предлажем да изаберете једну од Дасхицонс сетова који се испоручују са ВордПресс-ом. Референт за развојне програмере има одличан алат за проналажење икона и њиховог ЦСС / ХТМЛ / Глифа. Пронађите симбол кода и запишите уницоде испод њега: ф475.
 
Морат ћемо приложити таблицу стилова на наш додатак, а затим додати једноставан стил за приказ наше иконе. Прво, додајте наш стил у ВордПресс:
 
 адд_ацтион ('админ_енкуеуе_сцриптс', 'пре_цоде_стилес'); функција пре_цоде_стилес () вп_енкуеуе_стиле ('пре_цоде_буттон', плугинс_урл ('/стиле.цсс', __ФИЛЕ__));  
 
Вратите се на Јавасцрипт и поред иконе у функцији аддБуттон, замените “фалсе” са класом коју желите да ваше дугме има - користио сам пре_цоде_буттон.
 
Сада креирајте стиле.цсс датотеку у директоријуму додатака и додајте следећи ЦСС:
 
 и.мце-и-пре_цоде_буттон: пре фонт-фамили: дасхицонс; цонтент: "ф475";  
 
 
 
Имајте на уму да ће дугме примити мце-и- [ваша класа овде] класа коју можете користити за циљање и додавање стилова. Одредите фонт као дасхицонс и садржај користећи уницоде вриједност из ранијег.
 
Коришћење ТиниМЦЕ на другом месту
 
Додаци често креирају текстуална поља за унос дужег текста, зар не би било сјајно да и ТиниМЦЕ тамо користимо? Наравно да можемо, и прилично је лако. Функција вп_едитор () дозвољава нам да излазимо било где у администратору, ево како то изгледа:
 
вп_едитор ($ инитиал_цонтент, $ елемент_ид, $ сеттингс);
 
Први параметар поставља почетни садржај за оквир. Ово се може користити за учитавање опције из базе података, на пример. Други параметар поставља ИД елемента ХТМЛ-а. Трећи параметар је низ поставки. Да бисте прочитали тачна подешавања која можете да користите, погледајте документацију вп едитора.
 
Најважнија поставка је тектареа_наме. Ово попуњава атрибут имена елемента тектареа, омогућујући вам да лако сачувате податке. Ево како изгледа мој уредник када се користи на страници са опцијама:
 
$ сеттингс = арраи ('тектареа_наме' => 'буиер_био');
 
вп_едитор (гет_оптион ('буиер_био'), 'буиер_био', $ сеттингс);
 
Ово је еквивалентно писању следећег кода, који би резултирао једноставним текстом:
 
<?php get_option( 'buyer_bio' ) ?>
 
Закључак
 
ТиниМЦЕ едитор је усер-фриендли начин да се корисницима омогући већа флексибилност при уносу садржаја. Омогућава онима који не желе да формирају њихов садржај само да га откуцају и заврше са њим, као и онима који желе да се зајебавају са њим како би потрошили онолико времена колико им је потребно.
 
Креирање нових дугмади и функционалности се може обавити на веома модуларан начин, а ми смо само огребали површину могућности. Ако знате за посебно добар ТиниМЦЕ плугин или случај коришћења који вам је много помогао, јавите нам у коментарима испод!