Page 1 of 1

Adding TinyMCE to ticket interface

Posted: Tue May 28, 2013 12:50 am
by 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?

Re: Adding TinyMCE to ticket interface

Posted: Tue May 28, 2013 6:40 pm
by Klemen
This would require modifying the posting function and changes of such magnitude are unfortunately out of the scope of my support.

Re: Adding TinyMCE to ticket interface

Posted: Mon Jul 08, 2013 8:45 am
by 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.

Re: Adding TinyMCE to ticket interface

Posted: Mon Jul 08, 2013 10:23 am
by gurdain
excellent work!

Re: Adding TinyMCE to ticket interface

Posted: Mon Jul 08, 2013 12:42 pm
by Klemen
Don't forget to convert message to text before sending it in emails (unless you are also using the html emails hack)!

Re: Adding TinyMCE to ticket interface

Posted: Mon Jul 08, 2013 1:02 pm
by OSWorX
Klemen wrote: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.

Re: Adding TinyMCE to ticket interface

Posted: Wed Jul 17, 2013 10:18 pm
by 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

Re: Adding TinyMCE to ticket interface

Posted: Fri Aug 09, 2013 9:22 am
by 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?

Re: Adding TinyMCE to ticket interface

Posted: Fri Aug 09, 2013 9:42 am
by 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.

Re: Adding TinyMCE to ticket interface

Posted: Fri Aug 09, 2013 11:47 am
by 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

Re: Adding TinyMCE to ticket interface

Posted: Sun May 17, 2015 6:21 am
by battle71
Great job,
but if I would like to add TinyMCE also on "managed_canned.php" what I have to change?

Thank you
Giuseppe