WordPress có sử dụng TinyMCE không?
|
Nếu bạn là nhà phát triển WordPress, thì đôi khi bạn có thể bắt gặp việc tùy chỉnh hoặc mở rộng Trình chỉnh sửa trực quan WordPress. Ví dụ: bạn có thể muốn thêm một nút vào thanh công cụ của Trình soạn thảo trực quan để cho phép khách hàng của bạn dễ dàng chèn một hộp văn bản hoặc nút kêu gọi hành động mà không cần viết bất kỳ mã HTML nào. Trong bài viết này, chúng tôi sẽ chỉ cho bạn cách tạo plugin TinyMCE trong WordPress Show  Yêu cầuHướng dẫn này dành cho người dùng nâng cao. Nếu bạn là người dùng cấp độ mới bắt đầu chỉ muốn mở rộng trình chỉnh sửa trực quan, vui lòng xem plugin TinyMCE Advanced hoặc xem các mẹo này về cách sử dụng trình chỉnh sửa trực quan WordPress Đối với hướng dẫn này, bạn sẽ cần các kỹ năng mã hóa cơ bản, truy cập vào bản cài đặt WordPress nơi bạn có thể kiểm tra nó Đó là một thực tế tồi khi phát triển các plugin trên một trang web trực tiếp. Một lỗi nhỏ trong mã có thể khiến trang web của bạn không thể truy cập được. Nhưng nếu bạn phải làm điều đó trên một trang web trực tiếp, thì ít nhất hãy sao lưu WordPress trước Tạo plugin TinyMCE đầu tiên của bạnChúng tôi sẽ bắt đầu bằng cách tạo một plugin WordPress để đăng ký nút thanh công cụ TinyMCE tùy chỉnh của chúng tôi. Khi được nhấp vào, nút này sẽ cho phép người dùng thêm liên kết với lớp CSS tùy chỉnh Mã nguồn sẽ được cung cấp đầy đủ ở cuối bài viết này, nhưng cho đến lúc đó, hãy tạo plugin theo từng bước Trước tiên, bạn cần tạo một thư mục trong thư mục class TinyMCE_Custom_Link_Class {
/**
* Constructor. Called when the plugin is initialised.
*/
function __construct() {
}
}
$tinymce_custom_link_class = new TinyMCE_Custom_Link_Class;
1 của bản cài đặt WordPress của bạn. Đặt tên cho thư mục này là class TinyMCE_Custom_Link_Class {
/**
* Constructor. Called when the plugin is initialised.
*/
function __construct() {
}
}
$tinymce_custom_link_class = new TinyMCE_Custom_Link_Class;
2Từ đây, chúng tôi sẽ bắt đầu thêm mã plugin của mình Tiêu đề pluginTạo một tệp mới trong thư mục plugin chúng tôi vừa tạo và đặt tên cho tệp này là class TinyMCE_Custom_Link_Class {
/**
* Constructor. Called when the plugin is initialised.
*/
function __construct() {
}
}
$tinymce_custom_link_class = new TinyMCE_Custom_Link_Class;
3. Thêm mã này vào tệp và lưu nó/** * Plugin Name: TinyMCE Custom Link Class * Plugin URI: http://wpbeginner.com * Version: 1.0 * Author: WPBeginner * Author URI: https://www.wpbeginner.com * Description: A simple TinyMCE Plugin to add a custom link class in the Visual Editor * License: GPL2 */ Đây chỉ là một bình luận PHP, cho WordPress biết tên của plugin, cũng như tác giả và mô tả Trong khu vực quản trị WordPress, kích hoạt plugin mới của bạn bằng cách đi tới Plugin > Plugin đã cài đặt, sau đó nhấp vào Kích hoạt bên cạnh plugin Lớp liên kết tùy chỉnh TinyMCE Thiết lập lớp plugin của chúng tôiNếu hai plugin WordPress có chức năng trùng tên thì điều này sẽ gây ra lỗi. Chúng ta sẽ tránh vấn đề này bằng cách gói các hàm của chúng ta trong một lớp class TinyMCE_Custom_Link_Class {
/**
* Constructor. Called when the plugin is initialised.
*/
function __construct() {
}
}
$tinymce_custom_link_class = new TinyMCE_Custom_Link_Class;
Điều này tạo ra lớp PHP của chúng tôi, cùng với một cấu trúc, được gọi khi chúng tôi đến dòng class TinyMCE_Custom_Link_Class {
/**
* Constructor. Called when the plugin is initialised.
*/
function __construct() {
}
}
$tinymce_custom_link_class = new TinyMCE_Custom_Link_Class;
4Bất kỳ chức năng nào chúng tôi thêm vào bên trong lớp này không được xung đột với các plugin WordPress khác Bắt đầu thiết lập Plugin TinyMCE của chúng tôiTiếp theo, chúng tôi cần nói với TinyMCE rằng chúng tôi có thể muốn thêm nút tùy chỉnh của mình vào thanh công cụ của Visual Editor. Để làm điều này, chúng ta có thể sử dụng các hành động của WordPress – cụ thể là hành động class TinyMCE_Custom_Link_Class {
/**
* Constructor. Called when the plugin is initialised.
*/
function __construct() {
}
}
$tinymce_custom_link_class = new TinyMCE_Custom_Link_Class;
5Thêm mã sau vào chức năng class TinyMCE_Custom_Link_Class {
/**
* Constructor. Called when the plugin is initialised.
*/
function __construct() {
}
}
$tinymce_custom_link_class = new TinyMCE_Custom_Link_Class;
6 của plugin của bạn________số 8Điều này kiểm tra xem chúng ta có đang ở trong giao diện Quản trị WordPress không. Nếu đúng như vậy, thì nó sẽ yêu cầu WordPress chạy hàm class TinyMCE_Custom_Link_Class {
/**
* Constructor. Called when the plugin is initialised.
*/
function __construct() {
}
}
$tinymce_custom_link_class = new TinyMCE_Custom_Link_Class;
7 bên trong lớp của chúng ta khi WordPress hoàn thành quy trình tải ban đầuTiếp theo, thêm chức năng class TinyMCE_Custom_Link_Class {
/**
* Constructor. Called when the plugin is initialised.
*/
function __construct() {
}
}
$tinymce_custom_link_class = new TinyMCE_Custom_Link_Class;
7class TinyMCE_Custom_Link_Class {
/**
* Constructor. Called when the plugin is initialised.
*/
function __construct() {
}
}
$tinymce_custom_link_class = new TinyMCE_Custom_Link_Class;
1Điều này kiểm tra xem người dùng WordPress đã đăng nhập hiện tại có thể chỉnh sửa Bài đăng hoặc Trang không. Nếu họ không thể, thì chẳng ích gì khi đăng ký Plugin TinyMCE của chúng tôi cho Người dùng đó, vì họ sẽ không bao giờ nhìn thấy Trình chỉnh sửa trực quan Sau đó, chúng tôi kiểm tra xem người dùng có đang sử dụng Trình chỉnh sửa trực quan hay không, vì một số người dùng WordPress tắt tính năng này thông qua Người dùng > Hồ sơ của bạn. Một lần nữa, nếu người dùng không sử dụng Visual Editor, chúng tôi trả lại (thoát) chức năng, vì chúng tôi không cần phải làm gì khác Cuối cùng, chúng tôi thêm hai Bộ lọc WordPress – class TinyMCE_Custom_Link_Class {
/**
* Constructor. Called when the plugin is initialised.
*/
function __construct() {
}
}
$tinymce_custom_link_class = new TinyMCE_Custom_Link_Class;
9 và if ( is_admin() ) {
add_action( 'init', array( $this, 'setup_tinymce_plugin' ) );
}
0, để gọi các hàm sẽ tải tệp Javascript cần thiết cho TinyMCE và thêm một nút vào thanh công cụ TinyMCEĐăng ký tệp và nút Javascript cho Trình chỉnh sửa trực quanHãy tiếp tục và thêm hàm if ( is_admin() ) {
add_action( 'init', array( $this, 'setup_tinymce_plugin' ) );
}
1class TinyMCE_Custom_Link_Class {
/**
* Constructor. Called when the plugin is initialised.
*/
function __construct() {
}
}
$tinymce_custom_link_class = new TinyMCE_Custom_Link_Class;
5Hàm này cho TinyMCE biết rằng nó cần tải các tệp Javascript được lưu trữ trong mảng if ( is_admin() ) {
add_action( 'init', array( $this, 'setup_tinymce_plugin' ) );
}
2. Các tệp Javascript này sẽ cho TinyMCE biết phải làm gìChúng tôi cũng cần thêm một số mã vào chức năng if ( is_admin() ) {
add_action( 'init', array( $this, 'setup_tinymce_plugin' ) );
}
3, để nói với TinyMCE về nút mà chúng tôi muốn thêm vào thanh công cụclass TinyMCE_Custom_Link_Class {
/**
* Constructor. Called when the plugin is initialised.
*/
function __construct() {
}
}
$tinymce_custom_link_class = new TinyMCE_Custom_Link_Class;
8Thao tác này sẽ đẩy hai mục vào dãy nút TinyMCE. dấu phân cách (. ) và tên lập trình của nút của chúng tôi ( if ( is_admin() ) {
add_action( 'init', array( $this, 'setup_tinymce_plugin' ) );
}
4)Lưu plugin của bạn, sau đó chỉnh sửa Trang hoặc Bài đăng để xem Trình chỉnh sửa trực quan. Rất có thể, thanh công cụ hiện không hiển thị Đừng lo lắng - nếu chúng tôi sử dụng bảng điều khiển trình kiểm tra của trình duyệt web, chúng tôi sẽ thấy rằng TinyMCE đã tạo ra lỗi 404 và thông báo cho chúng tôi biết rằng TinyMCE không thể tìm thấy tệp Javascript của chúng tôi Điều đó tốt - điều đó có nghĩa là chúng tôi đã đăng ký thành công plugin tùy chỉnh TinyMCE của mình và bây giờ cần tạo tệp Javascript để cho TinyMCE biết phải làm gì Tạo Plugin JavascriptTạo một tệp mới trong thư mục if ( is_admin() ) {
add_action( 'init', array( $this, 'setup_tinymce_plugin' ) );
}
5 của bạn và đặt tên là if ( is_admin() ) {
add_action( 'init', array( $this, 'setup_tinymce_plugin' ) );
}
6. Thêm mã này vào tệp js của bạnclass TinyMCE_Custom_Link_Class {
/**
* Constructor. Called when the plugin is initialised.
*/
function __construct() {
}
}
$tinymce_custom_link_class = new TinyMCE_Custom_Link_Class;
2Điều này gọi lớp Trình quản lý plugin TinyMCE mà chúng ta có thể sử dụng để thực hiện một số hành động liên quan đến plugin TinyMCE. Cụ thể, chúng tôi đang thêm plugin của mình vào TinyMCE bằng chức năng if ( is_admin() ) {
add_action( 'init', array( $this, 'setup_tinymce_plugin' ) );
}
7Điều này chấp nhận hai mục; Nếu bạn đã quen với khái niệm hàm trong mã hóa, thì hàm ẩn danh chỉ đơn giản là một hàm không có tên. Ví dụ: if ( is_admin() ) {
add_action( 'init', array( $this, 'setup_tinymce_plugin' ) );
}
9 là một chức năng mà chúng ta có thể gọi ở một nơi khác trong mã của mình bằng cách sử dụng class TinyMCE_Custom_Link_Class {
/**
* Constructor. Called when the plugin is initialised.
*/
function __construct() {
}
}
$tinymce_custom_link_class = new TinyMCE_Custom_Link_Class;
10Với một hàm ẩn danh, chúng ta không thể gọi hàm đó ở một nơi nào khác trong mã của mình – nó chỉ được gọi tại thời điểm hàm class TinyMCE_Custom_Link_Class {
/**
* Constructor. Called when the plugin is initialised.
*/
function __construct() {
}
}
$tinymce_custom_link_class = new TinyMCE_Custom_Link_Class;
11 được gọiLưu tệp Javascript của bạn, sau đó chỉnh sửa Trang hoặc Bài đăng để xem Trình chỉnh sửa trực quan. Nếu mọi thứ hoạt động, bạn sẽ thấy thanh công cụ Ngay bây giờ, nút của chúng tôi chưa được thêm vào thanh công cụ đó. Đó là bởi vì chúng tôi chỉ nói với TinyMCE rằng chúng tôi là một plugin tùy chỉnh. Bây giờ chúng ta cần nói cho TinyMCE biết phải làm gì – nghĩa là thêm một nút vào thanh công cụ Cập nhật tệp Javascript của bạn, thay thế mã hiện tại của bạn bằng mã sau class TinyMCE_Custom_Link_Class {
/**
* Constructor. Called when the plugin is initialised.
*/
function __construct() {
}
}
$tinymce_custom_link_class = new TinyMCE_Custom_Link_Class;
8Lưu ý chức năng ẩn danh của chúng tôi có hai đối số. Đầu tiên là phiên bản class TinyMCE_Custom_Link_Class {
/**
* Constructor. Called when the plugin is initialised.
*/
function __construct() {
}
}
$tinymce_custom_link_class = new TinyMCE_Custom_Link_Class;
12 – đây là TinyMCE Visual Editor. Theo cách tương tự, chúng ta có thể gọi các chức năng khác nhau trên class TinyMCE_Custom_Link_Class {
/**
* Constructor. Called when the plugin is initialised.
*/
function __construct() {
}
}
$tinymce_custom_link_class = new TinyMCE_Custom_Link_Class;
13, chúng ta cũng có thể gọi các chức năng khác nhau trên class TinyMCE_Custom_Link_Class {
/**
* Constructor. Called when the plugin is initialised.
*/
function __construct() {
}
}
$tinymce_custom_link_class = new TinyMCE_Custom_Link_Class;
12. Trong trường hợp này, chúng tôi đang gọi hàm class TinyMCE_Custom_Link_Class {
/**
* Constructor. Called when the plugin is initialised.
*/
function __construct() {
}
}
$tinymce_custom_link_class = new TinyMCE_Custom_Link_Class;
15 để thêm một nút vào thanh công cụLưu tệp Javascript của bạn và quay lại Trình chỉnh sửa trực quan của bạn. Thoạt nhìn, dường như không có gì thay đổi. Tuy nhiên, nếu bạn di con trỏ chuột qua bên phải của biểu tượng ngoài cùng bên phải của hàng trên cùng, bạn sẽ thấy chú giải công cụ xuất hiện Chúng tôi đã thêm thành công một nút vào thanh công cụ nhưng nút này cần có hình ảnh. Thêm tham số sau vào hàm class TinyMCE_Custom_Link_Class {
/**
* Constructor. Called when the plugin is initialised.
*/
function __construct() {
}
}
$tinymce_custom_link_class = new TinyMCE_Custom_Link_Class;
15, bên dưới dòng class TinyMCE_Custom_Link_Class {
/**
* Constructor. Called when the plugin is initialised.
*/
function __construct() {
}
}
$tinymce_custom_link_class = new TinyMCE_Custom_Link_Class;
17/** * Plugin Name: TinyMCE Custom Link Class * Plugin URI: http://wpbeginner.com * Version: 1.0 * Author: WPBeginner * Author URI: https://www.wpbeginner.com * Description: A simple TinyMCE Plugin to add a custom link class in the Visual Editor * License: GPL2 */5 class TinyMCE_Custom_Link_Class {
/**
* Constructor. Called when the plugin is initialised.
*/
function __construct() {
}
}
$tinymce_custom_link_class = new TinyMCE_Custom_Link_Class;
18 là URL của plugin của chúng tôi. Điều này rất hữu ích nếu chúng tôi muốn tham chiếu tệp hình ảnh trong thư mục plugin của mình, vì chúng tôi có thể nối tên tệp hình ảnh vào URL. Trong trường hợp này, chúng tôi sẽ cần một hình ảnh có tên là class TinyMCE_Custom_Link_Class {
/**
* Constructor. Called when the plugin is initialised.
*/
function __construct() {
}
}
$tinymce_custom_link_class = new TinyMCE_Custom_Link_Class;
19 trong thư mục plugin của chúng tôi. Sử dụng biểu tượng bên dướiTải lại Trình chỉnh sửa trực quan của chúng tôi và bây giờ bạn sẽ thấy nút của mình có biểu tượng Xác định một lệnh để chạyNgay bây giờ, nếu bạn nhấp vào nút, sẽ không có gì xảy ra. Hãy thêm một lệnh vào TinyMCE để cho nó biết phải làm gì khi nhấp vào nút của chúng ta Trong tệp Javascript của chúng tôi, hãy thêm đoạn mã sau vào bên dưới phần cuối của phần class TinyMCE_Custom_Link_Class {
/**
* Constructor. Called when the plugin is initialised.
*/
function __construct() {
}
}
$tinymce_custom_link_class = new TinyMCE_Custom_Link_Class;
50/** * Plugin Name: TinyMCE Custom Link Class * Plugin URI: http://wpbeginner.com * Version: 1.0 * Author: WPBeginner * Author URI: https://www.wpbeginner.com * Description: A simple TinyMCE Plugin to add a custom link class in the Visual Editor * License: GPL2 */9 Tải lại Trình chỉnh sửa trực quan của chúng tôi, nhấp vào nút và một cảnh báo sẽ xuất hiện xác nhận chúng tôi vừa nhấp vào nút Hãy thay thế cảnh báo bằng lời nhắc, hỏi người dùng về liên kết mà họ muốn bao quanh văn bản đã chọn trong Trình chỉnh sửa trực quan class TinyMCE_Custom_Link_Class {
/**
* Constructor. Called when the plugin is initialised.
*/
function __construct() {
}
}
$tinymce_custom_link_class = new TinyMCE_Custom_Link_Class;
0Khối mã này thực hiện một số hành động Đầu tiên, chúng tôi kiểm tra xem người dùng đã chọn một số văn bản để được liên kết trong Trình chỉnh sửa trực quan hay chưa. Nếu không, họ sẽ thấy một cảnh báo yêu cầu họ chọn một số văn bản để liên kết Tiếp theo, chúng tôi yêu cầu họ nhập một liên kết, kiểm tra lại xem họ đã nhập chưa. Nếu họ hủy hoặc không nhập gì, chúng tôi không làm gì khác Cuối cùng, chúng tôi chạy hàm class TinyMCE_Custom_Link_Class {
/**
* Constructor. Called when the plugin is initialised.
*/
function __construct() {
}
}
$tinymce_custom_link_class = new TinyMCE_Custom_Link_Class;
51 trên trình soạn thảo TinyMCE, cụ thể là chạy tác vụ class TinyMCE_Custom_Link_Class {
/**
* Constructor. Called when the plugin is initialised.
*/
function __construct() {
}
}
$tinymce_custom_link_class = new TinyMCE_Custom_Link_Class;
52. Thao tác này sẽ thay thế văn bản đã chọn bằng mã HTML của chúng tôi, mã này bao gồm một liên kết neo với class=”button”, sử dụng văn bản mà người dùng đã chọnNếu mọi thứ đã hoạt động, bạn sẽ thấy văn bản đã chọn của mình hiện được liên kết trong chế độ xem Trình soạn thảo trực quan và Văn bản, với lớp được đặt thành class TinyMCE_Custom_Link_Class {
/**
* Constructor. Called when the plugin is initialised.
*/
function __construct() {
}
}
$tinymce_custom_link_class = new TinyMCE_Custom_Link_Class;
53Tóm lượcChúng tôi đã tạo thành công plugin WordPress có thêm nút vào trình chỉnh sửa trực quan TinyMCE trong WordPress. Hướng dẫn này cũng bao gồm một số kiến thức cơ bản về API TinyMCE và bộ lọc WordPress có sẵn cho tích hợp TinyMCE Chúng tôi đã thêm mã để khi người dùng nhấp vào nút tùy chỉnh của chúng tôi, họ sẽ được nhắc chọn một số văn bản trong Trình chỉnh sửa trực quan, sau đó họ có thể liên kết văn bản này với một URL mà họ chọn. Cuối cùng, plugin của chúng tôi sẽ thay thế văn bản đã chọn bằng một phiên bản được liên kết có chứa một lớp CSS tùy chỉnh có tên là class TinyMCE_Custom_Link_Class {
/**
* Constructor. Called when the plugin is initialised.
*/
function __construct() {
}
}
$tinymce_custom_link_class = new TinyMCE_Custom_Link_Class;
53Chúng tôi hy vọng hướng dẫn này đã giúp bạn tìm hiểu cách tạo plugin WordPress TinyMCE. Bạn cũng có thể muốn xem hướng dẫn của chúng tôi về cách tạo plugin WordPress dành riêng cho trang web Nếu bạn thích bài viết này, vui lòng đăng ký Kênh YouTube của chúng tôi để xem các video hướng dẫn về WordPress. Bạn cũng có thể tìm thấy chúng tôi trên Twitter và Facebook WordPress vẫn sử dụng TinyMCE chứ?Trình soạn thảo trực quan mặc định trong Wordpress
. Nếu bạn muốn sử dụng phiên bản TinyMCE gần với bản phát hành Self-hosted đầy đủ tính năng hơn, thì TinyMCE Advanced là một lựa chọn tuyệt vời. A slimmed down version of TinyMCE is the default "Visual Editor" in WordPress. If you want to use a version of TinyMCE closer to the full-featured Self-hosted release, TinyMCE Advanced is a great option.
TinyMCE trong WordPress là gì?TinyMCE Advanced là một plugin WordPress do Andrew Ozz xây dựng sẽ cho phép bạn thêm, xóa và sắp xếp các nút được hiển thị trên thanh công cụ của Trình soạn thảo trực quan. It includes 15 plugins for TinyMCE that are automatically enabled or disabled depending on what buttons are chosen. Some of the features added by this plugin.
Gutenberg có sử dụng TinyMCE không?Gutenberg tiếp tục sử dụng TinyMCE để chỉnh sửa văn bản đa dạng thức và có một khối Cổ điển có một số giao diện người dùng TinyMCE. Tuy nhiên, Gutenberg nói chung là một trải nghiệm chỉnh sửa rất khác dựa trên khái niệm khối và tập trung nhiều hơn vào bố cục.
TinyMCE dùng để làm gì?TinyMCE là trình soạn thảo văn bản đa dạng thức trực tuyến được phát hành dưới dạng phần mềm mã nguồn mở theo Giấy phép MIT. Nó có khả năng chuyển đổi các trường vùng văn bản HTML hoặc các phần tử HTML khác thành các phiên bản trình soạn thảo . |
