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?

Read More

Thanks a lot.

Related posts

Leave a Reply

5 comments

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

  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.

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