WordPress.org

Ready to get started?Download WordPress

Forums

TinyMCE on Profile page (33 posts)

  1. Lee Rickler
    Member
    Posted 5 years ago #

    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.

  2. Lee Rickler
    Member
    Posted 5 years ago #

    Any idea on this would be appreciated.

  3. roya khosravi
    Member
    Posted 5 years ago #

    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.

  4. Lee Rickler
    Member
    Posted 5 years ago #

    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!

  5. alexleonard
    Member
    Posted 5 years ago #

    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 } ?>
  6. alexleonard
    Member
    Posted 5 years ago #

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

  7. alexleonard
    Member
    Posted 5 years ago #

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

  8. Lee Rickler
    Member
    Posted 5 years ago #

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

  9. alexleonard
    Member
    Posted 5 years ago #

    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

  10. Lee Rickler
    Member
    Posted 5 years ago #

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

  11. alexleonard
    Member
    Posted 5 years ago #

    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>
  12. Lee Rickler
    Member
    Posted 5 years ago #

    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>";

  13. alexleonard
    Member
    Posted 5 years ago #

    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!

    :)

  14. SollyNZ
    Member
    Posted 5 years ago #

    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>
  15. Brayne
    Member
    Posted 5 years ago #

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

  16. Lee Rickler
    Member
    Posted 5 years ago #

    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

  17. alexleonard
    Member
    Posted 5 years ago #

    @bigbadboy

    Have you got in touch with the creator of Profiler? I'm still assuming that the issue you're now experiencing is purely down to the plugin and it stripping htmlentities or something.

    You'll need to check whether there are filters running on $output or $user_description - so reference where else they appear in the plugin code.

  18. Brayne
    Member
    Posted 5 years ago #

    I've been working on this extensively over the last 24 hours.... I have it working great. This is for WP vs 2.7 only.... and this is the scaled down version that is used in "press this"

    This goes in your functions.php file in your theme....I'm going to release an updated plugin for this feature later today...

    I found that the key is putting these 2 function calls in place....

    wp_enqueue_script('editor');
    do_action('admin_print_scripts');

    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')) {	
    
    	wp_enqueue_script('editor');
    	do_action('admin_print_scripts');
    
    		add_filter( 'teeny_mce_before_init', create_function( '$a', '
    			$a["theme"] = "advanced";
    			$a["skin"] = "wp_theme";
    			$a["height"] = "420";
    			$a["width"] = "400";
    			$a["onpageload"] = "";
    			$a["mode"] = "exact";
    			$a["elements"] = "description";
    			$a["editor_selector"] = "mceEditor";
    			$a["plugins"] = "safari,inlinepopups,wordpress";
    			$a["apply_source_formatting"] = "1";
    			$a["accessibility_focus"] = "1";
    			return $a;' ) );
    
    		wp_tiny_mce( true );
    	}
    }
  19. Lee Rickler
    Member
    Posted 5 years ago #

    Alex - Yeah I've posted on his thread but so far nothing except possibly it's a problem with WP itself as in the profile page has been set to strip all html.

    if so, how is this done?
    I'm not too clever a php coder but I cannot find the right info anywhere.

    brayne - yes, that helps getting tinymce on the profile page but it's not carried through to the actual members' details page.

  20. Brayne
    Member
    Posted 5 years ago #

    alexleonard is absolutely correct.... I didn't pay attention to the comment made about using the plugin -> profiler. I was not using it. I installed it and took a look and made this change to the file profiler.php...

    At Line #464 I changed this....

    $output .= "<h3>About Me</h3>";
      $output .= "$user_description";

    To this...

    $output .= "<h3>About Me</h3>";
      $user_description = html_entity_decode($user_description);
      $output .= "$user_description";

    I have not notified the author because if he wanted to add this feature he would need to check a condition if using tinymce and such... You can limit the html allowed by making limits in tinymce but for now, making this change in profiler, the html will be read properly....

  21. Lee Rickler
    Member
    Posted 5 years ago #

    Brayne - You is 'Da Man'! It works exactly as needed.

    :)

  22. alexleonard
    Member
    Posted 5 years ago #

    Nice one @Brayne I've been a bit busy today to go investigating plugins :(

    @bigbadboy Hope you're all sorted now :) It took a little while but got there in the end. I love these forums!

  23. Lee Rickler
    Member
    Posted 5 years ago #

    This could be me but ...
    Using FF (mac) I enter details in the field, save, view and everything is fine.
    I view on Safari (Mac) and IE7 - works fine
    BUT when I go to the admin in these 2 browsers, there's nothing in the field.
    Tinymce bar is there and I can enter content but clicking save simply clears the field. BUT when I refresh the member's page, the old content is still there.

    It could be me, Safari, IE or everything, not quite sure.

  24. Lee Rickler
    Member
    Posted 5 years ago #

    OK. Just to update on this -
    Logged in as admin - no problem
    Logged in as subscriber - Description field is blank/ can make changes but changes are not carried through.
    BUT - view source and the content is visible in the content area ...

    So:
    Logged in as admin - fine
    Logged in as user cannot view or edit description

    weird!

    UPDATE ON UPDATE:
    Removing the above code from functions.php and using the "Add TinyMce to Author Profile" plugin restores everything so there's obviously a small visibility bug in this code:

    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')) {	
    
    	wp_enqueue_script('editor');
    	do_action('admin_print_scripts');
    
    		add_filter( 'teeny_mce_before_init', create_function( '$a', '
    			$a["theme"] = "advanced";
    			$a["skin"] = "wp_theme";
    			$a["height"] = "480";
    			$a["width"] = "300";
    			$a["onpageload"] = "";
    			$a["mode"] = "exact";
    			$a["elements"] = "description";
    			$a["editor_selector"] = "mceEditor";
    			$a["plugins"] = "safari,inlinepopups,wordpress";
    			$a["apply_source_formatting"] = "1";
    			$a["accessibility_focus"] = "1";
    			return $a;' ) );
    
    		wp_tiny_mce( true );
    	}
    }
  25. Brayne
    Member
    Posted 5 years ago #

    OK.... got weird.... I can guess that there was something going on with load order and changing from functions.php to the plugin has affected this..This can be changed in the action calls but it seems to be working out now...

    I did the same thing as bigbadboy and works just fine... All operations work as they should in FF, Safari, Opera on Mac. FF, Safari, IE7 on PC....IE6 however wont show the text in the Biographical Info field when tinyMCE is added... I blame IE6... It IS in the source code...just like bigbadboy wrote... but now not showing in that field when using IE6...unfortunately there is still 1 out 5 people using this browser so... I will still kick the tires on this..

  26. Brayne
    Member
    Posted 5 years ago #

    UPDATE - Working on it..... Realized this is a pretty lame solution if it only works for admins.... ;(.

  27. jobmeer
    Member
    Posted 5 years ago #

    I have the tinyMCE editor working on the author "discription" field. But I added some costumfields with the register plus plugin. I copied the code:

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

    Then renamed the "discription" element to my customfield name. That works fine. But I added more fields. I can't get it working.

    How can I add the tinyMCE editor to multiple customfields?

  28. Brayne
    Member
    Posted 5 years ago #

    Hey jobmeer,

    be sure to read what bigbadboy was writing.... check the code with a "regular" user compared to an "administrator"

    This code works for both.....bigbadboy... you want to test it and let me know?? I tried this in said plugin and in functions.php and works in both....I was utilizing this parameter - $a["plugins"] = "safari,inlinepopups,wordpress";
    And it was causing it to not work with a regular subscriber... Also some of the above code uses hard coding the javascript file tiny_mce.js and it would take sooo long for the page to load this is the best solution I have found...

    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')) {	
    
      wp_enqueue_script('editor');  // This is the key to make it work...
      do_action('admin_print_scripts'); // This prints it in the proper place in the <head>
    
    		add_filter( 'teeny_mce_before_init', create_function( '$a', '
    			$a["theme"] = "advanced";
    			$a["skin"] = "wp_theme";
    			$a["height"] = "420";
    			$a["width"] = "400";
    			$a["onpageload"] = "";
    			$a["mode"] = "exact";
    			$a["elements"] = "description";
    			return $a;' ) );
    		wp_tiny_mce( true );
    	}
    }
  29. Brayne
    Member
    Posted 5 years ago #

    I made a dupe entry... sorry

  30. r-a-y
    Member
    Posted 5 years ago #

    Question...

    Do WordPress plugins, shortcodes and filters work in TinyMCE on profile pages?

    Also, what is the preferred method everyone is using?

    There's about 2 or 3 solutions posted in this thread, which one is working for you guys?

Topic Closed

This topic has been closed to new replies.

About this Topic