Using TinyMCE Editor in WordPress [Hướng dẫn] / WordPress

Although they may not know its name, every WordPress user is familiar with Editor TinyMCE. It’s the editor you use when you create or edit your content – the editor has buttons for making text bold, headings, text alignment, etc. That’s what we’ll see in the next section. this article, and I’ll show you how can you add function and how can you use it in your plugin.

The editor is built on a platform-independent Javascript system called TinyMCE, which is used in a number of Web projects. It has a great API that WordPress allows you to access to create your own buttons and add it to other locations in WordPress.

More available buttons

WordPress uses some of the options available in TinyMCE to disable specific buttons – such as superscripts, subscriptions, and horizontal rules – to clean up the interface. They can be re-added without too much fuss.

The first step is to create a plugin. Take a look at the WordPress codex on how to do that. In short, you can get it by creating a folder named ‘my-mce-plugin’ in wp-content/plugins folder. Create a file with the same name, with the PHP extension: my-mce-plugin.php.

Inside that file paste the following:

 
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 $;  
 
For which buttons can be added and what they are called, see the list found in the TinyMCE documentation for controls.
Create our own buttons
How about creating our own buttons from scratch?  Many websites that use Prism for code highlighting use a very semantic approach to code snippets.  You must wrap your code in  và
 thẻ, một cái gì đó như thế này:
$ biến = 'giá trị'
Let's create a button that will do this for us!
This is a three-step process.  You will need to add a button, load the javascript file, and actually write the contents of the Javascript file.  Where to start!
Adding a button and loading a Javascript file is pretty straightforward, here's the code I used to get it done:
 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;  
When I see tutorials on this, I usually see 2 problems.
They neglected to mention it button name added in pre_code_add_button() function must be same as key for $plugin_array variable in pre_code_add_javascript() function.  We will also need use the same string in our Javascript after that.
Some tutorials also use the additional admin_head hook to wrap things up.  While this will work, it's not required, and since the Codex doesn't use it, it should probably be avoided.
The next step is to write some Javascript to implement our function.  This is what I used to get 
 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(content + "n");  );  );  ) ();
Most of this is dictated by how the TinyMCE plugin is coded, you can find some info on that in the TinyMCE documentation.  Now, all you need to know is your button name (pre_code_button) should be used in lines 2 and 3. The value of "text" in line 4 will be displayed if you don't use the icon (we'll look at adding an icon in a moment).
The onclick method tells what the button does when it is clicked.  I want to use it to wrap selected text in the HTML structure discussed earlier.
Selected text can be obtained using tinyMCE.activeEditor.selection.getContent ().  Then I wrap the elements around it and insert it, replacing the highlighted content with the new element.  I also added a new line so that I can easily start writing after the code element.
If you want to use an icon, I recommend choosing one from the Dashicons set that ships with WordPress.  The Developer Reference has a great tool to find icons and their CSS/HTML/Glyph.  Find the code symbol and note the unicode below it: f485.
We will need to attach the style sheet to our plugin and then add a simple style to display our icon.  First, let's add our styles to 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__));  
Go back to Javascript and next to the icon in the addButton function, replace “false” with a class you want your button to have - I used pre_code_button.
Now create a style.css file in your plugin folder and add the following CSS:
 i.mce-i-pre_code_button: trước font-family: dashicons; nội dung: " f485";  
 
Note that the button will receive mce-i- [lớp của bạn ở đây] class that you can use to target and add styles.  Specify the font as dash and the body using the unicode value from the previous one.
Use TinyMCE elsewhere
Plugins usually generate textareas to enter longer text, Wouldn't it be great if we could use TinyMCE there?  Of course it's possible, and it's pretty easy.  The wp_editor() function allows us to output a location anywhere in the admin, here's what it looks like:
wp_editor ($ init_content, $ Element_id, $ settings);
The first parameter sets the initial content for the box.  This can be used to load an option from the database, for example.  The second parameter sets the ID of the HTML element.  The third parameter is a series of settings.  To read about the exact settings you can use, see the wp-editor documentation.
The most important setting is textarea_name.  This resides the name attribute of the textarea element, allowing you to save data easily.  This is how my editor looks when used in an options page:
$ settings = mảng ('textarea_name' => 'người mua_bio');
wp_editor (get_option ('người mua_bio'), 'người mua_bio', $ settings);
This is equivalent to writing the following code, which will result in a simple textarea:
<?php get_option( 'buyer_bio' ) ??>
Conclusion
The TinyMCE editor is a user-friendly way to give users more flexibility when entering content.  It allows people who don't want to format their content to simply import the content and work with it, and those who want to learn about it to spend as much time as they need to get the content right.
Creating new buttons and functions can be done in a very modular way and we have only scratched the surface of the possibilities.  If you know of a particularly good TinyMCE plugin or a use case that has helped you a lot, let us know in the comments below!