Solved

formatting toolbar for comment box in wordpress

Posted on 2013-01-03
8
558 Views
Last Modified: 2013-01-09
Dear experts

I need a formatting toolbar for comment box in wordpress blog.
with bold, italic, link and font size options.

but as much as I searched, all the plugins insert tags in comment box , that's not suitable for my users . I need something like wordpad environment.

Is there any way that I can have such comment area ?

Thanks
0
Comment
Question by:vazzoha
  • 4
  • 4
8 Comments
 
LVL 15

Expert Comment

by:Ess Kay
ID: 38740068
there should be a wysiwyg editor out there which facilitates your need
0
 
LVL 15

Expert Comment

by:Ess Kay
ID: 38740077
0
 
LVL 15

Expert Comment

by:Ess Kay
ID: 38740082
also try TinyMCEComments
0
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 

Author Comment

by:vazzoha
ID: 38740483
those links don't work for me but I installed TinyMCEComments plugin
that seems perfect except I can't resize comment box width to the theme defult value.
0
 
LVL 15

Expert Comment

by:Ess Kay
ID: 38740532
you will have to manually edit it,
files should be located in yoursite.com/plugins/tinymeccomments folder

there should be a file there .php which holds all the settings, you can play around with it, just make sure you save a backup in case you mess it up and need to revert to original.


To find the programs i listed, you can go to your website, click plugins, click "addnew" and search for the names
0
 

Author Comment

by:vazzoha
ID: 38740688
here is TEMCEComments.php file
I  changed all the widths to 50% but nothing changed
<?php
/*
Plugin Name: MCEComments
Plugin URI: http://mk.netgenes.org/my-plugins/mcecomments/
Description: A simple hack to enable WYSIWYG editor TinyMCE on the comment field.
Version: 0.4.8
Author: mk
Author URI: http://mk.netgenes.org
*/

$mcecomment_nonce = 'mcecomment-update-key';
$mce_locale = ( '' == get_locale() ) ? 'en' : strtolower( substr(get_locale(), 0, 2) );

function mcecomment_adminpages() {
	$page = add_options_page('MCEComments Options', 'MCEComments', 8, 'tinyMCEComments', 'mcecomment_optionpage');
	add_action( "admin_print_scripts-$page", 'mcecomment_admin_page_init' );
}

//Get availabe skins for TinyMCE
function mcecomment_getskins() {
   $adv_path = ABSPATH . 'wp-includes/js/tinymce/themes/advanced/skins/';
   if ($h = opendir($adv_path)) {
		while (($file = readdir($h)) !== false) {
		   $skin_path = $adv_path . $file;
			if (is_dir($skin_path) && strpos($file, '.') !== 0) 
				$skins[] = $file;
			}
		closedir($h);
	}

	return $skins;
}

//Get available plugins of TinyMCE
function mcecomment_getplugins() {
	if ($h = opendir(ABSPATH . 'wp-includes/js/tinymce/plugins')) {
		while (($file = readdir($h)) !== false) {
			if (is_file(ABSPATH . 'wp-includes/js/tinymce/plugins/' . $file . '/editor_plugin.js')) 
				$plugins[] = $file;
			}
		closedir($h);
	}

	return $plugins;
}

function mcecomment_optionpage() {
	global $mcecomment_nonce, $wp_version;
	
	$mcecomment_options = get_option('mcecomment_options');
	
	if ( isset($_POST['submit']) ) {
		if ( function_exists('current_user_can') && !current_user_can('manage_options') )
			die(__('Cheatin&#8217; uh?'));

      if (!function_exists('settings_fields')) {
		   check_admin_referer($mcecomment_nonce);
      } else {
         check_admin_referer('mceComments-options');
      }
      
      if (isset($mcecomment_options['language']))
   		unset($mcecomment_options['language']);
			
		$mcecomment_options['rtl'] = (isset($_POST['mcecomment_rtl']) ? '1' : '0');
		$mcecomment_options['viewhtml'] = (isset($_POST['mcecomment_viewhtml']) ? '1' : '0');
		$mcecomment_options['resize'] = (isset($_POST['mcecomment_resize']) ? '1' : '0');
      $mcecomment_options['skin'] = (isset($_POST['mcecomment_skin']) ? $_POST['mcecomment_skin'] : 'default');
      
		if (isset($_POST['mcecomment_buttons'])) {
			$buttons = trim($_POST['mcecomment_buttons']);
			if ($buttons[strlen($buttons)-1] == ',') {
				$buttons = substr($buttons, 0, -1);
			}
			$mcecomment_options['buttons'] = $buttons;
		}

		if (isset($_POST['mcecomment_plugins'])) {
			$plugins = trim($_POST['mcecomment_plugins']);
			if ($plugins[strlen($plugins)-1] == ',') {
				$plugins = substr($plugins, 0, -1);
			}
			$mcecomment_options['plugins'] = $plugins;
		}

		if (isset($_POST['mcecomment_css']))
			$mcecomment_options['css'] = trim($_POST['mcecomment_css']);
	
		update_option('mcecomment_options', $mcecomment_options);
	}
	 
	mcecomment_init();
?>

<?php if ( !empty($_POST ) ) : 
?>
<div id="message" class="updated fade"><p><strong><?php _e('Options saved.') ?></strong></p></div>
<?php endif; ?>

<div class="wrap">
<h2>MCEComments Options</h2>

<form method="post">
<?php 
if ( !function_exists('settings_fields') ) {
   wp_nonce_field($action);
} else {
	settings_fields('mceComments');
}
?>
<h3>Interface</h3> 
<script type="text/javascript">
//<![CDATA[
function inserttext(obj_out,obj_in) {
	obj = document.getElementById(obj_out);
	obj.value += ((obj.value != '') ? ',' : '') + (obj_in).innerHTML;
}
//]]>
</script>
<table width="100%" cellspacing="2" cellpadding="5" class="form-table">
<tr class="form-field"> 
<th>Options:</th>
<td>
<p><input name="mcecomment_rtl" type="checkbox" id="mcecomment_rtl" value="1" <?php echo ($mcecomment_options['rtl'] ? 'checked="checked"':''); ?>/>
<label for="mcecomment_rtl">Enable right-to-left (RTL) editing mode in comment field</label></p>
<p><input name="mcecomment_viewhtml" type="checkbox" id="mcecomment_viewhtml" value="1" <?php echo ($mcecomment_options['viewhtml'] ? 'checked="checked"':''); ?>  />
<label for="mcecomment_viewhtml">Enable HTML source editing of the comment field</label></p>
<p><input name="mcecomment_resize" type="checkbox" id="mcecomment_resize" value="1" <?php echo ($mcecomment_options['resize'] ? 'checked="checked"':''); ?>  />
<label for="mcecomment_resize">Enable vertical resizing of the comment field writing area</label></p>
</td></tr>
<tr class="form-field"> 
<th>Skin:</th><td>
<p><select name="mcecomment_skin" id="mcecomment_skin">
   <?php
      $skins = mcecomment_getskins();
      for ($i=0; $i<count($skins); $i++) {
         if ($skins[$i] == $mcecomment_options['skin'])
            echo "<option value=\"$skins[$i]\" selected=\"selected\">$skins[$i]</option>";
         else
            echo "<option value=\"$skins[$i]\">$skins[$i]</option>";
      }
   ?>
 </select></p>
 </td></tr>
</table>

<h3>Advance Options</h3> 
<table width="100%" cellspacing="2" cellpadding="5" class="form-table"> 
<tr class="form-field">
<th>Buttons in use:</th>
<td><input name="mcecomment_buttons" type="text" id="mcecomment_buttons" value="<?php echo $mcecomment_options['buttons']; ?>" style="width:98%" /><br />
(separated with commas)<br /> 
Available buttons: 
<?php $pls = array('separator','bold','italic','underline','strikethrough','justifyleft','justifycenter','justifyright','justifyfull','bullist','numlist','outdent','indent','cut','copy','paste','undo','redo','link','unlink','cleanup','help','code','hr','removeformat','sub','sup','forecolor','backcolor','charmap','visualaid','blockquote','spellchecker','fullscreen');
for ($i=0; $i<count($pls); $i++) {
echo '<span style="cursor: pointer; text-decoration: underline;" onclick="inserttext(\'mcecomment_buttons\', this);">'.$pls[$i].'</span>  '; 
}?>
</td>
</tr><tr class="form-field"> 
<th>Plugins in use:</th>
<td><input name="mcecomment_plugins" type="text" id="mcecomment_plugins" value="<?php echo $mcecomment_options['plugins']; ?>" style="width:98%" /><br />
(separated with commas)<br /> 
Detected plugins: 
<?php $pls = mcecomment_getplugins(); 
for ($i=0; $i<count($pls); $i++) {
echo '<span style="cursor: pointer; text-decoration: underline;" onclick="inserttext(\'mcecomment_plugins\', this);">'.$pls[$i].'</span>  '; 
}?>
</td>
</tr><tr class="form-field">
<th>User defined CSS:</th>
<td><input name="mcecomment_css" type="text" id="mcecomment_css" value="<?php echo $mcecomment_options['css']; ?>" style="width:98%" /><br />
Fully qualified URL required (leave blank to use default CSS)
</td></tr>
</table>

<h3>Preview</h3> 
<table width="100%" cellspacing="2" cellpadding="5" class="form-table"> 
<tr valign="top" class="form-field"> 
<th>Preview:</th>
<td>Update options to preview how the comment textarea box will appear.<br /><textarea name="comment" id="comment" rows="5" tabindex="4" style="width:99%">This is a preview textarea</textarea>
</td></tr>
</table>

<p class="submit">
<?php if (!function_exists('settings_fields')) : ?>
   <input type="hidden" name="action" value="update" />
<?php endif; ?>
<input type="submit" name="submit" value="Update Options &raquo;" />
</p>
</form>
</div>
<?php
}

function mcecomment_getcss() {
	$mcecomment_options = get_option('mcecomment_options');
  
	if ($mcecomment_options['css'] != '') {
		return $mcecomment_options['css'];
   } elseif (mcecomment_isGreaterThan('2.8.0')) {
		return get_option('siteurl') . '/wp-includes/js/tinymce/themes/advanced/skins/wp_theme/content.css';
	} elseif (mcecomment_isGreaterThan('2.5.0')) {
		return get_option('siteurl') . '/wp-includes/js/tinymce/wordpress.css';
	} else {
		return get_option('siteurl') . '/wp-includes/js/tinymce/plugins/wordpress/wordpress.css';
	}
}

//Generate JS Block
function mcecomment_getInitJS($debugMode=0) {
   global $mce_locale;
   
	if ($debugMode == 1)
		$le = "\n";
	$mcecomment_options = get_option('mcecomment_options');
	
	if (!is_array($mcecomment_options)) {
		$mcecomment_options['buttons'] = 'bold,italic,underline,|,strikethrough,|,bullist,numlist,|,undo,redo,|,link,unlink,|,removeformat';
		update_option('mcecomment_options', $mcecomment_options);
	}
	$initArray = array (
	   'mode' => 'exact',
	   'elements' => 'comment',
	   'theme' => 'advanced',
	   'theme_advanced_buttons1' => $mcecomment_options['buttons'],
	   'theme_advanced_buttons2' => "",
	   'theme_advanced_buttons3' => "",
	   'theme_advanced_toolbar_location' => "top",
	   'theme_advanced_toolbar_align' => "left",
	   'theme_advanced_statusbar_location' => ($mcecomment_options['resize'] ? 'bottom' : 'none'),
	   'theme_advanced_resizing' => ($mcecomment_options['resize'] ? 'true' : 'false'),
	   'theme_advanced_resize_horizontal' => false,
	   'theme_advanced_disable' => ($mcecomment_options['viewhtml'] ? '':'code'),
	   'force_p_newlines' => false,
	   'force_br_newlines' => true,
	   'forced_root_block' => "p",
	   'gecko_spellcheck' => true,
 	   'skin' => ($mcecomment_options['skin'] ? $mcecomment_options['skin'] : 'default'),
	   'content_css' => mcecomment_getcss(),
	   'directionality' => ($mcecomment_options['rtl'] ? 'rtl' : 'ltr'),
	   'save_callback' => "brstonewline",
	   'entity_encoding' => "raw",
	   'plugins' => $mcecomment_options['plugins'],
	   //'extended_valid_elements' => "a[name|href|title],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style],blockquote[cite]",'.$le;
      'language' => $mce_locale,
   );
   
   $params = array();
	foreach ( $initArray as $k => $v )
		$params[] = $k . ':"' . $v . '"	';
	$res = join(',', $params);
	?>
	<script type="text/javascript">
      /* <![CDATA[ */
      function brstonewline(element_id, html, body) {
	      html = html.replace(/<br\s*\/>/gi, "\n");
	      return html;
	   }
	   
	   function insertHTML(html) {
	      tinyMCE.execCommand("mceInsertContent",false, html);
	   }
	   
      tinyMCEPreInit = {
	      base : "<?php echo get_option('siteurl') ?>/wp-includes/js/tinymce",
	      suffix : "",
	      query : "ver=20081129",
	      mceInit : {<?php echo $res ?>},

	      go : function() {
		      var t = this, sl = tinymce.ScriptLoader, ln = t.mceInit.language, th = t.mceInit.theme, pl = t.mceInit.plugins;

		      sl.markDone(t.base + '/langs/' + ln + '.js');

		      sl.markDone(t.base + '/themes/' + th + '/langs/' + ln + '.js');
		      sl.markDone(t.base + '/themes/' + th + '/langs/' + ln + '_dlg.js');

		      tinymce.each(pl.split(','), function(n) {
			      if (n && n.charAt(0) != '-') {
				      sl.markDone(t.base + '/plugins/' + n + '/langs/' + ln + '.js');
				      sl.markDone(t.base + '/plugins/' + n + '/langs/' + ln + '_dlg.js');
			      }
		      });
	      },

	      load_ext : function(url,lang) {
		      var sl = tinymce.ScriptLoader;

		      sl.markDone(url + '/langs/' + lang + '.js');
		      sl.markDone(url + '/langs/' + lang + '_dlg.js');
	      }
      };
      
      var subBtn = document.getElementById("submit");
	   if (subBtn != null) {
	      subBtn.onclick=function() {
	         var inst = tinyMCE.getInstanceById("comment");
	         document.getElementById("comment").value = inst.getContent();
	         document.getElementById("commentform").submit();
	         return false;
	      }
	   }
	   tinyMCEPreInit.go();
      tinyMCE.init(tinyMCEPreInit.mceInit);
      /* ]]> */
      </script>
      
	<?php
}

function mcecomment_init() {
	global $post;
	$loadJS = false;
	if (is_plugin_page()) {
	   $loadJS = true;
	} else if (is_singular()) {
	   if (comments_open() && ( !get_option('comment_registration') || is_user_logged_in() )) {	
	      $loadJS = true;
	   }
	}
	if ($loadJS)
	   mcecomment_getInitJS();
}

function mcecomment_isGreaterThan($ver) {
	global $wp_version;

	//Cater WP_Security
	if ($wp_version == 'abc') return true;
	list($Cmajor, $Cminor, $Crev) = explode('.', $ver);
	list($major, $minor, $rev) = explode('.', $wp_version);
	if ($major < $Cmajor) return false;
	if ($minor < $Cminor) return false;
	
	return true;
}

function mcecomment_admin_init() {
   register_setting('mceComments', 'mcecomment_options');
}

function mcecomment_admin_page_init() {
   global $mce_locale;

   wp_enqueue_script('tiny_mce', get_option('siteurl') . '/wp-includes/js/tinymce/tiny_mce.js', false, '20081129');
	wp_enqueue_script('tiny_mce_lang', get_option('siteurl') . '/wp-includes/js/tinymce/langs/wp-langs-' . $mce_locale . '.js', false, '20081129');
	mcecomment_getInitJS();
}

function mcecomment_loadCoreJS() {
   global $post, $mce_locale;
   if (is_singular()) {
	   if (comments_open() && ( !get_option('comment_registration') || is_user_logged_in() )) {
	      wp_enqueue_script('tiny_mce', get_option('siteurl') . '/wp-includes/js/tinymce/tiny_mce.js', false, '20081129');
	      wp_enqueue_script('tiny_mce_lang', get_option('siteurl') . '/wp-includes/js/tinymce/langs/wp-langs-' . $mce_locale . '.js', false, '20081129');
	      wp_deregister_script('comment-reply');
	      wp_enqueue_script( 'comment-reply', get_option('siteurl') . '/wp-content/plugins/' . plugin_basename ( dirname ( __FILE__ ) ) . "/comment-reply.dev.js", false, '20090102');
	   }
	}
}

add_action('template_redirect', 'mcecomment_loadCoreJS');
add_action('wp_head', 'mcecomment_init');
add_action('admin_menu', 'mcecomment_adminpages');
add_action('admin_init', 'mcecomment_admin_init');
add_option('mcecomment_options', '', 'TinyMCE Comments');
?>

Open in new window

0
 

Accepted Solution

by:
vazzoha earned 0 total points
ID: 38744950
the best uptodate plugin is CKEditor in wordpress V4
http://wordpress.org/extend/plugins/ckeditor-for-wordpress/
0
 

Author Closing Comment

by:vazzoha
ID: 38758246
all the suggested plugins were so old and actually out of support.
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Wordpress Horizontal Drop-Down Menu In this tutorial I will show you had to add a WordPress horizontal navigation menu to your theme. I have searched and searched for a good tutorial on creating a WordPress nav menu without adding a plug-in or us…
WordPress is constantly evolving, and with each evolution appears to get better and better.  One of the big drawbacks prior to version 3 was that there was no way to be able to set up a custom menu from the backend. The Old Way Adding menus is…
This video teaches viewers how to create their own website using cPanel and Wordpress. Tutorial walks users through how to set up their own domain name from tools like Domain Registrar, Hosting Account, and Wordpress. More specifically, the order in…
The purpose of this video is to demonstrate how to exclude a particular blog category from the main blog page. This is can be used when a category already has its own tab, or you simply want certain types of posts not to show up on the main blog. …

733 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question