Thêm custom button vào TinyMCE editor wordpress Phần 2

Đã trả lời

Phần này gồm các chuyên mục sau:

  • Thêm biểu tượng cho một menu con
  • hỗ trợ đa ngôn ngữ trong plugin cho TinyMCE
  • Thêm một nút thứ hai
  • Khi không có không gian có sẵn cho các nút bấm
  • Loại bỏ các nút biên tập viên
  • Wp_editor () và chế độ “teeny”
  • Một số nút trong một – ButtonGroup
  • danh sách lựa chọn – Listbox

Thêm biểu tượng trong menu con

Menu con có thể có các biểu tượng được thêm vào rất dễ dàng – tất cả những gì cần thiết là các thuộc tính biểu tượng được định nghĩa trong đối tượng tạo ra các mục menu con:

(function() {
tinymce.PluginManager.add('gk_tc_button2', function( editor, url ) {
editor.addButton( 'gk_tc_button2', {
title: 'My test button',
type: 'menubutton',
icon: 'icon gk-own-icon',
menu: [
{
text: 'Menu item I',
value: 'Text from menu item I',
icon: 'icon dashicons-wordpress',
onclick: function() {
editor.insertContent(this.value());
}
},
{
text: 'Menu item II',
value: 'Text from menu item II',
icon: 'icon dashicons-wordpress-alt',
onclick: function() {
editor.insertContent(this.value());
},
menu: [
{
text: 'First submenu item',
value: 'Text from sub sub menu',
icon: 'icon dashicons-smiley',
onclick: function(e) {
e.stopPropagation();
editor.insertContent(this.value());
}
},
{
text: 'Second submenu item',
value: 'Text from sub sub menu',
icon: 'icon dashicons-edit',
onclick: function(e) {
e.stopPropagation();
editor.insertContent(this.value());
}
}
]
},
{
text: 'Menu item III',
value: 'Text from menu item III',
icon: 'icon dashicons-tickets',
onclick: function() {
editor.insertContent(this.value());
}
}
]
});
});
})();

Bạn có thể thấy hiệu quả dưới đây – biểu tượng đã được thêm vào mỗi mục menu con:

Thêm custom button vào TinyMCE editor wordpress Phần 2

hỗ trợ đa ngôn ngữ trong plugin cho TinyMCE

Ý nghĩ đầu tiên đến với tâm trí khi bắt đầu để tạo ra các kịch bản với sự hỗ trợ đa ngôn ngữ trong WordPress JS là sử dụng wp_localize_script chức năng. Tuy nhiên, điều này là không thực sự tốt; chức năng là vô dụng đối với các plugin TinyMCE như kịch bản của plugin TinyMCE không được thêm vào thông qua trang mã cách tiêu chuẩn – thay vì chúng được thêm tự động. Do đó, chúng ta phải sử dụng một giải pháp, cụ thể là các mce_external_languages lọc. Đối với mục đích này, chúng ta cần phải tạo ra một chức năng mới:

function gk_add_my_tc2_button_lang($locales) {
$locales['gk_tc_button2'] = plugin_dir_path ( __FILE__ ) . 'translations.php';
return $locales;
}
add_filter( 'mce_external_languages', 'gk_add_my_tc2_button_lang');

Như bạn có thể thấy, các chức năng trên tạo ra một nguyên tố mới của $ miền địa bàn, mà chỉ ra một tập tin có tên là dịch translations.php đặt trong danh mục plugin cho biết thêm nút.

Như vậy, chúng ta phải một lần nữa tạo ra một tập tin:

<?php
if ( ! defined( 'ABSPATH' ) )
exit;
if ( ! class_exists( '_WP_Editors' ) )
require( ABSPATH . WPINC . '/class-wp-editor.php' );
function gk_tc_button_translation() {
$strings = array(
'button_label' => __('My test button I', 'gk_tc_button2'),
'msg' => __('Hello World!!!!', 'gk_tc_button2')
);
$locale = _WP_Editors::$mce_locale;
$translated = 'tinyMCE.addI18n("' . $locale . '.gk_tc_button", ' . json_encode( $strings ) . ");\n";
return $translated;
}
$strings = gk_tc_button_translation();

Các tập tin trên đã bao gồm, bên cạnh bảo mật thích hợp, một chức năng mà tạo ra một đoạn mã JavaScript cho trình biên tập TinyMCE – nó sẽ là một bảng kết hợp của các bản dịch của chúng tôi. Nó là đáng chú ý đến dòng mà chỉ định một giá trị cho $ translated -đó biến bao gồm các gk_tc_button yếu tố – như nó là tên của đối tượng mà sẽ lưu trữ các bản dịch của bạn. Chúng tôi sẽ làm cho các tham chiếu đến các giá trị của nó như sau:

editor.getLang('OBJECT.KEY')

Với một kịch bản mà bổ sung thêm nút chúng ta chỉ có hai cụm từ có thể được dịch – những lời giải thích của các nút riêng của mình và các văn bản bổ sung vào biên tập sau khi nhấp vào nút:
(function() {
tinymce.PluginManager.add('gk_tc_button1', function( editor, url ) {
editor.addButton( 'gk_tc_button1', {
title: editor.getLang('gk_tc_button.button_label'),
icon: 'icon gk-own-icon',
onclick: function() {
editor.insertContent(editor.getLang('gk_tc_button.msg'));
}
});
});
})();

Thêm một nút thứ hai

Đôi khi cho khả năng sử dụng nó có thể là cần thiết để tránh đặt mỗi chức năng theo yêu cầu của một nút – menu của nó sẽ là quá lớn hoặc quá nặng lồng nhau như là hầu như không thể vượt qua. Cách đơn giản nhất xung quanh vấn đề này là chỉ cần thêm một nút thứ hai có chứa một phần của chức năng yêu cầu.

Đối với mục đích này, chúng ta phải thay đổi một số chức năng được đề cập trong phần đầu của hướng dẫn này; Cụ thể, chức năng được gắn vào mce_external_pluginsmce_buttons bộ lọc:

add_filter("mce_external_plugins", "gk_add_tinymce_plugin2");
add_filter('mce_buttons', 'gk_register_my_tc2_button');

Các chức năng bổ sung thêm mã JS sẽ xem xét như sau:
function gk_add_tinymce_plugin2($plugin_array) {
$plugin_array['gk_tc_button1'] = plugins_url( '/custom-icon-button.js', __FILE__ );
$plugin_array['gk_tc_button2'] = plugins_url( '/second-button.js', __FILE__ );
return $plugin_array;
}

Thêm bình luận
5 Trả lời
Câu trả lời tốt nhất

2 – Rõ ràng các câu hỏi ngay lập tức phát sinh; chính xác có bao nhiêu hàng nút là chúng ta có thể tạo ra? Thật không may, mce_buttons_10 không làm việc như chúng tôi có thể tạo ra tối đa là 4 hàng trong TinyMCE trong WordPress. Do đó, bộ lọc cuối cùng là mce_buttons_4 .

Khi chúng ta đặt các nút trong các hàng khác hơn lần thứ nhất, chúng ta nên nhớ rằng những hàng được ẩn theo mặc định, vì vậy chúng tôi cần nhấp vào nút ‘mở rộng’ để xem các nút khác. Đó là lý do tại sao nó tốt hơn để đặt các nút của bạn trên hàng đầu tiên nếu có thể; để đảm bảo rằng họ vẫn còn trong tầm tay dễ dàng.

Loại bỏ các nút biên tập viên

Loại bỏ các nút hiện có là rất dễ dàng – thay vì thêm một yếu tố để bàn, chúng ta chỉ cần loại bỏ nó.

 function gk_remove_tmce_btns($buttons) { unset($buttons[0]); return $buttons; }
add_filter('mce_buttons', 'gk_remove_tmce_btns'); 

Các nút được lập chỉ mục trong bảng theo thứ tự giống như họ có thể nhìn thấy trong trình soạn thảo. Do đó, các mã trên sẽ loại bỏ các nút có thêm các hiệu ứng chữ đậm cho văn bản.

wp_editor () và chế độ “teeny”

Nó có thể là trường hợp đó, chúng tôi quyết định sử dụng các trình biên tập TinyMCE ở một nơi khác ngoài các ví dụ mục biên tập trong phần ý kiến. Sau đó, biên tập viên TinyMCE thường được viện dẫn trong chế độ đơn giản được gọi là teeny :

 wp_editor( '', 'comment', array( 'teeny' => true, 'quicktags' => false, 'media_buttons' => true )); 

Chế độ này được đặc trưng bởi cấu trúc đơn giản của các biên tập viên – giới hạn chỉ là một hàng nút.

Nó gây ra một sự thay đổi trong các bộ lọc mà chúng tôi sử dụng. Thay vì mce_buttons ,mce_buttons_2 , mce_buttons_3mce_buttons_4 lọc chúng tôi chỉ có một; cácteeny_mce_buttons lọc.

Ngoài ra, chúng ta có thể hạn chế tải plugin trong chế độ này bằng cách sử dụng cácteeny_mce_plugins lọc.

Vì vậy, nếu chúng ta muốn loại bỏ các nút đầu tiên từ trình soạn thảo, sau đó chúng tôi sử dụng đoạn mã sau:

 function remove_teeny_mce_btns($buttons) { unset($buttons[0]); return $buttons; }
add_filter('teeny_mce_buttons', 'remove_teeny_mce_btns'); 

Một số nút trong một – ButtonGroup

Nó có thể dễ dàng được lập luận rằng chúng tôi đã quá trớn nó một chút bằng cách xác định các kịch bản riêng biệt cho hai nút. Nếu chúng ta muốn, chúng ta có thể tạo hai nút chỉ sử dụng một loại nút – ButtonGroup.

Đây là loại nút có một mặt hàng đặc trưng, mà kéo bảng bao gồm các đối tượng xác định các nút:

 (function() { tinymce.PluginManager.add('gk_tc_button2', function( editor, url ) { editor.addButton( 'gk_tc_button2', { title: 'My test button II', type: "buttongroup", items: [ { title: 'First button', icon: 'icon dashicons-wordpress', onclick: function() { editor.insertContent('Hello World I'); }}, { title: 'Second button', type: 'menubutton', icon: 'icon dashicons-wordpress-alt', menu: [ { text: "Item I" }, { text: "Item II" }]}]}); }); })(); 

Như bạn có thể thấy, chúng ta có thể xác định bất kỳ nút bằng cách sử dụng một kịch bản duy nhất. Tuy nhiên, giải pháp này có vấn đề hình ảnh:

RE: Thêm custom button vào TinyMCE editor wordpress Phần 2


Trái ngược với sự xuất hiện, tôi đã không đặt các nút nhóm ở hàng thứ tư – đó là ở vị trí này vì các vấn đề kết nối với phong cách. Tôi cố định chúng với mã CSS sau thêm vàostyle.css file:
 .mce-toolbar .mce-container .mce-btn-group { display: inline-block; } 

Lv2 Đã trả lời on 16/07/2016.
Thêm bình luận

1 – Chúng tôi chỉ đơn giản là thêm một mặt hàng khác trong plugin_array $ bảng kết hợp và thay đổi cách đặt tên hơi – bây giờ mỗi nút có một tên chung kết thúc với số của nút – họ sẽ giúp chúng ta phân biệt các nút của chúng tôi với nhau. Tên của các kịch bản có thể được bất cứ điều gì bạn muốn.

Bây giờ, chúng tôi đã thêm các plugin của chúng tôi và bây giờ chúng tôi là trái với việc thêm nút của chúng tôi vào danh sách các nút trong TinyMCE sử dụng mce_buttons lọc:

 function gk_register_my_tc2_button($buttons) { array_push($buttons, "gk_tc_button1"); array_push($buttons, "gk_tc_button2"); return $buttons; } 

Như bạn có thể thấy ở trên, chúng tôi một lần nữa sử dụng các tên mà chúng ta đã quen thuộc với.Chúng tôi có thể lặp lại lược đồ này nhiều lần chúng ta muốn, mặc dù chúng ta phải nhớ không để lạm dụng nó như là một số plugin mỗi thêm một vài nút có hiệu quả có thể thùng rác trình soạn thảo. Nếu có thể, chúng tôi chỉ cần tạo ra một lượng nhỏ của các nút cho các mục đích của chúng tôi, mang trong tâm trí cùng một lúc mà chúng ta không phải là tác giả Plugin chỉ đó sẽ được sử dụng chức năng này.

Kịch bản đầu tiên ( custom-icon-button.js ), so với trước đó, đã thay đổi một chút – chúng tôi đã đổi tên thành gk_tc_button1 :

 (function() { tinymce.PluginManager.add('gk_tc_button1', function( editor, url ) { editor.addButton( 'gk_tc_button1', { title: 'My test button I', icon: 'icon gk-own-icon', onclick: function() { editor.insertContent('Hello World I'); } }); }); })(); 

Kịch bản thứ hai (second-button.js ) cũng có một cái tên mới:
 function() { tinymce.PluginManager.add('gk_tc_button2', function( editor, url ) { editor.addButton( 'gk_tc_button2', { title: 'My test button II', icon: 'icon dashicons-wordpress', onclick: function() { editor.insertContent('Hello World II'); } }); }); })(); 

Hai nút sẽ xuất hiện trong trình soạn thảo:

RE: Thêm custom button vào TinyMCE editor wordpress Phần 2

Khi không có chỗ cho các nút bấm

Buttons đã được bổ sung gần đây xuất hiện trên thanh nút có thể nhìn thấy đầu tiên. Tuy nhiên, đôi khi không có nhiều không gian đó để làm việc với – may mắn thay, chúng tôi có thể thêm các nút của chúng tôi đến hàng thứ hai; tất cả chúng ta cần phải làm là thay đổi tên bộ lọc từ mce_buttons đểmce_buttons_2 như sau

 add_filter('mce_buttons_2', 'gk_register_my_tc2_button'); 

RE: Thêm custom button vào TinyMCE editor wordpress Phần 2


Hơn nữa, chúng tôi thậm chí có thể tạo ra một hàng nút, mà không tồn tại trong một cài đặt WordPress sạch. Chỉ cần sử dụng mce_buttons_3 lọc:
 add_filter('mce_buttons_3', 'gk_register_my_tc2_button'); 

RE: Thêm custom button vào TinyMCE editor wordpress Phần 2

Lv2 Đã trả lời on 15/07/2016.
Thêm bình luận

3 – Danh sách lựa chọn – Listbox

Việc thay thế cho menubutton là danh sách lựa chọn – listbox . Yếu tố đặc trưng của các danh sách lựa chọn là các tính năng như: Chiều rộng Cố định và giá trị. Tính năng đầu tiên là chịu trách nhiệm cho việc hạn chế các nội dung hiển thị với độ rộng thích hợp – tính năng thứ hai, mặt khác, bao gồm các yếu tố danh sách. Dưới đây bạn có thể tìm thấy các ví dụ về danh sách lựa chọn thêm danh sách các máy phát điện văn bản nhưlorem ipsum cho biên tập viên:

(function() {
tinymce.PluginManager.add('gk_tc_button2', function( editor, url ) {
editor.addButton( 'gk_tc_button2', {
title: 'My test button II',
type: "listbox",
fixedWidth: true,
text: 'Lorem ipsum',
values: [{
text:'Lorem ipsum',
value:'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dolor lacus, sodales ac massa nec, vulputate tempor libero. In in nunc ut odio ullamcorper venenatis id sed augue. Mauris eget sem aliquam, fermentum metus vitae, dapibus nibh. Ut lobortis egestas congue. In posuere velit vel nisl tincidunt, non mattis augue sagittis. Aenean mattis at enim ac facilisis. Sed dui eros, pretium eget sapien adipiscing, dictum molestie tortor. Aenean consequat accumsan est id vestibulum. Phasellus vulputate tellus ante, ac convallis erat sagittis et. Nulla id risus sed quam vestibulum blandit.',
onclick: function() {
editor.insertContent(this.value());
}},
{
text:'Gangsta lorem ipsum',
value: 'Lorizzle funky fresh dolor yippiyo amizzle, sheezy adipiscing elizzle. Nullam sapien away, funky fresh volutpizzle, bling bling i\'m in the shizzle, gravida vizzle, uhuh ... yih!. Shit shit fo shizzle. Sed erizzle. Own yo\' izzle dolor turpis tempizzle fo shizzle. Maurizzle black fo shizzle mah nizzle fo rizzle, mah home g-dizzle izzle gizzle. Crunk izzle tortizzle. Pellentesque bling bling uhuh ... yih! crackalackin. In hac break it down platea dictumst. Black daahng dawg. Curabitizzle yippiyo things, pretizzle black, mattis go to hizzle, eleifend vitae, nunc. Yo mamma suscipizzle. Integizzle semper velit go to hizzle.',
onclick: function() {
editor.insertContent(this.value());
}},
{
text:'Veggie ipsum',
value: 'Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.',
onclick: function() {
editor.insertContent(this.value());
}}]});
});
})();

Như bạn có thể thấy, các nội dung của danh sách các yếu tố này là rất tương tự như danh sách được sử dụng trong một nút menu con.

Hiệu quả là như sau:

RE: Thêm custom button vào TinyMCE editor wordpress Phần 2

Lv2 Đã trả lời on 16/07/2016.
Thêm bình luận

4 – Thêm TinyMCE Editor vào Comments Mục

Nó có thể được rằng bạn muốn hiển thị một trình soạn thảo WYSIWYG thay vì biên tập viên nhận xét chuẩn trong phần ý kiến. May mắn thay, chúng ta có thể đạt được điều này rất dễ dàng chỉ với một thay đổi nhỏ về functions.php tập tin của chủ đề của chúng tôi.

Để bắt đầu, chúng tôi chỉ cần thêm đoạn mã sau đây:

function gk_comment_form( $fields ) { ob_start(); wp_editor( '', 'comment', array( 'teeny' => true )); $fields['comment_field'] = ob_get_clean(); return $fields;}add_filter( 'comment_form_defaults', 'gk_comment_form' );

Như bạn có thể thấy, chúng tôi sử dụng các bình luận hình thức mặc định bộ lọc cũng như các chức năng để bắt đầu ra trong PHP. Kết quả là, chúng tôi có thể thay thế các lĩnh vực tiêu chuẩn với các nội dung của biên tập TinyMCE nhận xét.

Một điều quan trọng là việc sử dụng TinyMCE của teeny chế độ. Chế độ này cho phép bạn hiển thị một phiên bản đơn giản của trình soạn thảo.

Tất nhiên, các mã được trình bày ở trên là một cấu hình rất cơ bản, mà sẽ hiển thị trình soạn thảo trong hình thức cơ bản của nó, như hình dưới đây:

RE: Thêm custom button vào TinyMCE editor wordpress Phần 2


Như bạn có thể thấy, chúng ta sẽ cần một vài sửa đổi để làm cho giao diện biên tập đoan hơn và chức năng. Hãy bắt đầu với kích thước của các biên tập viên – theo mặc định nó sẽ hiển thị 10 dòng cho khu vực văn bản, chỉnh sửa, như đã thấy trong ảnh chụp màn hình ở trên; đây là quá nhiều đối với hầu hết mọi người. Rất may, chúng ta chỉ cần thay đổi wp_editor chức năng như sau:
wp_editor( '', 'comment', array('teeny' => true,'textarea_rows' => 5));

Để giảm số lượng các dòng văn bản 5 sử dụng textarea_rows tùy chọn. Nhờ đó đã thay đổi, biên tập viên trông tốt hơn nhiều:

RE: Thêm custom button vào TinyMCE editor wordpress Phần 2


Một vấn đề khác là khả năng cho người dùng để chèn hình ảnh – thường xuyên nhất, chúng tôi sẽ không muốn người dùng của chúng tôi để mất quá nhiều không gian trên máy chủ với nguồn lực bổ sung không cần thiết, vì vậy nó có giá trị vô hiệu hóa các nút để thêm media – để làm được điều này chúng ta có thể sử dụng các media_buttons tùy chọn:
wp_editor( '', 'comment', array('teeny' => true,'textarea_rows' => 5,'media_buttons' => false));

biên tập viên của chúng tôi đã bắt đầu trông khá gọn gàng khi mặt hàng này được lấy ra:

RE: Thêm custom button vào TinyMCE editor wordpress Phần 2


Có một vấn đề nhỏ về hình ảnh ở đây – một trong những biểu tượng không phù hợp với chiều rộng của khu vực ý kiến – vì vậy bạn sẽ phải vứt bỏ nút ít nhất cần thiết – Cá nhân tôi sẽ loại bỏ các nút có thêm các gạch ngang để các văn bản; để làm được điều này, chúng tôi sẽ sử dụng MCE teeny nút bộ lọc và loại bỏ các nút thứ năm trong danh sách:
add_filter( 'teeny_mce_buttons', 'gk_comment_form_no_strikethrough');function gk_comment_form_no_strikethrough($buttons) { unset($buttons[4]); return $buttons;}

Nhờ các sửa đổi trên, biên tập viên của chúng tôi bây giờ trông gọn gàng và ngăn nắp và chiếm không gian tối thiểu:

RE: Thêm custom button vào TinyMCE editor wordpress Phần 2


Vẫn còn có thêm một bổ sung – chế độ toàn màn hình, mà theo mặc định trông như thế này:

RE: Thêm custom button vào TinyMCE editor wordpress Phần 2


Chúng tôi cũng có thể sử dụng chế độ Distarction Viết miễn phí bằng cách thêm một lựa chọn khác – dfw :
wp_editor( '', 'comment', array('teeny' => true,'textarea_rows' => 5,'media_buttons' => false,'dfw' => true));

Mà làm cho chế độ toàn màn hình nhìn và cảm thấy tốt hơn một chút, ít nhất là trong quan điểm của tôi!

RE: Thêm custom button vào TinyMCE editor wordpress Phần 2


Nó có một cách rõ ràng để trở về chế độ chỉnh sửa bình thường, không giống như các chế độ toàn màn hình tiêu chuẩn, có thể làm giảm sự nhầm lẫn.

Cuối cùng, nếu chúng ta muốn giảm kích thước của các biên tập viên hơn nữa chúng ta có thể loại bỏ các tab với sự lựa chọn giữa các chế độ WYSIWYG và văn bản – cho mục đích này, chúng ta có thể sử dụng tùy chọn quicktags :

wp_editor( '', 'comment', array('teeny' => true,'textarea_rows' => 5,'media_buttons' => false,'dfw' => true,'quicktags' => false));

Kết quả là phiên bản rút gọn hầu hết các trình soạn thảo WYSIWYG có thể có trong các ý kiến:

RE: Thêm custom button vào TinyMCE editor wordpress Phần 2

Lv2 Đã trả lời on 16/07/2016.
Thêm bình luận

5 – Thêm Nút Chế độ toàn màn hình

WordPress có một thời gian cung cấp một chế độ toàn màn hình khi tạo bài viết hoặc các trang, cho phép bạn tập trung hoàn toàn vào văn bản (trong một số biên tập viên chế độ này được gọi là “Thiền chế độ” hoặc đơn giản là “Distraction miễn phí Viết”). Nếu bạn hoặc người dùng quan tâm trong việc sử dụng các tùy chọn toàn màn hình, nó có giá trị học tập như thế nào để thêm các nút riêng của bạn để chế độ này của trình biên tập để nâng cao hoặc đơn giản hóa các kinh nghiệm viết. Tuy nhiên, chúng ta phải nhấn mạnh rằng việc thêm nút để các biên tập đầy đủ màn hình khá khác nhau để thêm các nút để trình biên tập TinyMCE chuẩn.

Hãy bắt đầu với các khuôn khổ cơ bản của plugin:

add_action('admin_head', 'wordup_add_fullscreen_button');
add_action('admin_enqueue_scripts', 'wordup_add_css');
function wordup_add_fullscreen_button() {
global $typenow;
// sprawdzamy czy user ma uprawnienia do edycji postów/podstron
if ( !current_user_can('edit_posts') &amp;&amp; !current_user_can('edit_pages') )
return;
// weryfikujemy typ wpisu
if( ! in_array( $typenow, array( 'post', 'page' ) ) )
return;
// sprawdzamy czy user ma włączony edytor WYSIWYG
if ( get_user_option('rich_editing') == 'true') {
add_filter( 'wp_fullscreen_buttons', 'wordup_add_button_to_fullscreen_editor' );
}
}
function wordup_add_button_to_fullscreen_editor( $buttons ){
return $buttons;
}
function wordup_add_css() {
wp_enqueue_style('wordup-tinymce', plugins_url('/style.css', __FILE__));
}

Trong thực tế, các mã trên là rất giống với mã mà chúng tôi sử dụng khi tạo plugin tiêu chuẩn cho TinyMCE. Sự khác biệt chính là các dòng sau:
add_filter( 'wp_fullscreen_buttons', 'wordup_add_button_to_fullscreen_editor' );

Đó là trách nhiệm cho việc thêm nút chúng ta – như bạn có thể thấy chúng tôi đã sử dụng wp toàn màn hình nút lọc thay vì tiêu chuẩn một: mce_buttons .
Sự khác biệt lớn không trở nên đáng chú ý cho đến khi chúng tôi bắt đầu xác định nút – chúng ta thêm nút của chúng tôi bằng cách tạo ra một mảng kết hợp:
function wordup_add_button_to_fullscreen_editor( $buttons ){
$buttons['IKONA'] = array(
'title' => 'NAZWA',
'onclick' => "AKCJA",
'both' => false
);
return $buttons;
}

Như chúng ta có thể thấy các định nghĩa trên của nút bao gồm tên biểu tượng của nó, đó cũng là tên của các nút và nhận dạng của nó trong danh sách các nút toàn màn hình trong trình soạn thảo. các danh hiệu field defines the hint which will be displayed when the cursor hovers on our button. In the onclick field we define the JavaScript code which will be run after the button is clicked – due to this we won’t use an external JS file; instead, we will define the button’s behavior just once, in the array. The last field, both, is a flag that determines whether our button will be visible in both editor modes – either both the visual and text mode, or just visually.

Hãy bắt đầu với phiên bản cơ bản của nút chỉ làm việc trong chế độ trực quan của biên tập viên:

function wordup_add_button_to_fullscreen_editor( $buttons ){
$buttons['icon dashicons-wordpress'] = array(
'title' => 'WordPress button',
'onclick' => "tinyMCE.activeEditor.insertContent('Hello World!');",
'both' => false
);
return $buttons;
}

Chúng tôi đã viết các mã trên mang trong tâm trí thực tế rằng mã Plugin cơ sở của tôi bao gồm một hướng dẫn để có được các biểu tượng từ Dashicons; đó là lý do tại sao tôi đặt tên plugin của tôi biểu tượng dashicons-wordpress . Chúng tôi đạt được quyền truy cập vào các biên tập viên với một tinyMCE.activeEditor đối tượng, đó là một bí danh cho tinyMCE.editors [0] đối tượng. Sau khi tải plugin soạn thảo màn hình đầy đủ của chúng tôi trông như sau:

RE: Thêm custom button vào TinyMCE editor wordpress Phần 2


Nhưng nếu chúng ta muốn nút của chúng tôi để xuất hiện trong chế độ văn bản của trình biên tập toàn màn hình? Có vẻ như ban đầu mà bạn chỉ muốn cần phải thay thế cả hai lá cờ với sự thật :
function wordup_add_button_to_fullscreen_editor( $buttons ){
$buttons['icon dashicons-wordpress'] = array(
'title' => 'WordPress button',
'onclick' => "tinyMCE.activeEditor.insertContent('Hello World!');",
'both' => true
);
return $buttons;
}

Nhưng sau khi thực hiện thay đổi này, nút của chúng tôi thực sự xuất hiện trong tab thứ hai và không hoạt động khi chúng ta nhấp vào nó. Điều này là do thực tế là các văn bản chế độ không sử dụng các trình biên tập TinyMCE, vì vậy nó đòi hỏi tay thêm mã JavaScript để xử lý các hành động trên nhấp chuột. Các mã đúng của trình biên tập văn bản thay vì phải thực hiện như sau:
function wordup_add_button_to_fullscreen_editor( $buttons ){
$buttons['icon dashicons-wordpress'] = array(
'title' => 'WordPress button',
'onclick' => "if(tinyMCE.activeEditor) {
tinyMCE.activeEditor.insertContent('Hello World!');
} else {
var cursor = jQuery('#content').prop('selectionStart');
if(!cursor) cursor = 0;
var content = jQuery('#content').val();
var textBefore = content.substring(0, cursor );
var textAfter = content.substring( cursor, content.length );
jQuery('#content').val( textBefore + 'Hello World!' + textAfter );
}",
'both' => true
);
return $buttons;
}

Trước hết, chúng ta kiểm tra xem tinyMCE.activeEditor đối tượng tồn tại – sau khi chuyển sang một trình soạn thảo văn bản, đối tượng này là trống đó cho phép chúng ta dễ dàng biết các chế độ soạn thảo toàn màn hình được kích hoạt. Sau đó, chúng tôi sử dụng JavaScript API cho phép chúng tôi để đọc các vị trí con trỏ trong textarea lĩnh vực, mà trong trường hợp của một trình soạn thảo toàn màn hình có nội dung ID. Dựa vào vị trí của con trỏ, bây giờ chúng ta có thể phân chia các nội dung của một trường văn bản để hai dây – trước và sau khi con trỏ. Sau đó, chúng ta chèn văn bản của chúng tôi giữa họ và các văn bản kết quả được đặt trở lại vào trong hộp.

Lv2 Đã trả lời on 16/07/2016.

Còn phần

Việc kích hoạt Control StyleSelect nữa

on 16/07/2016.
Thêm bình luận

Trả lời của bạn

Bằng cách gửi bài trả lời của bạn, bạn đồng ý với Chính sách bảo mậtđiều khoản dịch vụ.