tinymce - Replace Taxomony Description Field with VisualWYSIWYG Editor

admin管理员组

文章数量:1125772

Is there a way to add a TinyMCE editor to the taxonomy description field on the term editing pages? The solution here (Can you add the visual editor to the description field for custom taxonomies?) no longer works, I think because the wp_tiny_mce function has been deprecated.

Is there a way to add a TinyMCE editor to the taxonomy description field on the term editing pages? The solution here (Can you add the visual editor to the description field for custom taxonomies?) no longer works, I think because the wp_tiny_mce function has been deprecated.

• tinymce
• wysiwyg
• taxonomy

Share Improve this question edited Apr 13, 2017 at 12:37 CommunityBot 1 asked Jun 4, 2015 at 15:28 Josh MJosh M 34211 gold badge55 silver badges2222 bronze badges

Add a comment  | 

4 Answers 4

Sorted by: Reset to default 1

Oleg Butuzov's answer was probably valid in 2015, since it was accepted and voted on. In 2024, for those who had the same problem with WordPress 6.4.2, it no longer works.

I propose a different solution:

add_action("{$taxonomy}_edit_form_fields", 'tinymce_on_description', 10, 2);

function tinymce_on_description($term, $taxonomy){
    ?>
    <script>
        jQuery(document).ready(function($) {
            wp.editor.initialize('description', {
                tinymce: {
                    // customizable options for TinyMCE
                    toolbar1: 'formatselect | bold italic | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link',
                            plugins: 'link,lists,textcolor,colorpicker',
                            menubar: false,
                            statusbar: false,
                },
                quicktags: true,
                mediaButtons: false,
            });
        });
    </script>
    <?php
}

add_action('init','disable_kses');

function disable_kses() {
    remove_filter('pre_term_description', 'wp_filter_kses');
}

Within the jQuery function, wp.editor.initialize('description', {...}) is called to initialize the TinyMCE editor on the element with the ID description, which is typically the textarea for the term description. This is the core of the solution.

Disabling the wp_filter_kses function is a crucial step in this solution, as it typically filters out all HTML tags except for a limited set, such as bold and italic text, from the term descriptions for security reasons. By removing this filter, we enable the TinyMCE editor to fully utilize its rich text capabilities, allowing for a wider range of formatting options such as line breaks, multiple paragraphs, colors, and text alignment. Without this adjustment, many of the advanced formatting features provided by the TinyMCE editor would be stripped out upon saving, significantly limiting its utility.

However, it's important to note that disabling wp_filter_kses could potentially introduce security risks if users with the capability to edit term descriptions insert malicious code. It's recommended to consider user roles and capabilities or implement additional sanitization measures to mitigate such risks.

You can use a {$taxonomy}_edit_form_fields action hook to add html to the term edit table. In that HTML you can remove description textarea and add tinymce editor

add_action("{$taxonomy}_edit_form_fields", 'add_form_fields_example', 10, 2);

function add_form_fields_example($term, $taxonomy){
    ?>
    <tr valign="top">
        <th scope="row">Description</th>
        <td>
            <?php wp_editor(html_entity_decode($term->description), 'description', array('media_buttons' => false)); ?>
            <script>
                jQuery(window).ready(function(){
                    jQuery('label[for=description]').parent().parent().remove();
                });
            </script>
        </td>
    </tr>
    <?php
} 

For those still looking for a solution to this problem, it's worth mentioning that the Yoast SEO plugin adds a WYSIWYG editor for descriptions automatically on the taxonomy term edit screen.

If you're not planning to use that plugin for SEO please don't add it only for this functionality. Given the plugin's popularity, I figured it was worth noting it here since it could save time for someone who already plans to install the plugin.

Yes, Installing Yoast SEO plugin will resolve the issue. It is working perfectly with All the famous page builders as well.

本文标签： tinymceReplace Taxomony Description Field with VisualWYSIWYG Editor