How to use tinyMCE for user “biographical info” without messing with any core file?

I noticed when you typein the user’s “biographical info” on the profile, it shows up in one page! Looks really terrible. So:

Is there a way to use tinyMCE or other solution for user “biographical info” without messing with any core file, and without any plugin?

Thanks a lot.

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

Not sure if this is the perfect way to do it, but it worked for me by removing the description element using jQuery and then adding editor for the description element.

/*******************************************
* TinyMCE EDITOR "Biographical Info" USER PROFILE
*******************************************/
function biographical_info_tinymce() {
    if ( basename($_SERVER['PHP_SELF']) == 'profile.php' || basename($_SERVER['PHP_SELF']) == 'user-edit.php' && function_exists('wp_tiny_mce') ) {
        echo "<script>jQuery(document).ready(function($){ $('#description').remove();});</script>";
        $settings = array(
            'tinymce' => array(
                'toolbar1' => 'bold,italic,bullist,numlist,link,unlink',
                'toolbar2' => '',
                'toolbar3' => '',
                'toolbar4' => '',
            ),
            'wpautop' => true,
            'media_buttons' => false,
            'quicktags' => false,
        );
        $description = get_user_meta( $user->ID, 'description', true);
        wp_editor( $description, 'description', $settings );
    }
}
add_action('admin_head', 'biographical_info_tinymce');
remove_filter('pre_user_description', 'wp_filter_kses');
add_filter( 'pre_user_description', 'wp_filter_post_kses' );

Method 2

Add this to your functions.php:

/*******************************************
* TinyMCE EDITOR "Biographical Info" USER PROFILE
*******************************************/
function biographical_info_tinymce() {
    if ( basename($_SERVER['PHP_SELF']) == 'profile.php' || basename($_SERVER['PHP_SELF']) == 'user-edit.php' && function_exists('wp_tiny_mce') ) {
        wp_admin_css();
        wp_enqueue_script('utils');
        wp_enqueue_script('editor');
        do_action('admin_print_scripts');
        do_action('admin_print_styles-post-php');
        do_action('admin_print_styles');
        remove_all_filters('mce_external_plugins');

        add_filter( 'teeny_mce_before_init',
            create_function( '$a', '
$a["theme"] = "advanced";
$a["skin"] = "wp_theme";
$a["height"] = "300";
$a["width"] = "440";
$a["onpageload"] = "";
$a["mode"] = "exact";
$a["elements"] = "description";
$a["theme_advanced_buttons1"] = "formatselect, forecolor, bold, italic, pastetext, pasteword, bullist, numlist, link, unlink, outdent, indent, charmap, removeformat, spellchecker, fullscreen, wp_adv";
$a["theme_advanced_buttons2"] = "underline, justifyleft, justifycenter, justifyright, justifyfull, forecolor, pastetext, undo, redo, charmap, wp_help";
$a["theme_advanced_blockformats"] = "p,h2,h3,h4,h5,h6";
$a["theme_advanced_disable"] = "strikethrough";
return $a;' )
        );

        wp_tiny_mce( true );
    }
}
add_action('admin_head', 'biographical_info_tinymce');

.
Someone is due for credit on this but i can’t remember where i have found this..

Anyhow this works great for me

Method 3

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.

Method 4

Just adding this to the theme’s functions.php solve the problem (prevent stripping of the html from the author’s bio):

remove_filter('pre_user_description', 'wp_filter_kses');  
add_filter( 'pre_user_description', 'wp_filter_post_kses' );

Method 5

Just add it

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');

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0