Plugins & Hacks

Is it possible to get an editing toolbar in the Add Comment form like the one in the Add Item admin page?

Scenario:
"I run a site with members who are not highly technical but want to post links and have basic formatting options (bold, italic) in their comments. Can I get the editing toolbar in the Nucleus Add Item page inside the admin area in the comments area?"

Solution:
The easy solution is to install one of the following plugins:

NP_FancyText.php

NP_TinyMCE2.php

If you do not wish to install a plugin for some reason, you can employ a core hack to put some basic formatting toolbar icons into your Add Comment area.

Original forum thread (thanks, maxirmx!):
http://forum.nucleuscms.org/viewtopic.php?t=15975

Method:

WARNING: BEFORE TRYING ANY CORE HACK, YOU SHOULD ALWAYS MAKE A COMPLETE BACKUP OF YOUR NUCLEUS INSTALLATION!!!

Add the following code to all stylesheets in use on your site (you can usually find them in the /skins/skinname/ directory):

/* markup buttons */
.jsbutton
{
    text-align: center;
    padding: 3px;
    border: 1px solid #dddddd;
}
 
.jsbuttonspacer
{
    padding-right: 10px;
}
 
.jsbuttonbar
{
    padding: 3px;
    cursor: default;
}

Open up the commentform-loggedin.template file in the /nucleus/forms/ directory and replace its contents with the following code:

<script type="text/javascript"
    src="<%adminurl%>javascript/edit.js">
</script>

<a id="nucleus_cf"></a>
<form method="post" action="#nucleus_cf">
  <div class="commentform">
     <%errordiv%>

   <input type="hidden" name="action" value="addcomment" />
   <input type="hidden" name="url" value="<%formdata(destinationurl)%>" />
   <input type="hidden" name="itemid" value="<%itemid%>" />
   <label for="inputbody"><%text(_COMMENTFORM_COMMENT)%></label>:
<div class="jsbuttonbar">
         <span class="jsbutton"
               onmouseover="BtnHighlight(this);"
               onmouseout="BtnNormal(this);"
               onclick="boldThis()" >         
               <img src="<%adminurl%>images/button-bold.gif" alt="" width="16" height="16"/>
        </span>            
        <span class="jsbutton"
               onmouseover="BtnHighlight(this);"
               onmouseout="BtnNormal(this);"
               onclick="italicThis()" >         
               <img src="<%adminurl%>images/button-italic.gif" alt="" width="16" height="16"/>
         </span>            
         <span class="jsbuttonspacer">
         </span>         
         <span class="jsbutton"
               onmouseover="BtnHighlight(this);"
               onmouseout="BtnNormal(this);"
               onclick="ahrefThis()" >         
               <img src="<%adminurl%>images/button-link.gif" alt="" width="16" height="16"/>
         </span>            
        </div>

   <textarea name="body" class="formfield" tabindex="10" cols="40" rows="10" id="inputbody"
   onkeyup="storeCaret(this);"
   onclick="storeCaret(this);"
   onselect="storeCaret(this);">
   <%formdata(body)%> </textarea>


   <%text(_COMMENTFORM_YOUARE)%> <%formdata(membername)%>
   <small>(<a href="?action=logout"><%text(_LOGOUT)%></a>)</small>


   <input type="submit" value="<%text(_COMMENTFORM_SUBMIT)%>" class="formbutton" />
   <%callback(FormExtra,commentform-loggedin)%>   
  </div>
</form>

Next, replace the contents of the commentform-notloggedin.template file in the same /nucleus/forms/ directory with this code:

<script type="text/javascript"
    src="<%adminurl%>javascript/edit.js">
</script>

<a id="nucleus_cf"></a>
<form method="post" action="#nucleus_cf">
  <div class="commentform">
     <%errordiv%>

   <input type="hidden" name="action" value="addcomment" />
   <input type="hidden" name="url" value="<%formdata(destinationurl)%>" />
   <input type="hidden" name="itemid" value="<%itemid%>" />
   <label for="inputbody"><%text(_COMMENTFORM_COMMENT)%></label>:
<div class="jsbuttonbar">
         <span class="jsbutton"
               onmouseover="BtnHighlight(this);"
               onmouseout="BtnNormal(this);"
               onclick="boldThis()" >         
               <img src="<%adminurl%>images/button-bold.gif" alt="" width="16" height="16"/>
        </span>            
        <span class="jsbutton"
               onmouseover="BtnHighlight(this);"
               onmouseout="BtnNormal(this);"
               onclick="italicThis()" >         
               <img src="<%adminurl%>images/button-italic.gif" alt="" width="16" height="16"/>
         </span>            
         <span class="jsbuttonspacer">
         </span>         
         <span class="jsbutton"
               onmouseover="BtnHighlight(this);"
               onmouseout="BtnNormal(this);"
               onclick="ahrefThis()" >         
               <img src="<%adminurl%>images/button-link.gif" alt="" width="16" height="16"/>
         </span>            
        </div>

   <textarea name="body" class="formfield" tabindex="10" cols="40" rows="10" id="inputbody"
   onkeyup="storeCaret(this);"
   onclick="storeCaret(this);"
   onselect="storeCaret(this);">
   <%formdata(body)%> </textarea>


   <label for="nucleus_cf_name"><%text(_COMMENTFORM_NAME)%></label>: <input name="user" size="40" maxlength="40" value="<%formdata(user)%>" class="formfield" id="nucleus_cf_name" />


   <label for="nucleus_cf_mail"><%text(_COMMENTFORM_MAIL)%></label>: <input name="userid" size="40" maxlength="60" value="<%formdata(userid)%>" class="formfield" id="nucleus_cf_mail" />

   <%callback(FormExtra,commentform-notloggedin)%>   

   <input type="checkbox" value="1" name="remember" id="nucleus_cf_remember" <%formdata(rememberchecked)%> /><label for="nucleus_cf_remember"><%text(_COMMENTFORM_REMEMBER)%></label>


   <input type="submit" value="<%text(_COMMENTFORM_SUBMIT)%>" class="formbutton" />
  </div>
</form>

Now open up the COMMENTS.php file inside the /nucleus/libs/ directory and find this bit of code:

   // prepares the body of a comment (static)
   function prepareBody($body) {
 
      // remove newlines when too many in a row
      $body = ereg_replace("\n.\n.\n","\n",$body);
 
      // encode special characters as entities
      $body = htmlspecialchars($body);
 
      // trim away whitespace and newlines at beginning and end
      $body = trim($body);
 
      // add  tags
      $body = addBreaks($body);
 
      // create hyperlinks for http:// addresses
      // there's a testcase for this in /build/testcases/urllinking.txt
      $replaceFrom = array(
         '/([^:\/\/\w]|^)((https:\/\/)([\w\.-]+)([\/\w+\.~%&?@=_:;#,-]+))/ie',
         '/([^:\/\/\w]|^)((http:\/\/|www\.)([\w\.-]+)([\/\w+\.~%&?@=_:;#,-]+))/ie',
         '/([^:\/\/\w]|^)((ftp:\/\/|ftp\.)([\w\.-]+)([\/\w+\.~%&?@=_:;#,-]+))/ie',
         '/([^:\/\/\w]|^)(mailto:(([a-zA-Z\@\%\.\-\+_])+))/ie'
      );
      $replaceTo = array(
         'COMMENT::createLinkCode("\\1", "\\2","https")',
         'COMMENT::createLinkCode("\\1", "\\2","http")',
         'COMMENT::createLinkCode("\\1", "\\2","ftp")',
         'COMMENT::createLinkCode("\\1", "\\3","mailto")'
      );
      $body = preg_replace($replaceFrom, $replaceTo, $body);
 
      return $body;
   }

Replace the above section of code with this code:

   // prepares the body of a comment (static)
   function prepareBody($body) {
 
      // remove newlines when too many in a row
      $body = ereg_replace("\n.\n.\n","\n",$body);
 
 
// sooz [?]      
//                $body = addslashes ($body);
 
 
      // trim away whitespace and newlines at beginning and end
      $body = trim($body);
 
      // add  tags
      $body = addBreaks($body);
 
      return $body;
   }

You should now see three icons in your Add Comment area for Bold, Italics and Links.

Nucleus FAQ

Navigation

Plugins & Hacks

Is it possible to get an editing toolbar in the Add Comment form like the one in the Add Item admin page?

Please tell us how useful this answer was to you (0 = useless, 10 = very very helpful):