---
description: https://help.edublogs.org/advanced-editor-tools-plugin/
---

# Advanced Editor full (ok)

Xem công cụ này :)\
[https://wordpress.org/plugins/black-studio-tinymce-widget/](https://wordpress.org/plugins/black-studio-tinymce-widget/)

Đọc thêm: [https://wordpress.org/plugins/tools-engine/](https://wordpress.org/plugins/tools-engine/)

### Filters whether a post is able to be edited in the block [editor](https://developer.wordpress.org/reference/hooks/use_block_editor_for_post/).

```
add_filter('use_block_editor_for_post', '__return_false');
```

Hoặc có thể dùng&#x20;

### Advanced Editor Tools

{% embed url="https://wordpress.org/plugins/tinymce-advanced/" %}

## Adding Custom Functionality to the WordPress Visual Editor

{% embed url="https://www.sitepoint.com/adding-custom-functionality-to-the-wordpress-visual-editor/" %}

## Adding Custom Functionality to the WordPress Visual Editor

* [Plugins](https://www.sitepoint.com/wordpress/plugins-wordpress/)

[![](https://uploads.sitepoint.com/wp-content/uploads/2015/06/1435171059tim-carr-96x96.jpg)](https://www.sitepoint.com/author/tcarr/)[Tim Carr](https://www.sitepoint.com/author/tcarr/)October 13, 2015Share

The content editor is a key part of WordPress. It allows users to create and manage their content, galleries and videos, in a _Visual_ WYSIWYG (what you see is what you get) view.

It also comes with a _Text_ view, which allows users to insert or amend HTML within their content.

The WordPress Visual Editor is powered by the [TinyMCE](http://www.tinymce.com/) editor control, which provides the WYSIWYG view, as well as the formatting buttons you see:

![TinyMCE visual editor](https://uploads.sitepoint.com/wp-content/uploads/2015/10/1444739951tinymce-1.png)

Thanks to the TinyMCE API and WordPress’ filter hooks, we can add our own functionality to the WordPress Visual Editor. Specifically, we’ll look at how to create and register a custom TinyMCE Plugin which wraps selected text in a CSS class.

6.2MHere's what happens when you run sudo rm -rf / in Linux?

### Creating the TinyMCE Plugin

In your WordPress website, create the `wp-content/plugins/tinymce-custom-class` folder.

We’ll store our plugin’s files here, so next create a file called `tinymce-custom-class.php`, using the following code:

```
/**
 * Plugin Name: TinyMCE Custom Class
 * Plugin URI: https://www.sitepoint.com
 * Version: 1.0
 * Author: Tim Carr
 * Author URI: http://www.n7studios.co.uk
 * Description: TinyMCE Plugin to wrap selected text in a custom CSS class, within the Visual Editor
 * License: GPL2
 */

class TinyMCE_Custom_Class {

    /**
    * Constructor. Called when the plugin is initialised.
    */
    function __construct() {

    }

}

$tinymce_custom_class = new TinyMCE_Custom_Class;
```

This gives WordPress some information about our Plugin, and sets up our construct, where we’ll register our TinyMCE actions and filters.

### WordPress TinyMCE Filters

TinyMCE provides two key filters for registering an element on the Visual Editor toolbar:

* `mce_external_plugins`: Used to load external TinyMCE plugins ([https://codex.wordpress.org/Plugin\_API/Filter\_Reference/mce\_external\_plugins](https://codex.wordpress.org/Plugin_API/Filter_Reference/mce_external_plugins))
* `mce_buttons`: Used to add/remove buttons to the TinyMCE toolbar ([https://codex.wordpress.org/Plugin\_API/Filter\_Reference/mce\_buttons,_mce\_buttons\_2,_&#x6D;ce\_buttons\_3,\_mce\_buttons\_4](https://codex.wordpress.org/Plugin_API/Filter_Reference/mce_buttons,_mce_buttons_2,_mce_buttons_3,_mce_buttons_4))

Before we call these filters, we want check we’re in the WordPress Administration screens. Add the following code to the `__construct`:

```
if ( is_admin() ) {
	add_action( 'init', array( &$this, 'setup_tinymce_plugin' ) );
}
```

Next, add the `setup_tinymce_plugin` function to perform some further checks:

```
/**
* Check if the current user can edit Posts or Pages, and is using the Visual Editor
* If so, add some filters so we can register our plugin
*/
function setup_tinymce_plugin() {

    // Check if the logged in WordPress User can edit Posts or Pages
    // If not, don't register our TinyMCE plugin
    if ( ! current_user_can( 'edit_posts' ) && ! current_user_can( 'edit_pages' ) ) {
        return;
    }

    // Check if the logged in WordPress User has the Visual Editor enabled
    // If not, don't register our TinyMCE plugin
    if ( get_user_option( 'rich_editing' ) !== 'true' ) {
        return;
    }

    // Setup some filters
    add_filter( 'mce_external_plugins', array( &$this, 'add_tinymce_plugin' ) );
    add_filter( 'mce_buttons', array( &$this, 'add_tinymce_toolbar_button' ) );

}
```

This checks if the current logged in WordPress user can edit Posts or Pages. If they can’t, there’s no point in registering our TinyMCE Plugin for that User, as they’ll never see the Visual Editor.

We then check if the user is using the Visual Editor, as some WordPress users turn this off via _Users > Your Profile_. Again, if the user is not using the Visual Editor, we return (exit) the function, as we don’t need to do anything else.

If the above checks pass, the two TinyMCE WordPress Filters are registered – `mce_external_plugins` and `mce_buttons`.

The first filter – `mce_external_plugins` – allows us to register the TinyMCE JavaScript Plugin file that will interact with the Visual Editor. Let’s add a function call for this filter, inside our class:

```
/**
 * Adds a TinyMCE plugin compatible JS file to the TinyMCE / Visual Editor instance
 *
 * @param array $plugin_array Array of registered TinyMCE Plugins
 * @return array Modified array of registered TinyMCE Plugins
 */
function add_tinymce_plugin( $plugin_array ) {

    $plugin_array['custom_class'] = plugin_dir_url( __FILE__ ) . 'tinymce-custom-class.js';
    return $plugin_array;

}
```

Here, we register a JavaScript file within the `$plugin_array`, which contains all TinyMCE JavaScript plugins.

The second filter – `mce_buttons` – tells TinyMCE that we’d like to register a button in the Visual Editor. Again, let’s add a function call for this filter, inside our class:

```
/**
 * Adds a button to the TinyMCE / Visual Editor which the user can click
 * to insert a custom CSS class.
 *
 * @param array $buttons Array of registered TinyMCE Buttons
 * @return array Modified array of registered TinyMCE Buttons
 */
function add_tinymce_toolbar_button( $buttons ) {

    array_push( $buttons, 'custom_class' );
    return $buttons;

}
```

This registers the programmatic name for our TinyMCE button (`custom_class`).

#### Creating the JavaScript Plugin

When we called `mce_external_plugins`, we referenced a JavaScript file. We now need to create that file, and add some JavaScript code to it. This will tell TinyMCE how to output the button, and what to do when it’s clicked.

Create a new file in the plugin folder called `tinymce-custom-class.js`, inserting the following code:

```
(function() {
    tinymce.PluginManager.add( 'custom_class', function( editor, url ) {
        // Add Button to Visual Editor Toolbar
        editor.addButton('custom_class', {
            title: 'Insert CSS Class',
            cmd: 'custom_class',
            image: url + '/icon.png',
        });

        // Add Command when Button Clicked
        editor.addCommand('custom_class', function() {
            alert('Button clicked!');
        });
    });
})();
```

This JavaScript function performs a few actions:

* It calls the TinyMCE Plugin Manager class, which we can use to perform a number of TinyMCE plugin related actions. Specifically, we’re adding our plugin to TinyMCE using the `add` function.
* Within the `add` routine, we have access to the Visual Editor through the `editor` instance. We register our button using the `addButton` function, which comprises of a title, command and icon image.
* Finally, we register a command using the `addCommand` function, which shows an alert telling us when our button was clicked.

We’ll need to also include the `icon.png` image within our Plugin folder – this is the icon image that will be used for the button:

![TinyMCE](https://uploads.sitepoint.com/wp-content/uploads/2015/10/1444739949tinymce-2.png)

Save your code, and activate your Plugin in WordPress Administration > Plugins.

Next, create or edit a Page or Post, and you’ll hopefully see your button with the icon:

![TinyMCE insert CSS Class](https://uploads.sitepoint.com/wp-content/uploads/2015/10/1444739941tinymce-3.png)

Click the button, and you’ll see the _Button clicked!_ alert:

![TinyMCE message](https://uploads.sitepoint.com/wp-content/uploads/2015/10/1444739945tinymce-4.png)

[![Learn to Code. Earn to live.](https://cdn.sanity.io/images/708bnrs8/production/907e073c5b041e09ab67a471e4b260c1e4518f26-613x256.png?w=613\&h=256\&auto=format)](https://featured.sitepoint.com/premium?utm_source=blog\&utm_campaign=article-banner\&ref_source=article-banner)

### Defining a Command to Run

Let’s replace the alert with a prompt, asking the user for the CSS class name they want to wrap around the selected text in the Visual Editor:

```
(function() {
    tinymce.PluginManager.add( 'custom_class', function( editor, url ) {
        // Add Button to Visual Editor Toolbar
        editor.addButton('custom_class', {
            title: 'Insert CSS Class',
            cmd: 'custom_class',
            image: url + '/icon.png',
        });

        // Add Command when Button Clicked
        editor.addCommand('custom_class', function() {
            // Check we have selected some text selected
            var text = editor.selection.getContent({
                'format': 'html'
            });
            if ( text.length === 0 ) {
                alert( 'Please select some text.' );
                return;
            }

            // Ask the user to enter a CSS class
            var result = prompt('Enter the CSS class');
            if ( !result ) {
                // User cancelled - exit
                return;
            }
            if (result.length === 0) {
                // User didn't enter anything - exit
                return;
            }

            // Insert selected text back into editor, wrapping it in an anchor tag
            editor.execCommand('mceReplaceContent', false, '' + text + '');
        });
    });
})();
```

This command performs a few sanity checks, to make sure the user selected some text, entered a CSS class name and didn’t cancel the process.

If those checks pass, we then run the editor’s `execCommand` function, to replace the selected text, with the selected text wrapped in a span tag which includes the inputted CSS class.

If everything worked, switch to the ‘Text’ view, and you’ll see your selected text is now wrapped in a span tag:

![TinyMCE code](https://uploads.sitepoint.com/wp-content/uploads/2015/10/1444739937tinymce-5.png)

### Conclusion

We’ve created a WordPress Plugin to add a button to the TinyMCE Visual Editor. In this process, we’ve explored the filters WordPress uses for integration with TinyMCE, as well as the JavaScript code needed to add a button and perform an action when clicked.

To download the complete source code, visit the [GitHub repository](https://github.com/n7studios/tinymce-custom-class) or the [direct ZIP file download link](https://github.com/n7studios/tinymce-custom-class/archive/master.zip).

In the next article, we’ll cover some more advanced steps that we can take to customize our TinyMCE plugin further.

###

### Advanced Editor Tools Plugin (previously known as TinyMCE Advanced)

The Advanced Editor Tools Plugin, previously known as TinyMCE Advanced, increases the number of formatting tools such as tables, emoticons and custom font families that are available and gives you more control of which tools are included on the visual editor on the [classic block](http://help.edublogs.org/classic-block/) or in the [classic editor](https://help.edublogs.org/classic-editor/).

Once you’ve activated the Advanced Editor Tools Plugin in **Plugins > All** it automatically replaces the default WordPress Visual editor with the Advanced Editor Tools which looks like this if you are using the [classic block](http://help.edublogs.org/classic-block/) in the [block editor](http://help.edublogs.org/block-editor/) and also adds a classic paragraph block.

<figure><img src="https://help.edublogs.org/files/2021/07/advanced61.jpg" alt="Advanced Editor Tools on classic block"><figcaption></figcaption></figure>

It looks like this if you are using the [classic editor](https://help.edublogs.org/classic-editor/).

<figure><img src="https://help.edublogs.org/files/2021/07/advanced62.jpg" alt="Advanced Editor Tools on classic editor"><figcaption></figcaption></figure>

### Advanced Editor Tools Overview

The Advanced Editor Tools is composed of:

1. Editor menu
2. Toolbars

When the editor menu is enabled most of the items appear as menu items under a drop down menu on the editor menu.

<figure><img src="https://help.edublogs.org/files/2021/07/advanced63.jpg" alt="Advanced Editor Tools overview"><figcaption></figcaption></figure>

Most of the menu items on the Editor menu are self explanatory and we’ve included a summary of the less obvious menu items below:

* **File > Print**: used to print a copy of post/page.
* **Insert > Insert date/time**: used to quickly add the date or time.
* **Insert > Anchor**:  Anchors are used to allow readers to jump to a specific part of a web page and are useful to create an index at the top of long pages.
* **Tables**: Allows you to quickly add, edit and format tables. Tables can be added using a [table block](https://help.edublogs.org/table-block/) if you are using the [block editor](http://help.edublogs.org/block-editor/).

The default WordPress Visual editor has two toolbars.  The Advanced Editor Tools can have up to four toolbars.

### Configure Advanced Editor Tools

You configure your Advanced Editor Tools in **Settings > Advanced Editor Tools** **(Tiny MCE Advanced)**.

How you configure depends on if you are using the [block editor](https://help.edublogs.org/block-editor/) or the [classic editor](https://help.edublogs.org/classic-editor/).

<figure><img src="https://help.edublogs.org/files/2016/06/advanced64.jpg" alt="Advanced Editor Tools Settings"><figcaption></figcaption></figure>

#### Block Editor

The following section explains how configure the Advanced Editor Tools if you are using the [block editor](http://help.edublogs.org/block-editor/). If you are using the [classic editor](https://help.edublogs.org/classic-editor/), refer to [the classic editor section](https://help.edublogs.org/advanced-editor-tools-plugin/#Classic_Editor).

**Toolbars for the block editor**

The Advanced Editor tools automatically adds Clear formatting and Mark to the drop down menu on the [paragraph block](http://help.edublogs.org/paragraph-block/)‘s toolbar and moves Subscript, Superscript and Text Color from the drop down menu in the toolbar to the block settings in the editor sidebar and adds an underline option.

<figure><img src="https://help.edublogs.org/files/2021/07/advanced69.jpg" alt="Paragraph block changes"><figcaption></figcaption></figure>

You drag and drop the options between the main toolbar’s drop down menu and the alternative side toolbar to change and reorder which items appear in the paragraph block toolbar drop down menu and block settings in the editor sidebar.

Remember to click **Save Changes** each time you make a change.

<figure><img src="https://help.edublogs.org/files/2021/07/advanced66.jpg" alt="Reordering items in paragraph toolbar"><figcaption></figcaption></figure>

Any item you want removed from the paragraph block’s toolbar and block settings in the editor sidebar you drag and drop into the Unused buttons for blocks toolbar area.

<figure><img src="https://help.edublogs.org/files/2021/07/advanced67.jpg" alt=""><figcaption></figcaption></figure>

“Enable setting of selected text color” and “Enable setting of selected text background color” can be changed to No as the latest version of WordPress already includes these options.

<figure><img src="https://help.edublogs.org/files/2021/07/advanced68.jpg" alt="Text color and background color options"><figcaption></figcaption></figure>

**Toolbars for the Classic Paragraph and Classic blocks**

The [classic block](https://help.edublogs.org/classic-block/) looks like the classic editor but it is in block form and is narrower than the classic editor.

For best results enable the editor menu and only add essential items to the toolbar.

Here’s what the classic block looks like when the Advanced Editor tools plugin is activated.

<figure><img src="https://help.edublogs.org/files/2021/07/advanced61.jpg" alt="Classic Block"><figcaption></figcaption></figure>

You remove buttons from the toolbar by dragging the buttons from the toolbar and dropping them into the Unused button area.  You add buttons by dragging the buttons from the Unused button area to the toolbar.

<figure><img src="https://help.edublogs.org/files/2021/07/advanced70.jpg" alt="Drag and drop items into toolbar"><figcaption></figcaption></figure>

**Options**

List Style Options extend your bulleted and numbered list options.

Clicking on the drop down arrow next to the Bulleted list icon or Numbered list icon reveals the extra options.

**Extra Bulleted list options:**

<figure><img src="https://help.edublogs.org/files/2016/06/bullet61-223sfdk.png" alt="Extra bulleted list options"><figcaption></figcaption></figure>

**Extra Numbered list options:**

<figure><img src="https://help.edublogs.org/files/2016/06/numbered61-2jw7ls4.png" alt="Numbered lists"><figcaption></figcaption></figure>

By default, extra list style options are enable.  &#x20;

**Context Menu**

When the Context Menu is enabled it replaces your web browser’s menu item when you right click in the content area of your post editor with the following TinyMCE Advanced content menu.

<figure><img src="https://help.edublogs.org/files/2016/06/context61-uydtna.png" alt="Context menu"><figcaption></figcaption></figure>

**Alternative Link Dialog**

When the Link is enabled it replaces the WordPress Insert/Edit Links dialog with the following TinyMCE Advanced Insert/Edit Links Dialog.

<figure><img src="https://help.edublogs.org/files/2016/06/advanced69-1dne6gm.png" alt="Insert Link"><figcaption></figcaption></figure>

**Advanced Options**

Under advanced options you can replace the paragraph block with the Classic Paragraph block by selecting “Make the Classic Paragraph” or “Classic block” the default block.

#### Classic Editor

The following section explains how configure the Advanced Editor Tools if you are using the [classic editor](https://help.edublogs.org/classic-editor/). If you are using the [block editor](http://help.edublogs.org/block-editor/), refer to [the block editor section](https://help.edublogs.org/advanced-editor-tools-plugin/#Block_Editor).

**Enable/Disable Editor menu**

By default, the editor menu is enabled.  For best results it is recommended to keep the Editor menu enabled.

<figure><img src="https://help.edublogs.org/files/2021/07/advanced71.jpg" alt="Enable the editor menu"><figcaption></figcaption></figure>

**Add/Remove buttons**

You remove buttons from the toolbars by dragging the buttons from the toolbar and dropping them into the Unused button area.  You add buttons by dragging the buttons from the Unused button area to the desired toolbar.

Any button used regularly would added to the first toolbar row.

Remember to click **Save Changes** each time you make a change.

<figure><img src="https://help.edublogs.org/files/2016/06/advanced72.jpg" alt="Add buttons to classic editor"><figcaption></figcaption></figure>

[The following video](https://youtu.be/Qx7nBhMJxqM?t=28s) to shows how to customize your classic editor using the Advanced Editor tools plugin (the video shows the original version of the TinyMCE Advanced plugin but is still applicable for this newer version of the plugin).

**Options**

List Style Options extend your bulleted and numbered list options.

Clicking on the drop down arrow next to the Bulleted list icon or Numbered list icon reveals the extra options.

**Extra Bulleted list options:**

<figure><img src="https://help.edublogs.org/files/2016/06/bullet61-223sfdk.png" alt="Extra bulleted list options"><figcaption></figcaption></figure>

**Extra Numbered list options:**

<figure><img src="https://help.edublogs.org/files/2016/06/numbered61-2jw7ls4.png" alt="Numbered lists"><figcaption></figcaption></figure>

**Context Menu**

When the Context Menu is enabled it replaces your web browser’s menu item when you right click in the content area of your post editor with the following TinyMCE Advanced content menu.

<figure><img src="https://help.edublogs.org/files/2016/06/context61-uydtna.png" alt="Context menu"><figcaption></figcaption></figure>

**Alternative Link Dialog**

When the Link is enabled it replaces the WordPress Insert/Edit Links dialog with the following TinyMCE Advanced Insert/Edit Links Dialog.

<figure><img src="https://help.edublogs.org/files/2016/06/advanced69-1dne6gm.png" alt="Insert Link"><figcaption></figcaption></figure>

**Advanced Options**

There is no need to make any changes to the advanced options.
