Tạo WordPress TinyMCE plugin

2 tháng ago, Hướng dẫn WordPress, 1 Views

Giới thiệu về Tạo WordPress TinyMCE Plugin

WordPress là một nền tảng quản lý nội dung (CMS) phổ biến, mạnh mẽ và linh hoạt, được sử dụng bởi hàng triệu trang web trên toàn thế giới. Một trong những yếu tố quan trọng góp phần vào sự thành công của WordPress là trình soạn thảo nội dung TinyMCE. TinyMCE là một trình soạn thảo WYSIWYG (What You See Is What You Get) cho phép người dùng dễ dàng tạo và chỉnh sửa nội dung trực tiếp trên giao diện WordPress. Tuy nhiên, đôi khi người dùng muốn tùy chỉnh trình soạn thảo này để phù hợp hơn với nhu cầu cụ thể của họ. Điều này có thể đạt được bằng cách tạo plugin WordPress TinyMCE tùy chỉnh.

Bài viết này sẽ hướng dẫn bạn cách tạo một plugin WordPress TinyMCE đơn giản, cho phép bạn thêm các nút tùy chỉnh, định dạng văn bản và các tính năng khác vào trình soạn thảo mặc định của WordPress. Chúng ta sẽ tìm hiểu các bước cần thiết để đăng ký plugin, thêm nút vào thanh công cụ, xử lý các sự kiện và lưu trữ các tùy chọn.

Tại sao cần tạo Plugin TinyMCE tùy chỉnh?

Mặc dù TinyMCE mặc định cung cấp nhiều chức năng hữu ích, việc tạo plugin tùy chỉnh mang lại nhiều lợi ích, bao gồm:

Tùy chỉnh giao diện: Bạn có thể thêm các nút, menu và thanh công cụ tùy chỉnh để phù hợp với giao diện của trang web của bạn.
Mở rộng chức năng: Bạn có thể thêm các chức năng mới, chẳng hạn như các định dạng văn bản đặc biệt, các đoạn mã ngắn (shortcode) hoặc tích hợp với các dịch vụ bên ngoài.
Đơn giản hóa quy trình làm việc: Bạn có thể tạo các nút hoặc menu để thực hiện các tác vụ lặp đi lặp lại một cách nhanh chóng và dễ dàng.
Cải thiện trải nghiệm người dùng: Bạn có thể tạo một trình soạn thảo trực quan và dễ sử dụng hơn cho người dùng của bạn.

Các bước để tạo Plugin TinyMCE

Để tạo một plugin WordPress TinyMCE, bạn cần thực hiện các bước sau:

Tạo cấu trúc plugin: Tạo một thư mục mới trong thư mục wp-content/plugins/ và tạo một tệp PHP chính cho plugin của bạn.
Đăng ký plugin: Thêm thông tin plugin vào tệp PHP chính của bạn.
Enqueue scripts: Đăng ký và enqueue JavaScript và CSS cho plugin của bạn.
Thêm nút vào TinyMCE: Sử dụng bộ lọc mce_buttons và mce_external_plugins để thêm nút tùy chỉnh vào thanh công cụ TinyMCE.
Xử lý sự kiện nút: Viết mã JavaScript để xử lý các sự kiện khi người dùng nhấp vào nút tùy chỉnh của bạn.
Thêm chức năng vào nút: Thực hiện các chức năng bạn muốn nút thực hiện, chẳng hạn như chèn văn bản, định dạng văn bản hoặc mở hộp thoại.

Hướng dẫn chi tiết từng bước

Bước 1: Tạo cấu trúc plugin

Đầu tiên, bạn cần tạo một thư mục mới trong thư mục wp-content/plugins/. Hãy gọi thư mục này là my-tinymce-plugin. Sau đó, tạo một tệp PHP trong thư mục này và đặt tên là my-tinymce-plugin.php. Đây sẽ là tệp chính của plugin của bạn.

Bước 2: Đăng ký plugin

Mở tệp my-tinymce-plugin.php và thêm thông tin plugin vào đầu tệp. Thông tin này sẽ được hiển thị trong trang quản lý plugin của WordPress.

“`php

“`

Bước 3: Enqueue scripts

Tiếp theo, bạn cần đăng ký và enqueue các tệp JavaScript và CSS cần thiết cho plugin của bạn. Điều này được thực hiện bằng cách sử dụng action hook admin_enqueue_scripts.

“`php
function my_tinymce_plugin_enqueue_scripts() {
// Chỉ enqueue scripts trên trang chỉnh sửa bài viết
if ( ! did_action( ‘wp_enqueue_media’ ) ) {
wp_enqueue_media();
}

wp_enqueue_script( ‘my-tinymce-plugin’, plugin_dir_url( __FILE__ ) . ‘js/my-tinymce-plugin.js’, array( ‘jquery’ ), ‘1.0.0’, true );
wp_enqueue_style( ‘my-tinymce-plugin’, plugin_dir_url( __FILE__ ) . ‘css/my-tinymce-plugin.css’, array(), ‘1.0.0’, ‘all’ );
}
add_action( ‘admin_enqueue_scripts’, ‘my_tinymce_plugin_enqueue_scripts’ );
“`

Đoạn mã trên sẽ đăng ký và enqueue hai tệp: my-tinymce-plugin.js (tệp JavaScript) và my-tinymce-plugin.css (tệp CSS). Bạn cần tạo các tệp này trong các thư mục js và css tương ứng trong thư mục plugin của bạn.

Bước 4: Thêm nút vào TinyMCE

Để thêm một nút tùy chỉnh vào thanh công cụ TinyMCE, bạn cần sử dụng hai bộ lọc: mce_buttons và mce_external_plugins.

“`php
function my_tinymce_plugin_add_buttons( $buttons ) {
array_push( $buttons, ‘my_custom_button’ );
return $buttons;
}
add_filter( ‘mce_buttons’, ‘my_tinymce_plugin_add_buttons’ );

function my_tinymce_plugin_add_plugin( $plugin_array ) {
$plugin_array[‘my_custom_button’] = plugin_dir_url( __FILE__ ) . ‘js/my-tinymce-plugin.js’;
return $plugin_array;
}
add_filter( ‘mce_external_plugins’, ‘my_tinymce_plugin_add_plugin’ );
“`

Đoạn mã trên sẽ thêm một nút có tên là my_custom_button vào thanh công cụ TinyMCE. Tên này phải trùng với tên plugin JavaScript bạn đã đăng ký ở bước trước.

Bước 5: Xử lý sự kiện nút

Bây giờ bạn cần viết mã JavaScript để xử lý các sự kiện khi người dùng nhấp vào nút tùy chỉnh của bạn. Tạo tệp my-tinymce-plugin.js trong thư mục js và thêm mã sau:

Đoạn mã trên sử dụng hàm tinymce.PluginManager.add() để đăng ký plugin JavaScript của bạn. Hàm này nhận hai tham số: tên plugin (my_custom_button) và một hàm callback. Hàm callback này được gọi khi TinyMCE khởi tạo và cho phép bạn thêm các nút, menu và các tính năng khác vào trình soạn thảo.

Trong hàm callback, chúng ta sử dụng hàm editor.addButton() để thêm một nút vào thanh công cụ. Hàm này nhận một đối tượng cấu hình với các thuộc tính sau:

text: Văn bản hiển thị trên nút.
icon: Tên biểu tượng hiển thị trên nút.
onclick: Hàm callback được gọi khi người dùng nhấp vào nút.

Trong ví dụ này, hàm onclick chèn văn bản “Hello world!” vào trình soạn thảo khi người dùng nhấp vào nút.

Bước 6: Thêm chức năng vào nút

Bây giờ bạn có thể tùy chỉnh chức năng của nút của bạn bằng cách thay đổi hàm onclick trong tệp my-tinymce-plugin.js. Bạn có thể thực hiện nhiều hành động khác nhau, chẳng hạn như:

Chèn văn bản: Sử dụng hàm editor.insertContent() để chèn văn bản vào trình soạn thảo.
Định dạng văn bản: Sử dụng hàm editor.formatter.apply() để định dạng văn bản đã chọn.
Mở hộp thoại: Sử dụng hàm editor.windowManager.open() để mở một hộp thoại tùy chỉnh.
Thêm shortcode: Chèn shortcode vào trình soạn thảo.
Tích hợp với API: Gọi API bên ngoài để lấy dữ liệu và chèn vào trình soạn thảo.

Ví dụ, để mở một hộp thoại tùy chỉnh, bạn có thể sử dụng mã sau:

“`javascript
(function() {
tinymce.PluginManager.add( ‘my_custom_button’, function( editor, url ) {
editor.addButton( ‘my_custom_button’, {
text: ‘My Button’,
icon: false,
onclick: function() {
editor.windowManager.open({
title: ‘My Custom Dialog’,
body: [
{type: ‘textbox’, name: ‘textbox’, label: ‘Text’}
],
onsubmit: function(e) {
// Chèn văn bản từ hộp thoại vào trình soạn thảo
editor.insertContent(e.data.textbox);
}
});
}
});
});
})();
“`

Đoạn mã trên sẽ mở một hộp thoại có một trường văn bản duy nhất. Khi người dùng nhấp vào nút “Submit”, văn bản từ trường văn bản sẽ được chèn vào trình soạn thảo.

Kết luận

Trong bài viết này, bạn đã học cách tạo một plugin WordPress TinyMCE tùy chỉnh. Bạn đã tìm hiểu các bước cần thiết để đăng ký plugin, thêm nút vào thanh công cụ, xử lý các sự kiện và thêm chức năng vào nút. Bằng cách sử dụng các kỹ thuật này, bạn có thể tạo các plugin TinyMCE mạnh mẽ để tùy chỉnh trình soạn thảo WordPress theo nhu cầu cụ thể của bạn.

#ezw_tco-2 .ez-toc-widget-container ul.ez-toc-list li.active::before { background-color: #ededed; } aa