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

Question

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.

Answer 1

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

Answer 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 remmeber where i have found this..
Anyhow this works great for me

Answer 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.

Answer 4

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

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