Thêm custom button vào TinyMCE editor wordpress

Khai báo một nút TinyMCE mới

Hãy bắt đầu với những điều cơ bản – để làm cho các nút của chúng tôi xuất hiện trong trình soạn thảo, chúng tôi phải treo dưới tác động admin_head:

add_action('admin_head', 'codehay_add_my_tc_button');

codehay_add_my_tc_button chức năng nên được như sau:
function codehay_add_my_tc_button() {
global $typenow;
// check user permissions
if ( !current_user_can('edit_posts') &&  !current_user_can('edit_pages') ) {
return;
}
// verify the post type
if( ! in_array( $typenow, array( 'post', 'page' ) ) )
return;
// check if WYSIWYG is enabled
if ( get_user_option('rich_editing') == 'true') {
add_filter("mce_external_plugins", "codehay_add_tinymce_plugin");
add_filter('mce_buttons', 'codehay_register_my_tc_button');
}
}

Như bạn có thể thấy, các chức năng trên thực hiện một số hoạt động quan trọng; nó chủ yếu là kiểm tra quyền sử dụng và cài đặt. Nếu tất cả các điều kiện được đáp ứng, sau đó hai bộ lọc được thêm vào: codehay_add_tinymce_plugincodehay_register_my_tc_button .

Việc đầu tiên của họ được sử dụng để chỉ định đường dẫn đến các kịch bản với các plugin của chúng tôi cho TinyMCE:

function codehay_add_tinymce_plugin($plugin_array) {
$plugin_array['codehay_tc_button'] = plugins_url( '/text-button.js', __FILE__ ); // CHANGE THE BUTTON SCRIPT HERE
return $plugin_array;
}

Thứ hai, mặt khác, được sử dụng để thêm các nút trong trình soạn thảo – trong trường hợp này, chúng ta sẽ thêm một nút:
function codehay_register_my_tc_button($buttons) {
array_push($buttons, "codehay_tc_button");
return $buttons;
}

Nút với nhãn văn bản

Bây giờ chúng ta có thể xem xét việc tạo mã có trách nhiệm cho việc thêm một nút để biên tập – chúng tôi đặt đoạn mã sau trong * .js tập tin chỉ định trong codehay_add_tinymce_plugin lọc. Mã này cho biết thêm một nút, mà khi nhấp vào sẽ chèn Hello World! Văn bản vào trình soạn thảo

(function() {
tinymce.PluginManager.add('codehay_tc_button', function( editor, url ) {
editor.addButton( 'codehay_tc_button', {
text: 'My test button',
icon: false,
onclick: function() {
editor.insertContent('Hello World!');
}
});
});
})();

Đây không phải là hiệu ứng ngoạn mục nhất, nhưng tuy nhiên, các nút đầu tiên mà chúng tôi đã thêm vào trình biên tập TinyMCE làm việc như mong đợi:

Thêm custom button vào TinyMCE editor wordpress

Nút với biểu tượng tiêu chuẩn

Đó là thời gian để thay đổi giao diện của nút và điều chỉnh nó để phù hợp với sự xuất hiện của bảng điều khiển. Đối với mục đích này, chúng tôi sử dụng Dashicons – một tập hợp các biểu tượng trong các hình thức của các font sử dụng trong bảng điều khiển.

Đơn giản chỉ cần thay đổi mã của bạn để:

(function() {
tinymce.PluginManager.add(codehay_tc_button', function( editor, url ) {
editor.addButton( 'codehay_tc_button', {
title: 'My test button',
icon: 'wp_code',
onclick: function() {
editor.insertContent('Hello World!');
}
});
});
})();

Hai thứ đã thay đổi:

  • Thuộc tính văn bản đã được thay thế bởi thuộc tính tiêu đề, để các văn bản biến mất từ nút và bây giờ sẽ xuất hiện trong tooltip khi bạn di chuột qua nó.
  • Chúng tôi xác định tên của các biểu tượng được sử dụng. Thật không may, ít nhất là để hiểu biết hiện tại của tôi, không cần thông qua CSS bạn được giới hạn cho các biểu tượng nhất định.

Hiệu quả trong hành động:

Thêm custom button vào TinyMCE editor wordpress

Nút với biểu tượng tùy chỉnh từ Dashicons

Giả sử rằng chúng ta là cứng đầu và muốn có một biểu tượng từ tập Dashicons mà không được định nghĩa trong trình soạn thảo mã – ví dụ, biểu tượng biểu tượng WordPress.

May mắn thay, giải pháp là khá đơn giản – chúng ta cần phải đính kèm một số mã CSS bổ sung, trong đó có cơ cấu như sau:

i.mce-i-icon {
font: 400 20px/1 dashicons;
padding: 0;
vertical-align: top;
speak: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin-left: -2px;
padding-right: 2px
}

Chúng tôi có thể làm điều đó một cách dễ dàng, như thế này:
function codehay_tc_css() {
wp_enqueue_style('codehay-tc', plugins_url('/style.css', __FILE__));
}
add_action('admin_enqueue_scripts', 'codehay_tc_css');

Đoạn mã trên sẽ cho phép chúng ta sử dụng bất kỳ lớp nhân vật của dashicons- * . Đối với những người bạn của những người tò mò – chúng tôi đã phải chỉ định MCE-i-biểu tượng lớp, bởi vì giá trị của các biểu tượng sẽ tự động được nối vào MCE-i- tiền tố. Bây giờ, chúng ta nên thay đổi mã JavaScript như sau:
(function() {
tinymce.PluginManager.add('codehay_tc_button', function( editor, url ) {
editor.addButton( 'codehay_tc_button', {
title: 'My test button',
icon: 'icon dashicons-wordpress-alt',
onclick: function() {
editor.insertContent('Hello World!');
}
});
});
})();

Như bạn có thể thấy, chúng tôi đã thêm biểu tượng như là lớp học đầu tiên (theo thứ tự để có đượcMCE-i-biểu tượng lớp), và sau đó chúng ta thêm một dashicons-wordpress-alt lớp.

nút của chúng tôi bây giờ trông như sau:

Thêm custom button vào TinyMCE editor wordpress

Danh sách các lớp học từ tập Dashicons có sẵn trên trang danh sách biểu tượng – Tất cả bạn cần làm là nhấn vào biểu tượng chọn, vì vậy mà các lớp học CSS kết hợp với biểu tượng này sẽ xuất hiện ở đầu trang.

Nút với đồ họa của riêng bạn cho các biểu tượng

Nó có thể là trường hợp mà ngay cả Dashicons không đáp ứng nhu cầu cụ thể của chúng tôi liên quan đến sự xuất hiện của biểu tượng. do đó chúng ta cần phải tạo ra đồ họa của chúng ta – tốt lớn hơn kích thước của nút 2-3 lần (tôi tạo ra một hình ảnh kích thước 64x64px, trông đẹp trên màn hình hiển thị võng mạc) và xác định nó như là một nền nút trong file CSS của chúng tôi :

i.codehay-own-icon {
background-image: url('custom-icon.png');
}

Chúng tôi thay thế mã JavaScript vào một sau đây để sử dụng một lớp học mới:
(function() {
tinymce.PluginManager.add('codehay_tc_button', function( editor, url ) {
editor.addButton( 'codehay_tc_button', {
title: 'My test button',
icon: 'icon codehay-own-icon',
onclick: function() {
editor.insertContent('Hello World!');
}
});
});
})();

Nhờ mã này, nút của chúng tôi bây giờ sử dụng mong muốn, biểu tượng không tiêu chuẩn của chúng tôi:

Thêm custom button vào TinyMCE editor wordpress

Thêm menu con để nút

nút của chúng tôi đã có vẻ tốt đẹp; Tuy nhiên, nó vẫn còn hạn chế ở một chức năng duy nhất. May mắn thay, chúng tôi có thể dễ dàng thay đổi đó – chúng ta chỉ cần thực hiện những thay đổi sau vào mã của chúng tôi:

(function() {
tinymce.PluginManager.add('codehay_tc_button', function( editor, url ) {
editor.addButton( 'codehay_tc_button', {
title: 'My test button',
type: 'menubutton',
icon: 'icon codehay-own-icon',
menu: [
{
text: 'Menu item I',
value: 'Text from menu item I',
onclick: function() {
editor.insertContent(this.value());
}
}
]
});
});
})();

Trước hết, chúng tôi thay đổi kiểu nút của menubutton ; nhờ đó, chúng ta có thể sử dụng trình đơn tài sản, trong đó bao gồm các bảng cho một mục menu con. Như bạn có thể thấy vị trí menu con bao gồm các văn bản và các giá trị được chèn bằng cách nhấn (nhờ vào các chức năng được xác định trong onclick tính năng).

nút của chúng tôi đã thay đổi kích thước của nó là tốt:

Thêm custom button vào TinyMCE editor wordpress

Thêm phụ menu con để nút

Các cấu trúc được định nghĩa trong trình đơn tài sản có thể được lồng vào nhau; chỉ cần chỉ định các đơn tài sản vào đúng vị trí:

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

nút của chúng tôi đã có một thực đơn khá tăng cường:

Thêm custom button vào TinyMCE editor wordpress


Thật không may, chúng tôi nhanh chóng nhận thấy một vấn đề nhỏ – nếu chúng ta click vào, ví dụ, “mục menu con đầu tiên”, sau đó trong trình soạn thảo, chúng ta sẽ thấy:

Thêm custom button vào TinyMCE editor wordpress


Trong ngắn hạn – cách nhấn vào mục phụ menu con sẽ trả về các onclick hành động cũng được sử dụng trong các mục trình đơn phụ huynh. May mắn thay, bạn có thể dễ dàng loại bỏ vấn đề này – chỉ cần sử dụng stopPropagation phương pháp, điều đó có nghĩa rằng sự kiện này không được thông qua lên cây DOM:
onclick: function(e) {
e.stopPropagation();
editor.insertContent(this.value());
}

Sau khi thay đổi này, các mặt hàng phụ menu con của chúng tôi phải phản ứng một cách chính xác khi nhấp vào.

Thêm bình luận
1 Trả lời

Thêm popup sau khi nhấn

Cho đến nay, chúng tôi đã được hạn chế mình để chèn các giá trị văn bản cụ thể cho các biên tập viên, nhưng điều này sẽ không phải luôn luôn là một giải pháp đầy đủ. Hãy làm một cái gì đó mà sẽ cho phép người sử dụng để xác định một số các văn bản bổ sung – hãy sử dụng các popup xuất hiện khi bạn nhấn vào nút:

onclick: function() {
editor.windowManager.open( {
title: 'Insert h3 tag',
body: [{
type: 'textbox',
name: 'title',
label: 'Your title'
}],
onsubmit: function( e ) {
editor.insertContent( '<h3>' + e.data.title + '</h3>');
}
});
}

Đoạn mã trên sẽ gây ra một popup để hiển thị với một chỉ dẫn để chèn nội dung của chỉ số h3:

RE: Thêm custom button vào TinyMCE editor wordpress

Như chúng ta có thể thấy các onsubmit kết quả tài sản trong văn bản được thêm vào trình biên tập sau khi thay đổi được thực hiện bởi người sử dụng đều được chấp nhận.

Tăng cường Popup

Chúng tôi chắc chắn có thể tạo popup tăng cường hơn:

RE: Thêm custom button vào TinyMCE editor wordpress


Popup trên sử dụng hai lĩnh vực của textbox loại và một trong những listbox loại:
onclick: function() {
editor.windowManager.open( {
title: 'Insert header tag',
body: [{
type: 'textbox',
name: 'title',
label: 'Your title'
},
{
type: 'textbox',
name: 'id',
label: 'Header anchor'
},
{
type: 'listbox',
name: 'level',
label: 'Header level',
'values': [
{text: '<h3>', value: '3'},
{text: '<h4>', value: '4'},
{text: '<h5>', value: '5'},
{text: '<h6>', value: '6'}
]
}],
onsubmit: function( e ) {
editor.insertContent( '<h' + e.data.level + ' id="' + e.data.id + '">' + e.data.title + '</h' + e.data.level + '>');
}
});
}

Các mã từ các ví dụ sau đây cũng có thể được tìm thấy trên Github .

Lv2 Đã trả lời on 15/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ụ.