Solved

formatting toolbar for comment box in wordpress

Posted on 2013-01-03
8
550 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
 

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
Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

 
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

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

Suggested Solutions

Transferring a wordpress site from a host or local dev server to another host can be a pain. So I've included my steps on how I have accomplished this task. Steps include an assumption that you have Cpanel access or Ftp access.. If you do not hav…
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…
The purpose of this video is to demonstrate how to automatically show related posts at the bottom of a blog post in WordPress. This will be demonstrated using a Windows 8 PC. Plugin “Yet Another Related Posts Plugin” will be used. Go to your…
This video teaches users how to migrate an existing Wordpress website to a new domain.

743 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now