Sử dụng Trình chỉnh sửa TinyMCE trong WordPress [Hướng dẫn]

Mặc dù họ có thể không biết tên của nó, nhưng mọi người sử dụng WordPress đều quen thuộc với Biên tập viên TinyMCE. Đó là trình chỉnh sửa bạn sử dụng khi bạn tạo hoặc chỉnh sửa nội dung của mình - trình chỉnh sửa có các nút để tạo văn bản in đậm, tiêu đề, căn chỉnh văn bản, v.v. Đó là những gì chúng ta sẽ xem trong bài viết này, và tôi sẽ cho bạn thấy làm thế nào bạn có thể thêm chức năng và làm thế nào bạn có thể sử dụng nó trong plugin của bạn.

Trình chỉnh sửa được xây dựng trên một hệ thống Javascript độc lập với nền tảng có tên TinyMCE, được sử dụng trong một số dự án trên Web. Nó có một API tuyệt vời mà WordPress cho phép bạn truy cập để tạo các nút của riêng bạn và thêm nó vào các vị trí khác trong WordPress.

Thêm các nút có sẵn

WordPress sử dụng một số tùy chọn có sẵn trong TinyMCE để vô hiệu hóa các nút cụ thể - chẳng hạn như siêu ký tự, đăng ký và quy tắc ngang - để dọn sạch giao diện. Họ có thể được thêm lại mà không quá phiền phức.

Bước đầu tiên là tạo một plugin. Hãy xem codex WordPress về cách làm điều đó. Tóm lại, bạn có thể nhận được bằng cách tạo một thư mục có tên 'my-mce-plugin' trong thư mục wp-content / plugin. Tạo một tệp có cùng tên, với phần mở rộng PHP: my-mce-plugin.php.

Bên trong tập tin đó dán như sau:

  
Sau khi hoàn thành, bạn sẽ có thể chọn plugin này trong WordPress và kích hoạt nó. Tất cả các mã từ bây giờ có thể được dán trong tập tin này.
 
Vì vậy, trở lại cho phép một số nút tích hợp nhưng ẩn. Đây là mã cho phép chúng tôi kích hoạt 3 nút tôi đã đề cập:
 
 add_filter ('mce_buttons_2', 'my_tinymce_buttons'); chức năng my_tinymce_buttons (nút $) $ nút [] = 'siêu ký tự'; $ nút [] = 'đăng ký'; $ nút [] = hr; trả về các nút $;  
 
 
 
Để biết nút nào có thể được thêm và chúng được gọi là gì, hãy xem danh sách được tìm thấy trong tài liệu TinyMCE để kiểm soát.
 
Tạo các nút riêng của chúng tôi
 
Làm thế nào về việc tạo các nút riêng của chúng tôi từ đầu? Nhiều trang web sử dụng Prism để làm nổi bật mã sử dụng cách tiếp cận rất ngữ nghĩa để đánh dấu các đoạn mã. Bạn phải bọc mã của bạn trong  và 
 thẻ, một cái gì đó như thế này:
 
$ biến = 'giá trị'
 
Hãy tạo một nút sẽ làm điều này cho chúng ta!
 
Đây là một quá trình ba bước. Bạn sẽ cần thêm một nút, tải tệp javascript và thực sự viết nội dung của tệp Javascript. Băt đâu nao!
 
Thêm nút và tải tệp Javascript khá đơn giản, đây là mã tôi đã sử dụng để hoàn thành:
 
 add_filter ('mce_buttons', 'pre_code_add_button'); chức năng pre_code_add_button (nút $) $ nút [] = 'pre_code_button'; trả về các nút $;  add_filter ('mce_external_plugins', 'pre_code_add_javascript'); chức năng pre_code_add_javascript ($ plugin_array) $ plugin_array ['pre_code_button'] = get_template_directory_uri (). '/tinymce-plugin.js'; trả lại $ plugin_array;  
 
Khi tôi thấy hướng dẫn về điều này, tôi thường thấy 2 vấn đề.
 
Họ bỏ bê đề cập đến điều đó tên nút được thêm vào trong hàm pre_code_add_button () phải giống với khóa cho biến $ plugin_array trong hàm pre_code_add_javascript (). Chúng tôi cũng sẽ cần phải sử dụng cùng một chuỗi trong Javascript của chúng tôi sau này.
 
Một số hướng dẫn cũng sử dụng hook admin_head bổ sung để kết thúc mọi thứ. Mặc dù điều này sẽ hoạt động, nhưng nó không bắt buộc và vì Codex không sử dụng nó, có lẽ nên tránh.
 
Bước tiếp theo là viết một số Javascript để thực hiện chức năng của chúng tôi. Đây là những gì tôi đã sử dụng để có được 
 và  thẻ xuất tất cả cùng một lúc.
 
 (function () tinymce.PluginManager.add ('pre_code_button', function (Editor, url) Editor.addButton ('pre_code_button', text: 'Prism', icon: false, onclick: function () var đã chọn tinyMCE.activeEditor.selection.getContent (); var content = '
'+ đã chọn +'
'; Editor.insertContent (nội dung + "\ n"); ); ); ) (); 
 
Hầu hết điều này được quyết định bởi cách plugin TinyMCE được mã hóa, bạn có thể tìm thấy một số thông tin về điều đó trong tài liệu TinyMCE. Bây giờ, tất cả những gì bạn cần biết là tên nút của bạn (pre_code_button) nên được sử dụng trong dòng 2 và 3. Giá trị của "văn bản" trong dòng 4 sẽ được hiển thị nếu bạn không sử dụng biểu tượng (chúng tôi sẽ xem xét thêm biểu tượng trong giây lát).
 
Phương thức onclick cho biết nút này làm gì khi được nhấp. Tôi muốn sử dụng nó để bọc văn bản đã chọn trong cấu trúc HTML đã thảo luận trước đó.
 
Văn bản được chọn có thể được lấy bằng cách sử dụng tinyMCE.activeEditor.selection.getContent (). Sau đó, tôi bọc các phần tử xung quanh nó và chèn nó, thay thế nội dung được tô sáng bằng phần tử mới. Tôi cũng đã thêm một dòng mới để tôi có thể dễ dàng bắt đầu viết sau phần tử mã.
 
Nếu bạn muốn sử dụng một biểu tượng, tôi khuyên bạn nên chọn một biểu tượng từ bộ Dashicons sẽ giao hàng với WordPress. Tài liệu tham khảo dành cho nhà phát triển có một công cụ tuyệt vời để tìm các biểu tượng và CSS / HTML / Glyph của chúng. Tìm ký hiệu mã và lưu ý unicode bên dưới nó: f485.
 
Chúng tôi sẽ cần đính kèm biểu định kiểu vào plugin của chúng tôi và sau đó thêm một kiểu đơn giản để hiển thị biểu tượng của chúng tôi. Trước tiên, hãy thêm phong cách của chúng tôi vào WordPress:
 
 add_action ('admin_enqueue_scripts', 'pre_code_styles'); chức năng pre_code_styles () wp_enqueue_style ('pre_code_button', plugins_url ('/style.css', __FILE__));  
 
Quay trở lại Javascript và bên cạnh biểu tượng trong chức năng addButton, thay thế “sai” với một lớp bạn muốn nút của bạn có - Tôi đã sử dụng pre_code_button.
 
Bây giờ hãy tạo tệp style.css trong thư mục plugin của bạn và thêm CSS sau:
 
 i.mce-i-pre_code_button: trước font-family: dashicons; nội dung: "\ f485";  
 
 
 
Lưu ý rằng nút sẽ nhận được mce-i- [lớp của bạn ở đây] lớp mà bạn có thể sử dụng để nhắm mục tiêu và thêm kiểu. Chỉ định phông chữ là dấu gạch ngang và nội dung sử dụng giá trị unicode từ trước đó.
 
Sử dụng TinyMCE ở nơi khác
 
Plugin thường tạo textareas để nhập văn bản dài hơn, Sẽ thật tuyệt nếu chúng ta có thể sử dụng TinyMCE ở đó chứ? Tất nhiên là có thể, và nó khá dễ. Hàm wp_editor () cho phép chúng ta xuất một vị trí bất kỳ ở đâu trong quản trị viên, đây là giao diện của nó:
 
wp_editor ($ init_content, $ Element_id, $ settings);
 
Tham số đầu tiên đặt nội dung ban đầu cho hộp. Điều này có thể được sử dụng để tải một tùy chọn từ cơ sở dữ liệu, ví dụ. Tham số thứ hai đặt ID của phần tử HTML. Tham số thứ ba là một loạt các cài đặt. Để đọc về các cài đặt chính xác bạn có thể sử dụng, hãy xem tài liệu về trình soạn thảo wp.
 
Cài đặt quan trọng nhất là textarea_name. Điều này cư trú thuộc tính tên của phần tử textarea, cho phép bạn lưu dữ liệu dễ dàng. Đây là cách trình soạn thảo của tôi trông khi được sử dụng trong một trang tùy chọn:
 
$ settings = mảng ('textarea_name' => 'người mua_bio');
 
wp_editor (get_option ('người mua_bio'), 'người mua_bio', $ settings);
 
Điều này tương đương với việc viết mã sau đây, điều này sẽ dẫn đến một textarea đơn giản:
 
<?php get_option( 'buyer_bio' ) ?>
 
Phần kết luận
 
Trình chỉnh sửa TinyMCE là một cách thân thiện với người dùng, cho phép người dùng linh hoạt hơn khi nhập nội dung. Nó cho phép những người không muốn định dạng nội dung của họ chỉ cần nhập nội dung và thực hiện với nó, và những người muốn tìm hiểu về nó để dành nhiều thời gian như họ cần để có được nội dung phù hợp.
 
Tạo các nút và chức năng mới có thể được thực hiện theo cách rất mô-đun và chúng tôi chỉ mới tìm hiểu sơ qua về các khả năng. Nếu bạn biết về plugin TinyMCE đặc biệt tốt hoặc trường hợp sử dụng đã giúp bạn rất nhiều, hãy cho chúng tôi biết trong các nhận xét bên dưới!