WordPress 3.9+ TinyMCE 4 Настройки: Добавяне на стилове, бутони, шрифтове, падащи падания и изскачащи прозорци

Една от любимите ми актуализации в WordPress 3.9 беше създаването на ядрото на TinyMCE версия 4.0. Новият TinyMCE изглежда по-чист (наистина съвпада с WP таблото за управление) и има някои наистина приятни функции. Много от старите ми теми и плъгини трябваше да бъдат актуализирани, за да работя с новия TinyMCE, така че прекарах известно време копаейки API и измисляне на някои готини неща. По-долу ще ви дам няколко примера за това как можете да разширите функционалността на TinyMCE. Няма да ви преведа през всички стъпки или какво точно означава кодът (това е предназначено за разработчиците), но ще ви предоставя точния код, който можете да копирате / поставите във вашата тема или плъгин и след това да оправите съответно.


Добавяне на размер на шрифта и избор на група шрифтове

По подразбиране персонализираните шрифтове и размерите на шрифта не се добавят в редактора на TinyMCE. Функцията по-долу ще добави и двете тези падащи панели в крайната лява част на редактора на втория ред. Просто променете мястото, където пише „mce_buttons_2“, ако искате в друг ред (напр .: използвайте „mce_buttons_3“ за 3-ти ред).

// Активиране на размера на шрифта и семейството шрифтове, избрани в редактора
ако (! function_exists ('wpex_mce_buttons')) {
функция wpex_mce_buttons ($ бутони) {
array_unshift ($ бутони, 'fontselect'); // Добавяне на избор на шрифт
array_unshift ($ бутони, 'fontsizeselect'); // Добавяне на размер на шрифта
върнете $ бутони;
}
}
add_filter ('mce_buttons_2', 'wpex_mce_buttons');

Добавяне на персонализирани размери на шрифта

По подразбиране размерите на шрифта са зададени на pt стойности, което не винаги е идеално. Предпочитам да използвам пикселни стойности (12px, 13px, 14px, 16px..etc) и да предоставя повече възможности за гъвкавост на рендето. Функцията по-долу ще промени опциите за размер на шрифта по подразбиране в падащия селектор.

// Персонализирайте размера на шрифта на mce editor
if (! function_exists ('wpex_mce_text_sizes')) {
функция wpex_mce_text_sizes ($ initArray) {
$ initArray ['fontsize_formats'] = "9px 10px 12px 13px 14px 16px 18px 21px 24px 28px 32px 36px";
върнете $ initArray;
}
}
add_filter ('tiny_mce_before_init', 'wpex_mce_text_sizes');

Добавяне на персонализирани шрифтове

Опциите за шрифт по подразбиране в селектора на семейството на шрифтове са всички шрифтове, които са безопасни за уеб, по подразбиране, но какво, ако искате да добавите още шрифтове към селектора? Може би някои Google шрифтове? Ще бъдем наистина лесно да разгледаме примера по-долу.

// Добавяне на персонализирани шрифтове в списъка с шрифтове
if (! function_exists ('wpex_mce_google_fonts_array')) {
функция wpex_mce_google_fonts_array ($ initArray) {
$ initArray ['font_formats'] = 'Lato = Lato; Andale Mono = andale mono, times; Arial = arial, helvetica, sans-serif; Arial Black = arial black, avant garde; Book Antiqua = книга antiqua, palatino; Comic Sans MS = comic sans ms, sans-serif; Courier New = courier new, courier; Georgia = georgia, palatino; Helvetica = helvetica; Въздействие = удар, чикаго; Символ = символ; Tahoma = tahoma, arial, helvetica, sans-serif; Terminal = терминал, Монако; Times New Roman = времена нов римски, времена; Trebuchet MS = trebuchet ms, geneva; Verdana = verdana, geneva; Webdings = webdings; Wingdings = крилати, zapf dingbats ';
върнете $ initArray;
}
}
add_filter ('tiny_mce_before_init', 'wpex_mce_google_fonts_array');

Забележете как добавих „Lato“ към списъка в горния код? Това е толкова просто! В моята тема за WordPress всъщност преглеждам всеки потребителски шрифт, използван на сайта, както е дефиниран в тематичния панел, и ги добавям в полето за избор, така че да са достъпни и при редактиране на вашите публикации / страници (сладки). Но кодът САМО рекламира семейството на шрифтовете в падащото меню, няма да зареди магически скрипта, така че когато промените текста си в редактора, всъщност можете да видите този персонализиран шрифт, приложен към него … Това прави кодът по-долу!

// Добавете Google Scripts за използване с редактора
if (! function_exists ('wpex_mce_google_fonts_styles')) {
функция wpex_mce_google_fonts_styles () {
$ font_url = 'http://fonts.googleapis.com/css?family=Lato:300,400,700';
add_editor_style (str_replace (',', '% 2C', $ font_url));
}
}
добавяне ('init', 'wpex_mce_google_fonts_styles');

Активирайте падащото меню Формати (стилове) и Добавяне на нови стилове

Спомняте ли си падащото меню „Стили“ в WP 3.8? Това беше доста готино! Можете да го използвате, за да добавите няколко готини класове, които да се използват в редактора на публикации (аз го използвам в WPExplorer всъщност за бутони, цветни петна, кутии .. и т.н.). Ще бъдем в WP 3.9 все още можете да добавяте стилове, но той е преименуван в новия TinyMCE 4.0 във „Формати“, така че работи малко по-различно. По-долу е даден пример за това как да активирате падащото меню Формати и също да добавите някои нови елементи към него.

WordPress TInyMCE Формати падащо меню

Активирайте падащото меню за формати

Това всъщност се прави по същия начин преди WP 3.9, но споделям в случай, че не сте знаели как да го направите.

// Добавяне на падащо меню за формати към MCE
if (! function_exists ('wpex_style_select')) {
функция wpex_style_select ($ бутони) {
array_push ($ бутони, 'styleselect');
върнете $ бутони;
}
}
add_filter ('mce_buttons', 'wpex_style_select');

Добавете нови елементи към формати

Добавянето на нови елементи е супер лесно. Моля, забележете как добавих „$ settings [„ style_formats_merge “] = true;“ към кода по-долу, това гарантира, че редакциите ви се добавят към падащото меню за формати заедно с всички останали – не трябва да презаписвате цялото нещо (може би други плъгини искат да се възползват и от него).

// Добавяне на нови стилове в падащото меню на менютата „Формати“ на TinyMCE
if (! function_exists ('wpex_styles_dropdown')) {
функция wpex_styles_dropdown ($ настройки) {

// Създаване на масив от нови стилове
$ new_styles = масив (
масив (
'title' => __ ('Персонализирани стилове', 'wpex'),
'items' => масив (
масив (
'title' => __ ('Бутон за тема', 'wpex'),
'selector' => 'a',
'класове' => 'бутон за тема'
),
масив (
'title' => __ ('Highlight', 'wpex'),
'inline' => 'span',
'класове' => 'подчертаване на текст',
),
),
),
);

// Обединяване на стари и нови стилове
$ settings ['style_formats_merge'] = true;

// Добавяне на нови стилове
$ settings ['style_formats'] = json_encode ($ new_styles);

// Върнете нови настройки
върнете $ настройки;

}
}
add_filter ('tiny_mce_before_init', 'wpex_styles_dropdown');

Добавяне на прост бутон MCE

Добавянето на нов бутон в редактора на TinyMCE е особено полезно за шорткодовете, тъй като като потребител не е нужно да запомняте никакви шорткодове, можете просто да щракнете върху бутон и той да го вмъкне. Не казвам да добавям 100 от бутоните към TinyMCE за всичките си шорткодове (мразя, когато разработчиците правят това, това е толкова лоша практика и изглежда ужасно), но ако добавите 1 или няколко, ще оставя да мине �� Ако искате да добавите букет, тогава трябва да създадете подменю, както е обяснено в следващия раздел.

WordPress MCE Нов бутон

PHP код – Деклариране на новия MCE плъгин в WP

Този код ще декларира новия ви MCE плъгин, не забравяйте да промените местоположението на javascript файла „mce-button.js“, за да съответства на местоположението на вашия файл (за което ще ви дам кода и в следващия подраздел). като очевидно преименувайте префикса „мой“ на нещо по-уникално!

// Свързва вашите функции в правилните филтри
функция my_add_mce_button () {
// проверете потребителските разрешения
if (! current_user_can ('edit_posts') &&! current_user_can ('edit_pages')) {
се върне;
}
// проверете дали WYSIWYG е активиран
if ('true' == get_user_option ('rich_editing')) {
add_filter ('mce_external_plugins', 'my_add_tinymce_plugin');
add_filter ('mce_buttons', 'my_register_mce_button');
}
}
добавяне ('admin_head', 'my_add_mce_button');

// Деклариране на скрипт за нов бутон
функция my_add_tinymce_plugin ($ plugin_array) {
$ plugin_array ['my_mce_button'] = get_template_directory_uri (). '/ js / mce-button.js';
върнете $ plugin_array;
}

// Регистрирайте нов бутон в редактора
функция my_register_mce_button ($ бутони) {
array_push ($ бутони, 'my_mce_button');
върнете $ бутони;
}

JS Code – Добавете бутона към MCE

Този js код влиза във js файла, регистриран в фрагмента по-горе във функцията „symple_shortcodes_add_tinymce_plugin“. Това трябва да добави нов текстов бутон, който казва „Нов бутон“ в редактора ви и когато щракнете върху него, ще вмъкне текста „WPExplorer.com е страхотно!“ (разбира се).

(функция () {
tinymce.PluginManager.add ('my_mce_button', функция (редактор, URL) {
editor.addButton ('my_mce_button', {
текст: „Нов бутон“,
икона: невярно,
onclick: function () {
editor.insertContent („WPExplorer.com е страхотно!“);
}
});
});
}) ();

Добавете персонализирана икона към новия си MCE бутон

По-горе ви показах как да добавите нов бутон, който ще се показва като „Нов бутон“ в редактора, това е малко куцо … Така промененият код ще ви покаже как да добавите своя собствена персонализирана икона.

Заредете таблица със стилове с вашия CSS

Използвайте тази функция, за да заредите нов таблица стилове за използване в административния панел – някои плъгини / теми вече може да добавят таблица стилове, така че ако вашата тема / плъгин прави това, пропуснете това и просто добавете вашия персонализиран CSS и ощипвайте js (показано по-долу).

функция my_shortcodes_mce_css () {
wp_enqueue_style ('symple_shortcodes-tc', plugins_url ('/ css / my-mce-style.css', __FILE__));
}
добавяне ('admin_enqueue_scripts', 'my_shortcodes_mce_css');

Вашият персонализиран CSS

Това е CSS за добавяне на предварително зареден стилов лист.

i.my-mce-icon {
background-image: url („ВАШИЯ ИКОН URL адрес“);
}

Ощипвайте вашия Javascript

Сега просто ощипнете javascript, който сте добавили по-рано, за да премахнете текстовия параметър и вместо да зададете иконата на false, дайте му потребителско име на клас.

(функция () {
tinymce.PluginManager.add ('my_mce_button', функция (редактор, URL) {
editor.addButton ('my_mce_button', {
икона: 'my-mce-icon',
onclick: function () {
editor.insertContent („WPExplorer.com е страхотно!“);
}
});
});
}) ();

Добавяне на бутон с подменю

Подменю за бутон MCE

По-рано споменах, че добавянето на тон нови икони към лентата на TinyMCE е лоша идея (и е така), така че разгледайте кода по-долу, за да видите как можете да редактирате javascript, за да покажете подменю за вашия персонализиран бутон. Ако искате да го видите в действие, вижте моите Символи за видеоклипове.

(функция () {
tinymce.PluginManager.add ('my_mce_button', функция (редактор, URL) {
editor.addButton ('my_mce_button', {
текст: „Примерно падане“,
икона: невярно,
тип: 'menubutton',
меню: [
{
текст: „Точка 1“,
меню: [
{
текст: „Подпозиция 1“,
onclick: function () {
editor.insertContent („WPExplorer.com е страхотно!“);
}
},
{
текст: „Подпозиция 2“,
onclick: function () {
editor.insertContent („WPExplorer.com е страхотно!“);
}
}
]
},
{
текст: „Точка 2“,
меню: [
{
текст: „Подпозиция 1“,
onclick: function () {
editor.insertContent („WPExplorer.com е страхотно!“);
}
},
{
текст: „Подпозиция 2“,
onclick: function () {
editor.insertContent („WPExplorer.com е страхотно!“);
}
}
]
}
]
});
});
}) ();

Добавяне на изскачащ прозорец към вашия бутон при щракване

В горния пример може да забележите, че всеки бутон просто вмъква текста „WPExplorer.com е страхотно!“ което е готино, но какво да кажем за създаването на изскачащ прозорец, в който потребителят може да промени това, което е вмъкнато в текста? Това би било сладко! И това е нещо, което добавих към версия 1.6 на своите Symple Shortcodes, което прави приставката много по-лесна за използване.

Изскачащ прозорец на WordPress MCE

(функция () {
tinymce.PluginManager.add ('my_mce_button', функция (редактор, URL) {
editor.addButton ('my_mce_button', {
текст: „Примерно падане“,
икона: невярно,
тип: 'menubutton',
меню: [
{
текст: „Точка 1“,
меню: [
{
текст: „Изскачащи прозорци“,
onclick: function () {
editor.windowManager.open ({
заглавие: „Вмъкване на случаен кратък код“,
тяло: [
{
тип: „текстово поле“,
име: 'textboxName',
етикет: „Text Box“,
стойност: '30'
},
{
тип: „текстово поле“,
име: 'multilineName',
етикет: „Многоредово текстово поле“,
стойност: „Тук можете да кажете много неща“,
многоредов: вярно,
minWidth: 300,
мин. височина: 100
},
{
тип: 'listbox',
име: 'listboxName',
етикет: „List List“,
'стойности': [
{текст: 'Вариант 1', стойност: '1'},
{текст: 'Вариант 2', стойност: '2'},
{текст: 'Вариант 3', стойност: '3'}
]
}
],
onsubmit: функция (e) {
editor.insertContent ('[random_shortcode textbox = "' + e.data.textboxName + '" multiline = "' + e.data.multilineName + '" listbox = "' + e.data.listboxName + '"]');
}
});
}
}
]
}
]
});
});
}) ();

Това е готино … Сега какво?

Добър въпрос! Сега е време да вземете тези страхотни промени и да създадете нещо епично или да актуализирате своите плъгини / теми, за да бъдат съвместими с новия TinyMCE в WordPress 3.9. Кажете ми какво измисляте в коментарите по-долу!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map