How to use tinyMCE for user “biographical info”?

Question

I would like to provide our WP users (authors) with a tinyMCE editor instead of standard textarea for their "Biographical Info" on the Profile page.

I have spent a lot of time searching online for plugins and references for how to accomplish this without a satisfying solution.

Any tips would be appreciated.

Answer 1

I found a very helpful blog post which shows exactly how to accomplish what I am after with only three small changes to the user-edit.php page.

First Change

I had to add a class name to the <textarea> tag for the description.

<textarea name="description" id="description" rows="5" cols="30"
  class="CLASS_NAME_HERE"><?php echo esc_html($profileuser->description); ?>
</textarea><br />

Second Change

I had to add a function call to wp_tiny_mce() like so.

<?php wp_tiny_mce( false, array( "editor_selector" => "CLASS_NAME_HERE" )); ?>

Note, the first argument of wp_tiny_mce (if true) will display the really stripped down version of the editor (like you'd see on the Quick Post).

Third Change

By default, Wordpress will strip out certain tags (those defined in $allowedtags) from the user description field. So, I found a plugin which basically removes the html restrictions. The plugin is called Weasel's Html Bios.

Answer 2

The above answer works, however it breaks every time WordPress is updated, isn't portable, and modifies core WordPress files (a huge no no).

It can be done entirely within hooks and filters in functions.php or a theme, or in a plugin. See here:

https://wordpress.stackexchange.com/a/33575/736

Answer 3

As Tom mentions above It’s probably best not to edit the WordPress core files, those will get wiped out when you update to the latest version.

I’ve written a plugin that replaces the Biographical Info profile field with the WordPress visual editor, TinyMCE, allowing you to editor an author’s biography using rich text using a new function, wp_editor(), that was released with WordPress 3.3.

http://wordpress.org/extend/plugins/visual-biography-editor/

Using this plugin will ensure that the editor isn’t wiped out with the next core update, which you should definitely do for security reasons.

Answer 4

We should add js lib and init editor for id="description"

function mysite_show_extra_profile_fields($user) {
    wp_enqueue_editor();

    ?>
    <script>
    document.addEventListener("DOMContentLoaded", function(event) {
        var id = 'description';
    
        wp.editor.initialize(id, {
            tinymce: {
                wpautop: true
            },
            quicktags: true
        });
    });
    </script>
    <?
    }
    
add_action('show_user_profile', 'mysite_show_extra_profile_fields');