WordPress 3.9+ TinyMCE 4 Tweaks: การเพิ่มสไตล์ปุ่มแบบอักษรดรอปดาวน์และป๊อปอัป

หนึ่งในการอัพเดทที่ฉันโปรดปรานใน WordPress 3.9 คือสร้าง TinyMCE เวอร์ชัน 4.0 หลัก TinyMCE ใหม่นั้นดูสะอาดตา (ตรงกับแดชบอร์ด WP จริงๆ) และมันมีฟังก์ชั่นการใช้งานที่ดีมาก ๆ ธีมและปลั๊กอินเก่า ๆ มากมายของฉันต้องได้รับการอัปเดตเพื่อทำงานกับ TinyMCE ใหม่ดังนั้นฉันจึงใช้เวลาขุดหา API และหาสิ่งดีๆออกมา ด้านล่างนี้ฉันจะให้ตัวอย่างแก่คุณเกี่ยวกับวิธีขยายการทำงานของ TinyMCE ฉันจะไม่แนะนำคุณผ่านทุกขั้นตอนหรือรหัสนี้มีความหมายว่าอะไร (มีไว้สำหรับนักพัฒนาซอฟต์แวร์) แต่จะให้รหัสที่ถูกต้องแก่คุณซึ่งคุณสามารถคัดลอก / วางในธีมหรือปลั๊กอินของคุณจากนั้นปรับแต่งตามความเหมาะสม.


Contents

การเพิ่มขนาดตัวอักษรและตระกูลแบบอักษรที่เลือก

ตามค่าเริ่มต้น Custom Fonts และขนาดแบบอักษรจะไม่ถูกเพิ่มลงในตัวแก้ไข TinyMCE ฟังก์ชั่นด้านล่างจะเพิ่มทั้งสองรายการแบบเลื่อนลงทางด้านซ้ายสุดของเครื่องมือแก้ไขในแถวที่สอง เพียงเปลี่ยนตำแหน่งที่ระบุว่า ‘mce_buttons_2’ หากคุณต้องการในแถวอื่น (เช่น: ใช้ ‘mce_buttons_3’ สำหรับแถวที่ 3).

// เปิดใช้งานขนาดแบบอักษรและตระกูลแบบอักษรที่เลือกในตัวแก้ไข
if (! 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 .. ฯลฯ ) และเพื่อให้ตัวเลือกเพิ่มเติมสำหรับความยืดหยุ่นในการขูด ฟังก์ชั่นด้านล่างจะเปลี่ยนตัวเลือกขนาดตัวอักษรเริ่มต้นในตัวเลือกแบบเลื่อนลง.

// ปรับแต่งขนาดตัวอักษร 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 28px 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, ครั้ง; Arial = arial, helvetica, sans-serif; Arial Black = arial black, avant garde หนังสือ Antiqua = หนังสือ antiqua, palatino; Comic Sans MS = การ์ตูน sans ms, sans-serif; Courier New = courier ใหม่, courier; Georgia = จอร์เจีย, palatino; Helvetica = helvetica; Impact = Impact, chicago; Symbol = สัญลักษณ์; Tahoma = tahoma, arial, helvetica, sans-serif; เทอร์มินัล = เทอร์มินัลโมนาโกไทมส์นิวโรมัน = เทอร์โรมันใหม่ครั้งทรีบูเชต MS = เทรเชอร์เอ็ม ms เจเนวา Verdana = เวอร์ดานาเจเนวา Webdings = webdings Wingdings = 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));
}
}
add_action ('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’] = จริง;” ในรหัสด้านล่างสิ่งนี้จะช่วยให้แน่ใจว่าการแก้ไขของคุณจะถูกเพิ่มในเมนูดร็อปดาวน์รูปแบบพร้อมกับคนอื่น ๆ – อย่าเขียนทับสิ่งทั้งหมด (บางทีปลั๊กอินอื่น ๆ ต้องการใช้มันด้วย).

// เพิ่มสไตล์ใหม่ ๆ ในเมนู "รูปแบบ" ของ TinyMCE
if (! function_exists ('wpex_styles_dropdown')) {
ฟังก์ชั่น wpex_styles_dropdown (การตั้งค่า $) {

// สร้างอาร์เรย์ของสไตล์ใหม่
$ new_styles = อาร์เรย์ (
array (
'title' => __ ('สไตล์ที่กำหนดเอง', 'wpex'),
'items' => อาร์เรย์ (
array (
'title' => __ ('ปุ่มธีม', 'wpex'),
'selector' => 'a',
'classes' => 'theme-button'
),
array (
'title' => __ ('ไฮไลต์', 'wpex'),
'inline' => 'span',
'classes' => 'เน้นข้อความ',
),
),
),
);

// รวมสไตล์เก่าและใหม่เข้าด้วยกัน
$ settings ['style_formats_merge'] = จริง;

// เพิ่มสไตล์ใหม่
$ 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 ใหม่ของคุณให้แน่ใจว่าได้เปลี่ยนตำแหน่งของไฟล์จาวาสคริปต์“ 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');
}
}
add_action ('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 – เพิ่มปุ่มไปที่ MCE

รหัส js นี้ไปในไฟล์ js ที่ลงทะเบียนไว้ในข้อมูลโค้ดด้านบนในฟังก์ชั่น“ symple_shortcodes_add_tinymce_plugin” นี้ควรเพิ่มปุ่มข้อความใหม่ที่ระบุว่า “ปุ่มใหม่” ในตัวแก้ไขของคุณและเมื่อคลิกมันจะแทรกข้อความ “WPExplorer.com น่ากลัว!” (แน่นอน).

(ฟังก์ชั่น () {
tinymce.PluginManager.add ('my_mce_button', ฟังก์ชัน (ตัวแก้ไข, url) {
editor.addButton ('my_mce_button', {
ข้อความ: 'ปุ่มใหม่',
ไอคอน: false,
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__));
}
add_action ('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 เป็นแนวคิดที่ไม่ดี (และเป็น) ดังนั้นลองดูรหัสด้านล่างเพื่อดูว่าคุณสามารถแก้ไขจาวาสคริปต์เพื่อแสดงเมนูย่อยสำหรับปุ่มที่คุณกำหนดเองได้อย่างไร หากคุณต้องการที่จะเห็นมันในการดำเนินการตรวจสอบของฉัน วิดีโอย่อแบบ Symple.

(ฟังก์ชั่น () {
tinymce.PluginManager.add ('my_mce_button', ฟังก์ชั่น (โปรแกรมแก้ไข, url) {
editor.addButton ('my_mce_button', {
ข้อความ: 'ตัวอย่างแบบเลื่อนลง',
ไอคอน: false,
ประเภท: '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', {
ข้อความ: 'ตัวอย่างแบบเลื่อนลง',
ไอคอน: false,
ประเภท: 'menubutton',
เมนู: [
{
ข้อความ: 'รายการ 1',
เมนู: [
{
ข้อความ: 'Pop-Up',
onclick: function () {
editor.windowManager.open ({
ชื่อเรื่อง: 'แทรกรหัสย่อแบบสุ่ม',
ร่างกาย: [
{
ประเภท: 'กล่องข้อความ',
ชื่อ: 'textboxName',
ป้ายกำกับ: 'กล่องข้อความ',
ค่า: '30'
},
{
ประเภท: 'กล่องข้อความ',
ชื่อ: 'multilineName',
ป้ายกำกับ: 'Multiline Text Box',
ค่า: 'คุณสามารถพูดสิ่งต่าง ๆ มากมายในที่นี่',
multiline: จริง,
ขั้นต่ำ: 300,
minHeight: 100
},
{
ประเภท: 'กล่องรายการ',
ชื่อ: 'listboxName',
ป้ายกำกับ: 'กล่องรายการ',
'ค่า': [
{text: 'ตัวเลือก 1' ค่า: '1'},
{text: 'ตัวเลือก 2', ค่า: '2'},
{text: 'ตัวเลือก 3', ค่า: '3'}
]
}
],
onsubmit: function (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