Support » Fixing WordPress » TinyMCE on Profile page

  • I have set up a members site where members only have access to their profile page, everything else is hidden.

    The members have no idea of basic html so I need to add a basic version of TinyMCE (or similar to what we have here) to the text field on the profile page.

    I can’t see any switch to allow this. Is it possible?

    TIA.

Viewing 15 replies - 1 through 15 (of 32 total)
  • Any idea on this would be appreciated.

    To use Tiny MCE just add this code to your page:

    <script type="text/javascript" src="/wp-includes/js/tinymce/tiny_mce.js"></script>
    <script type="text/javascript">
    tinyMCE.init({
    	// General options
    	mode : "textareas",
    	theme : "advanced"
    });
    </script>
    <form method="post" action="somepage">
    <textarea></textarea>
    </form>

    You can also add additional plugins.

    That totally worked … except editing bar is below text area (although this is no problem).
    BUT the main thing is viewing the member profile renders the html on page – ie you see the code: <strong>My name</strong> etc.

    Oh .. and in your code above, I changed the path to the script:
    <script type="text/javascript" src="../wp-includes/js/tinymce/tiny_mce.js"></script> < — added a ../

    Damn … I thought I had this sussed!

    There is a plugin that used to work for this but has been broken with changes to wp2.7.

    I needed to fix this so I’ve done a bit of hacking work on the plugin and figured I’d put it up here.

    I’m sure there’s an easier way to init the MCE editor than the way I’ve done it but this seems to be working quite smoothly so far!

    The original plugin was published over here:

    http://www.laboratoriocaffeina.it/development/2007/08/22/add-tinymce-to-author-description-in-wordpress.html

    I have modded the plugin to work as below.

    <?php
    /*
    Plugin Name: Add TinyMce to Author Profile
    Plugin URI: http://www.laboratoriocaffeina.it/development/2007/08/22/add-tinymce-to-author-description-in-wordpress.html
    Description: Adds WYSIWYG to Author profile
    Version: 0.2a
    Author: cedmax
    Author URI: http://www.dioblog.it
    */
    
    if (  (strpos($_SERVER['SCRIPT_NAME'], 'wp-admin/user-edit.php')) or (strpos($_SERVER['SCRIPT_NAME'], 'wp-admin/profile.php'))) {
    	add_action('admin_head', 'add_tinymce');
    }
    	remove_filter('pre_user_description', 'wp_filter_kses');
    	add_filter('pre_user_description', 'wpautop');
    
    function add_tinymce() {?>
    <script type="text/javascript" src="<?php echo get_option('home'); ?>/wp-includes/js/tinymce/tiny_mce.js"></script>
    <script type="text/javascript" src="<?php echo get_option('home'); ?>/wp-includes/js/tinymce/langs/wp-langs-en.js"></script>
    	<script type="text/javascript">
    /* <![CDATA[ */
    	tinyMCE.init ({
    		mode : 'exact',
    		elements : 'description',
    		width:"100%",
    		theme:"advanced",
    		skin:"wp_theme",
    		theme_advanced_buttons1:"bold,italic,strikethrough,|,bullist,numlist,blockquote,|,justifyleft,justifycenter,justifyright,|,link,unlink,wp_more,|,fullscreen,wp_adv,separator,separator",
    		theme_advanced_buttons2:"formatselect,underline,justifyfull,forecolor,|,pastetext,pasteword,removeformat,|,media,charmap,|,outdent,indent,|,undo,redo,wp_help",
    		theme_advanced_buttons3:"",
    		theme_advanced_buttons4:"",
    		theme_advanced_styles : "Header 1=h1;Header 2=header2;Header 3=header3;",
    		language:"en",
    		spellchecker_languages:"+English=en",
    		theme_advanced_toolbar_location:"top",
    		theme_advanced_toolbar_align:"left",
    		theme_advanced_statusbar_location:"bottom",
    		theme_advanced_resizing:"1",
    		theme_advanced_resize_horizontal:"",
    		dialog_type:"modal",
    		relative_urls:"",
    		remove_script_host:"",
    		convert_urls:"",
    		apply_source_formatting:"",
    		remove_linebreaks:"1",
    		paste_convert_middot_lists:"1",
    		paste_remove_spans:"1",
    		paste_remove_styles:"1",
    		gecko_spellcheck:"1",
    		entities:"38,amp,60,lt,62,gt",
    		accessibility_focus:"1",
    		tab_focus:":prev,:next",
    		content_css:"<?php echo get_option('home'); ?>/wp-includes/js/tinymce/wordpress.css",
    		wpeditimage_disable_captions:"",
    		plugins:"safari,inlinepopups,paste,wordpress,media,fullscreen"
    	});
    
    	function toggleEditor(id) {
    		var elm = document.getElementById(id);
    
    		if (tinyMCE.getInstanceById(id) == null)
    			tinyMCE.execCommand('mceAddControl', false, id);
    		else
    			tinyMCE.execCommand('mceRemoveControl', false, id);
    	}/* ]]> */
    	</script>
    <?php } ?>

    Maybe I should have read the comments over on that plugin page. Someone else suggests changing the plugin to:

    if ( (strpos($_SERVER['SCRIPT_NAME'], ‘wp-admin/user-edit.php’)) or (strpos($_SERVER['SCRIPT_NAME'], ‘wp-admin/profile.php’))) {
    add_action(’admin_head’, ‘add_tinymce’);
    }
    remove_filter(’pre_user_description’, ‘wp_filter_kses’);
    add_filter(’pre_user_description’, ‘wpautop’);
    
    function add_tinymce() {
    
    if (function_exists(’wp_tiny_mce’)) wp_tiny_mce(); ?>

    That’s certainly a lot neater. I’m off to test it 😉

    Hmm. That version didn’t work, although I don’t see exactly how it would as there’s no indication of what tiny mce should be added to. I’m finding it hard to find much info on the function wp_tiny_mce.

    I’ll see if I can get this neater solution working now..

    Much appreciated.
    I can give you admin rights if need be (the site is far from ready with no personal info etc)

    Hi bigbadboy,

    I haven’t been able to work out a neater solution, but the above is workable.

    If you copy all the plugin code I posted there and save that to a file called addtinymce_author.php and upload to your plugins folder you should have that working.

    Alex

    That works a treat getting a clean tinymce working on the profile page.
    Unfortunately the members page itself still displays the code.

    This might be something to do with your author.php stuff.

    I’m doing something like this on my author.php – not sure if this is going to be of any help.

    <?php if(isset($_GET['author_name'])) : $curauth = get_userdatabylogin($author_name); else : $curauth = get_userdata(intval($author)); endif; ?>
    		 <h1 class="page-title">Artist: <?php echo $curauth->nickname; ?></h1>
    		 <h2>Profile</h2>
    		 <?php echo $curauth->user_description; ?>
    		 <h3>Website</h3>
    		<p><a href="<?php echo $curauth->user_url; ?>"><?php echo $curauth->user_url; ?></a></p>

    Not sure if this will help in anyway but I’m using Profiler and the code for the description is:
    $output .= "<p>$user_description</p>";

    Hmm.

    Well, it looks like Profiler is probably converting htmlentities as a safety measure. The fact that his $output is surrounding the $user_description with paragraph elements means that the plugin probably isn’t expecting any html and is just going for a basic paragraph with line breaks.

    I would suggest contacting the plugin creator and referencing this forum topic as I’m sure he’ll see what you’re trying to do straight away.

    In fact, I would imagine adding tinymce to the profile editor would be quite useful for his plugin and he could probably integrate the code above in some way to extend his plugin functionality.

    Then you wouldn’t have to worry about this stuff at all!

    🙂

    Which page does this code go on ?

    <script type="text/javascript" src="/wp-includes/js/tinymce/tiny_mce.js"></script>
    <script type="text/javascript">
    tinyMCE.init({
    	// General options
    	mode : "textareas",
    	theme : "advanced"
    });
    </script>
    <form method="post" action="somepage">
    <textarea></textarea>
    </form>

    I have the same need. I wanted to put the tinymce in the member profile. I found I only needed the mini editor version that is used in quick edit…. I put this in my functions.php file in my active theme.

    if ( (strpos($_SERVER['SCRIPT_NAME'], 'wp-admin/user-edit.php')) || (strpos($_SERVER['SCRIPT_NAME'], 'wp-admin/profile.php'))) {
    	add_action('admin_head', 'add_tinymce');
    }
    
    remove_filter('pre_user_description', 'wp_filter_kses');
    add_filter('pre_user_description', 'wpautop');
    
    function add_tinymce() {
    
    if (function_exists('wp_tiny_mce')) {	
    
    		add_filter( 'teeny_mce_before_init', create_function( '$a', '$a["width"] = "440"; $a["height"] = "400"; $a["onpageload"] = ""; $a["mode"] = "exact"; $a["elements"] = "description"; $a["editor_selector"] = "mceEditor"; return $a;' ) );
    		wp_tiny_mce( true );
    
    	}
    }

    the big difference is where the code reads “mode” I set it to “exact” instead of “texareas” and then I had to add to the array set $a[“elements”] = “description”; where description is the id of the textarea for the user profile textarea…

    I hope this helps….

    So now we’ve got a few ways to load tinymce into the profile page, which is great, put the member page is still showing the html tags.

    It’s this that is taking everything and displaying it literally:
    $output .= "<p>$user_description</p>";

    Which spits out something like
    <p>Tony Baloney</p><p>He makes good toast.</p> etc

Viewing 15 replies - 1 through 15 (of 32 total)
  • The topic ‘TinyMCE on Profile page’ is closed to new replies.