Tạo WordPress TinyMCE plugin

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

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

TinyMCE là một trình soạn thảo WYSIWYG (What You See Is What You Get) mạnh mẽ và linh hoạt, thường được tích hợp sẵn trong WordPress. Nó cho phép người dùng dễ dàng định dạng văn bản, chèn hình ảnh, tạo liên kết và thực hiện nhiều tác vụ soạn thảo khác trực tiếp trên trang web của mình. Tuy nhiên, đôi khi bạn có thể cần mở rộng chức năng của TinyMCE để đáp ứng các yêu cầu cụ thể của dự án. Đó là lúc việc tạo một plugin TinyMCE trở nên hữu ích.

Bài viết này sẽ hướng dẫn bạn từng bước cách tạo một plugin WordPress TinyMCE tùy chỉnh, cho phép bạn thêm các nút, trình đơn hoặc tính năng mới vào trình soạn thảo mặc định. Chúng ta sẽ khám phá các khái niệm cơ bản, các hàm và hook cần thiết, cũng như các phương pháp tốt nhất để đảm bảo plugin của bạn hoạt động trơn tru và tương thích với các plugin và theme khác.

Chuẩn bị Môi Trường Phát Triển

Trước khi bắt đầu, bạn cần chuẩn bị một môi trường phát triển WordPress phù hợp. Dưới đây là các bước cơ bản:

Cài đặt WordPress: Đảm bảo bạn đã cài đặt một phiên bản WordPress hoạt động. Bạn có thể sử dụng một môi trường phát triển cục bộ (như XAMPP, MAMP hoặc Local by Flywheel) hoặc một trang web thử nghiệm trực tuyến.
Tạo một Plugin: Tạo một thư mục mới trong thư mục /wp-content/plugins/ của bạn. Đặt tên cho thư mục này theo tên plugin của bạn, ví dụ: my-custom-tinymce-plugin.
Tạo File Plugin Chính: Bên trong thư mục plugin, tạo một file PHP có cùng tên với thư mục, ví dụ: my-custom-tinymce-plugin.php. Đây sẽ là file plugin chính của bạn.

Thêm đoạn code sau vào file plugin chính để WordPress nhận diện plugin của bạn:

<?php
/**
 * Plugin Name: My Custom TinyMCE Plugin
 * Description: A simple plugin to add custom functionality to TinyMCE.
 * Version: 1.0.0
 * Author: Your Name
 */

// Plugin code will go here

Đăng Ký Plugin TinyMCE

Để plugin của bạn tương tác với TinyMCE, bạn cần sử dụng các hook và filter của WordPress. Cụ thể, chúng ta sẽ sử dụng admin_init để đăng ký plugin và mce_external_plugins để thêm plugin JavaScript vào TinyMCE.

Thêm đoạn code sau vào file plugin chính của bạn:

<?php
/**
 * Plugin Name: My Custom TinyMCE Plugin
 * Description: A simple plugin to add custom functionality to TinyMCE.
 * Version: 1.0.0
 * Author: Your Name
 */

add_action( 'admin_init', 'my_custom_tinymce_plugin_register' );

function my_custom_tinymce_plugin_register() {
    add_filter( 'mce_external_plugins', 'my_custom_tinymce_add_plugin' );
    add_filter( 'mce_buttons', 'my_custom_tinymce_add_buttons' );
}

function my_custom_tinymce_add_plugin( $plugin_array ) {
    $plugin_array['my_custom_button'] = plugin_dir_url( __FILE__ ) . 'js/my-custom-tinymce-plugin.js';
    return $plugin_array;
}

function my_custom_tinymce_add_buttons( $buttons ) {
    array_push( $buttons, 'my_custom_button' );
    return $buttons;
}

Trong đoạn code trên:

my_custom_tinymce_plugin_register là hàm được gọi khi hook admin_init được kích hoạt.
mce_external_plugins cho phép bạn thêm các plugin JavaScript bên ngoài vào TinyMCE. Chúng ta đăng ký một plugin có tên my_custom_button và trỏ nó đến file JavaScript của chúng ta (js/my-custom-tinymce-plugin.js).
mce_buttons cho phép bạn thêm các nút vào thanh công cụ TinyMCE. Chúng ta thêm nút my_custom_button vào danh sách các nút.

Tạo File JavaScript cho Plugin

Bây giờ, chúng ta cần tạo file JavaScript (js/my-custom-tinymce-plugin.js) chứa logic cho plugin TinyMCE của chúng ta. Tạo một thư mục có tên js trong thư mục plugin của bạn và sau đó tạo file my-custom-tinymce-plugin.js bên trong thư mục đó.

Dưới đây là một ví dụ đơn giản về nội dung của file JavaScript:

(function() {
    tinymce.PluginManager.add('my_custom_button', function(editor, url) {
        editor.addButton('my_custom_button', {
            text: 'My Button',
            icon: false,
            onclick: function() {
                editor.insertContent('<p>Hello, world!</p>');
            }
        });
    });
})();

Trong đoạn code trên:

Chúng ta sử dụng tinymce.PluginManager.add để đăng ký plugin của chúng ta với TinyMCE.
editor.addButton cho phép chúng ta thêm một nút vào thanh công cụ. Chúng ta đặt văn bản của nút là “My Button” và xác định một hàm onclick sẽ được gọi khi nút được nhấp.
Hàm onclick chèn nội dung HTML (<p>Hello, world!</p>) vào trình soạn thảo khi nút được nhấp.

Kích Hoạt Plugin WordPress

Bây giờ, hãy kích hoạt plugin “My Custom TinyMCE Plugin” trong bảng điều khiển WordPress của bạn. Sau khi kích hoạt, hãy mở một trang hoặc bài viết mới và bạn sẽ thấy nút “My Button” mới trên thanh công cụ TinyMCE.

Khi bạn nhấp vào nút “My Button”, đoạn văn bản “Hello, world!” sẽ được chèn vào trình soạn thảo.

Tùy Chỉnh Nâng Cao

Bạn có thể tùy chỉnh plugin TinyMCE của mình theo nhiều cách khác nhau để đáp ứng các yêu cầu cụ thể. Dưới đây là một số ví dụ:

Thêm Biểu Tượng: Thay vì sử dụng văn bản, bạn có thể thêm một biểu tượng cho nút của mình bằng cách sử dụng thuộc tính icon trong editor.addButton. Bạn có thể sử dụng các biểu tượng có sẵn của TinyMCE hoặc tạo biểu tượng tùy chỉnh của riêng bạn.
Sử Dụng Hộp Thoại: Bạn có thể tạo một hộp thoại tùy chỉnh để cho phép người dùng nhập dữ liệu hoặc chọn các tùy chọn trước khi chèn nội dung vào trình soạn thảo. Sử dụng API editor.windowManager.open để mở hộp thoại.
Thêm Trình Đơn: Bạn có thể thêm một trình đơn tùy chỉnh vào thanh công cụ TinyMCE bằng cách sử dụng API editor.addMenuItem.

Ví dụ: Thêm Biểu Tượng

editor.addButton('my_custom_button', {
    icon: 'code', // Sử dụng biểu tượng "code" có sẵn của TinyMCE
    onclick: function() {
        editor.insertContent('<pre><code>Your code here</code></pre>');
    }
});

Ví dụ: Sử Dụng Hộp Thoại

editor.addButton('my_custom_button', {
    text: 'Insert Code',
    onclick: function() {
        editor.windowManager.open({
            title: 'Insert Code',
            body: [
                {type: 'textbox', name: 'code', label: 'Code'}
            ],
            onsubmit: function(e) {
                editor.insertContent('<pre><code>' + e.data.code + '</code></pre>');
            }
        });
    }
});

Khắc Phục Sự Cố và Gỡ Lỗi

Khi phát triển plugin TinyMCE, bạn có thể gặp phải một số vấn đề. Dưới đây là một số mẹo để khắc phục sự cố và gỡ lỗi:

Kiểm tra Console JavaScript: Sử dụng console JavaScript của trình duyệt để kiểm tra các lỗi hoặc cảnh báo.
Xóa Cache: Đôi khi, các thay đổi trong plugin của bạn có thể không được phản ánh do cache. Hãy thử xóa cache của trình duyệt và WordPress.
Kiểm tra Plugin Khác: Đảm bảo rằng plugin của bạn không xung đột với các plugin khác. Hãy thử tắt các plugin khác để xem liệu nó có giải quyết được vấn đề hay không.
Bật WP_DEBUG: Bật chế độ WP_DEBUG trong file wp-config.php để hiển thị các lỗi PHP.

Chúc bạn thành công trong việc tạo plugin TinyMCE tùy chỉnh cho WordPress của mình!

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