Adding TinyMCE to ticket interface

[mkoch227]

Script URL: http://support.kandbconsult.com
Version of script: 2.3
Hosting company: Bluehost
URL of phpinfo.php: http://kandbconsult.com/phpinfo.php
URL of session_test.php:
What terms did you try when SEARCHING for a solution:

Write your message below: I was thinking of adding TinyMCE as a rich-text editor for the ticket interface. However, I am unsure if the ticket page will parse HTML. If the ticket page does not parse HTML, how would I tell HESK to parse it?

[Klemen]

This would require modifying the posting function and changes of such magnitude are unfortunately out of the scope of my support.

[OSWorX]

Adding the WYSIWYG editor TiynMCE to the ticket interface (creating new / editing tickets and display them correct) is a matter of 2 minutes.
While to add the following changes are not that difficult, if you are firm with editing core files (.php) ask somebody else.

The first - and most important - is, use a qualified editor!
NO MS Word or soemthing else!

Following steps are based on the latest release 2.5.0 of Hesk (maybe works also in earlier, but not tested).

Step 1:
open ../admin/admin_ticket.php and look for the line (around line 125) :

Code: Select all

/* Get category name and ID */

add BEFORE this:

Code: Select all

define( 'WYSIWYG', 1 );

This is to tell the system that the editor shall be loaded (requires to enable the editor for the knowledgebase).

Step 2:
look for (around line 920)

Code: Select all

<p><?php echo $ticket['message']; ?><br />&nbsp;</p>

and REPLACE with:

Code: Select all

<p><?php echo hesk_html_entity_decode( $ticket['message'] ); ?><br />&nbsp;</p>

look for (around line 1265)

Code: Select all

<p><?php echo $reply['message']; ?></p>

and REPLACE with:

Code: Select all

<p><?php echo hesk_html_entity_decode( $reply['message'] ); ?></p>

look for (around line 1300):

Code: Select all

function hesk_printReplyForm() {

and ADD AFTER (3 lines below)

Code: Select all

<!-- START REPLY FORM -->

this:

Code: Select all

<script type="text/javascript">
    /* <![CDATA[ */
	tinyMCE.init({
		mode : "exact",
		elements : "message",
		theme : "advanced",
        convert_urls : false,

		theme_advanced_buttons1 : "cut,copy,paste,|,undo,redo,|,formatselect,fontselect,fontsizeselect,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull",
		theme_advanced_buttons2 : "sub,sup,|,charmap,|,bullist,numlist,|,outdent,indent,insertdate,inserttime,preview,|,forecolor,backcolor,|,hr,removeformat,visualaid,|,link,unlink,anchor,image,cleanup,code",
		theme_advanced_buttons3 : "",

		theme_advanced_toolbar_location : "top",
		theme_advanced_toolbar_align : "left",
		theme_advanced_statusbar_location : "bottom",
		theme_advanced_resizing : true
	});
    /* ]]> */
</script>

save this file.

Step 3 (frontend):

To display these HTML messages correct to your customers, following file has to be edited:
../ticket.php

look for (around line 450):

Code: Select all

<p><?php echo $ticket['message']; ?><br />&nbsp;</p>

and REPLACE with:

Code: Select all

<p><?php echo html_entity_decode( $ticket['message'], ENT_NOQUOTES, 'UTF-8' ); ?><br />&nbsp;</p>

look for (around line 780):

Code: Select all

<p><?php echo $reply['message']; ?></p>

and REPLACE with:

Code: Select all

<p><?php echo hesk_html_entity_decode( $reply['message'] ); ?></p>

Save this file.

Now the editor is used to edit/create new tickets at the backend - for customers there is still NO editor, too risky (security).
Customer will see their tickets in the frontend created with the editor.

Note: the editor (TinyMCE) is a basic installation (no plugins in a standrad Hesk installation).
To use editor plugins (e.g. embedding images better than the standard way) you have to install these plugins and edit the editor config.
But this is out of scope of this thread.

[gurdain]

excellent work!

[Klemen]

Don't forget to convert message to text before sending it in emails (unless you are also using the html emails hack)!

[OSWorX]

Don't forget to convert message to text before sending it in emails (unless you are also using the html emails hack)!

Correct.

I forgot to mention, that this works with the solution for sending HTML-emails:
viewtopic.php?f=14&t=2603

If you do not use HTML-emails, the text has to be converted back first, otherwise the plain text message will have some ugly tags.

[mkoch227]

Wow, never thought this topic would get this far going. Anyhoo, this tutorial doesn't work in 2.3. Guess I'll hafta live with plain text or upgrade and re-customize everything

[TimPSNC]

Thanks, this is working great apart from one problem- when the email is sent, extra enters are added to the email. So when the message entered is

Hi

My Answer

Tim

It gets changed to

Hi



My answer



Tim

Is there anyway of preserving breaks?

[OSWorX]

There are no additional linebreaks added, only existing text is displayed.
But if there are, they must be already existing - \n from the plain text are converted to <br />.
So please check the message.
If you still have that problem, just write me an email or pm - I could check what is going on/wrong.

[OSWorX]

After checking the sourcecode of the poster above (Tim), I have seen that with my code of editor initialization the editor will encapsule all new lines with a <p>...</p>

To avoid this, just add this to the editor init script (TinyMCE v.4.x):

Code: Select all

forced_root_block : false, // standard 'p'

See: http://www.tinymce.com/wiki.php/Configu ... root_block

For TinyMCE 3.x - which is used here - this line has to be added:

Code: Select all

convert_newlines_to_brs : true

With this, the new init should look like this:

Code: Select all

<script type="text/javascript">
    /* <![CDATA[ */
   tinyMCE.init({
      mode : "exact",
      elements : "message",
      theme : "advanced",
      convert_urls : false,
      convert_newlines_to_brs : true,

      theme_advanced_buttons1 : "cut,copy,paste,|,undo,redo,|,formatselect,fontselect,fontsizeselect,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull",
      theme_advanced_buttons2 : "sub,sup,|,charmap,|,bullist,numlist,|,outdent,indent,insertdate,inserttime,preview,|,forecolor,backcolor,|,hr,removeformat,visualaid,|,link,unlink,anchor,image,cleanup,code",
      theme_advanced_buttons3 : "",

      theme_advanced_toolbar_location : "top",
      theme_advanced_toolbar_align : "left",
      theme_advanced_statusbar_location : "bottom",
      theme_advanced_resizing : true
   });
    /* ]]> */
</script>

New lines are added now with a <br /> instead of a <p> .. </p>

New edit 2013.08.09 - 14:52:
In additon to the init script lines above, to force the editor to use only <br /> instead of <p> .. </p> (which can cause to many useless spaces between your messags), following options can be added to the init script - add them BEFORE theme_advanced_buttons1 :

Code: Select all

force_br_newlines : true,
force_p_newlines : false,
forced_root_block : '', // Needed for 3.x

Full documentation can be found here (v.4.x) : http://www.tinymce.com/wiki.php/Configuration
or v.3.x : http://www.tinymce.com/wiki.php/Configuration3x

[battle71]

Great job,
but if I would like to add TinyMCE also on "managed_canned.php" what I have to change?

Thank you
Giuseppe