Re: html is being stripped out - otrs

24 Aug 2006

      As promised here are the notes on how i switched otrs from plain/text to 
html emails.
these are pretty much from memory, so i'm not expecting any awards for 
style.

This configuration is the best solution for our needs & can be tweaked 
further
(this setup sends html, accepts html, but will still strip the original 
html from outgoing reply messages (if you choose to ReplyWithContent)).
While on the QueueView it will only say, this is an html message & wont 
show the content (there is a link that you can choose to show the 
content in a popup) this setup is the easiest to maintain, so its what i 
documented)
if you wanted you could force it to show the message, but its not really 
worth it in our case.

on each of your responses/autoresponses you can add
<html><body><pre> --your templated response-- </pre></body></html>.

you can also change your default compose content:
sysconfig-> Ticket -> Frontend::Agent::Ticket::ViewCompose

Disable the AutoHTML2Text:
Config Options: sysconfig -> Ticket -> Core::PostMaster

Switch from plain text to text/html
Kernel/Modules/AgentTicketCompose.pm
around line 563 (section:    # send email) & change it to: Type => 
'text/html',

Kernel/System/Ticket/Article.pm
around line 2002 (section:  # send email) & change it to: Type => 
'text/html',

(if you run a find|grep for "text/plain" from /Kernel you will see there 
are plenty of further areas for conversion, but this is all thats needed 
for our needs)

Now when you attempt to compose an answer the default otrs textarea is 
kinda naff if you want to write html.
So you can follow my example & hide the textarea & instead use a 
RichTextEditor
eg. http://www.mozilla.org/editor/midasdemo/

(i have attached my current Composer code.
This works on mozilla & should work on ie. with no mods)
also this can also be impoved greatly, but its is a very simple setup & 
easily reversable)

essentially:
1. get the midas code
2. edit Kernel/Output/HTML/Standard/AgentTicketCompose.dtl
3. inside function submit_compose()  stick this:
// Swap the richtext content back into the otrs textarea
document.getElementById("Body").value=document.getElementById("edit").contentWindow.document.body.innerHTML; 

4. inside fuction SpellCheckSubmit()
change it to spellecheck the RichTextArea:     
//document.spelling.Body.value = document.compose.Body.value;
      document.spelling.Body.value = 
document.getElementById("edit").contentWindow.document.body.innerHTML;

5. Around line 150 stick in the midas code
(you want to paste it just after these 2 lines)
  <td class="contentkey">$Text{"Text"}:</td>
  <td class="contentvalue" valign="top">
    <!-- midas code here -->

6. Wrap the original textarea in a hidden box
(you can do this last so you can test the rte contains the right content)
  <div style="visibility:hidden;height:0">
                             $Data{"ResponseFormat"}
          </textarea>
  </div>

7. inside the fuction Start(), insert this line:
  // Copy the content form the hidden texatarea into the RTE area
 document.getElementById('edit').contentWindow.document.body.innerHTML=document.getElementById("Body").innerHTML; 

8. save
that should be that. It is more than likely my line numbers are 
different, hence my attachment.
9. you can normalize & tidy it as much as you like.
10. you could also remove the original textarea since its now redundant

You can now test it.
you can confirm what its doing by launching your mysql & running this 
query given the ticket number
select a_content_type from article where ticket_id=126;
where you can confirm its sending in text/html format.

anyway. enjoy

(oh, and my original problem actually turned out to be the most suitable 
format.... go figure )

# --
# AgentTicketCompose.dtl - provides HTML form for AgentTicketCompose
# Copyright (C) 2001-2005 Martin Edenhofer <martin+code@otrs.org>
# --
# $Id: AgentTicketCompose.dtl,v 1.10 2005/08/05 08:11:45 rk Exp $
# --
# This software comes with ABSOLUTELY NO WARRANTY. For details, see
# the enclosed file COPYING for license information (GPL). If you
# did not receive this file, see <a target="_blank" href="http://www.gnu.org/licenses/gpl.txt">http://www.gnu.org/licenses/gpl.txt</a>.
# --
<!-- start compose form -->

<script language="JavaScript" type="text/javascript">
<!--
function submit_compose()
{

// Swap the richtext content into the otrs textarea
document.getElementById("Body").value=document.getElementById("edit").contentWindow.document.body.innerHTML;

    if (document.compose.To.value == "") {
        alert('$Text{"A message should have a To: recipient!"}');
        document.compose.To.focus();
        return false;
    }
    else if (document.compose.Subject.value == "") {
        alert('$Text{"A message should have a subject!"}');
        document.compose.Subject.focus();
        return false;
    }
    else if (document.spelling.was_spell_checked != true && $Config{"Ticket::Frontend::NeedSpellCheck"}) {
        alert('$Text{"A message must be spell checked!"}');
        //###document.compose.Body.focus();
	document.getElementById("edit").contentWindow.document.body.focus();
        return false;
    }
    else if (isNaN(document.compose.Day.value) || isNaN(document.compose.Month.value) || isNaN(document.compose.Year.value) || isNaN(document.compose.Hour.value) || isNaN(document.compose.Minute.value)) {
        alert('$Text{"Invalid date!"}');
        return false;
    }
    else if (document.compose.Day.value < 1 || document.compose.Day.value > 31 || document.compose.Month.value < 1 || document.compose.Month.value > 31 || document.compose.Year.value < 999 || document.compose.Year.value > 10000 || document.compose.Hour.value < 0 || document.compose.Hour.value > 23 ||document.compose.Minute.value < 0 || document.compose.Minute.value > 59  ) {
        alert('$Text{"Invalid date!"}');
        return false;
    }
<!-- dtl:block:TimeUnitsJs -->
    else if (document.compose.TimeUnits.value != "") {
        var reg = /^-{0,1}\d+?((\.|,){0,1}\d+?){0,1}$/;
        if (reg.test(document.compose.TimeUnits.value) == false) {
            alert('$Text{"Invalid time!"}');
            document.compose.TimeUnits.focus();
            return false;
        }
    }
    else if (document.compose.TimeUnits.value == "" && $Config{"Ticket::Frontend::NeedAccountedTime"}) {
        alert('$Text{"You need to account time!"}');
        document.compose.Subject.focus();
        return false;
    }
<!-- dtl:block:TimeUnitsJs -->
    else {
        return true;
    }
}
//-->
</script>
<script language="JavaScript" type="text/javascript">
<!--
function SpellCheckSubmit()
{
    //document.spelling.Body.value = document.compose.Body.value;
	document.spelling.Body.value = document.getElementById("edit").contentWindow.document.body.innerHTML;
    window.open('', 'spelling', 'toolbar=no,location=no,status=yes,scrollbars=yes,resizable=yes,width=700,height=550,left=100,top=100');
    document.spelling.submit()
    document.spelling.was_spell_checked=true;
}
// -->
</script>

<script language="JavaScript" type="text/javascript">
<!--
function BookCheckSubmit()
{
    document.book.To.value = document.compose.To.value;
    document.book.Cc.value = document.compose.Cc.value;
    document.book.Bcc.value = document.compose.Bcc.value;
    window.open('', 'book', 'toolbar=no,location=no,status=yes,scrollbars=yes,resizable=yes,width=700,height=550,left=100,top=100');
    document.book.submit()
    document.book.was_spell_checked=true;
}
// -->
</script>

<script language="JavaScript" type="text/javascript">
<!--
function FAQSubmit()
{
    window.open('', 'faq', 'toolbar=no,location=no,status=yes,scrollbars=yes,resizable=yes,width=700,height=550,left=100,top=100');
    document.faq.submit()
}
// -->
</script>

<table border="0" width="100%" cellspacing="0" cellpadding="3" cols="1">
<tr>
  <td class="mainhead2">
    $Env{"Box0"}$Text{"Compose answer for ticket"}: $Data{"TicketNumber"}$Env{"Box1"}
  </td>
</tr>
$Include{"AgentTicketLocked"}
<tr>
  <td class="mainbody">

  <form action="$Env{"CGIHandle"}" method="post" enctype="multipart/form-data" name="compose">
  <input type="hidden" name="Action" value="$Env{"Action"}">
  <input type="hidden" name="Subaction" value="SendEmail">
  <input type="hidden" name="TicketID" value="$QData{"TicketID"}">
  <input type="hidden" name="Email" value="$QData{"Email"}">
  <input type="hidden" name="InReplyTo" value="$QData{"InReplyTo"}">
  <input type="hidden" name="FormID" value="$QData{"FormID"}">
  <table border="0" width="100%">
    <tr>
      <td class="contentkey" width="20%">$Text{"From"}:</td>
      <td class="contentvalue" width="80%">$QData{"From"} <input type="hidden" name="From" value="$QData{"From"}"> <font color="red" size="-2">$Data{"From invalid"}</font></td>
    </tr>
    <tr>
      <td class="contentkey">$Text{"To"}:</td>
      <td class="contentvalue"><input type="text" name="To" value="$QData{"To"}" size="80"> <font color="red" size="-2">$Data{"To invalid"}</font></td>
    </tr>
    <tr>
      <td class="contentkey">$Text{"Cc"}:</td>
      <td class="contentvalue"><input type="text" name="Cc" value="$QData{"Cc"}" size="80"> <font color="red" size="-2">$Data{"Cc invalid"}</font></td>
    </tr>
    <tr>
      <td class="contentkey">$Text{"Bcc"}:</td>
      <td class="contentvalue"><input type="text" name="Bcc" value="$QData{"Bcc"}" size="80"> <font color="red" size="-2">$Data{"Bcc invalid"}</font></td>
    </tr>
    <tr>
      <td class="contentkey">$Text{"Subject"}:</td>
      <td class="contentvalue"><input type="text" name="Subject" value="$QData{"Subject"}" size="80"></td>
    </tr>
<!-- dtl:block:Option -->
    <tr>
      <td class="contentkey">$Text{"$QData{"Key"}"}:</td>
      <td class="contentvalue">
      $Data{"Value"} <font color="red" size="-2">$Data{"Invalid"}</font>
      </td>
    </tr>
<!-- dtl:block:Option -->
    <tr>
      <td class="contentkey">$Text{"Options"}:</td>
      <td class="contentvalue">
<!-- dtl:block:SpellCheck -->
       $Env{"Box0"}<a href="" onclick="SpellCheckSubmit(); return false;" onmouseover="window.status='$Text{"Spell Check"}'; return true;" onmouseout="window.status='';"><img border="0" src="$Env{"Images"}spell.png">$Text{"Spell Check"}</a>$Env{"Box1"}
<!-- dtl:block:SpellCheck -->
       $Env{"Box0"}<a href="" onclick="BookCheckSubmit(); return false;" onmouseover="window.status='$Text{"Address Book"}'; return true;" onmouseout="window.status='';"><img border="0" src="$Env{"Images"}contents.png">$Text{"Address Book"}</a>$Env{"Box1"}
       $Env{"Box0"}<a href="#attachment" onmouseover="window.status='$Text{"Attachments"}'; return true;" onmouseout="window.status='';"><img border="0" src="$Env{"Images"}attach.png">$Text{"Attachments"}</a>$Env{"Box1"}
# --
# check if the faq link should be shown
# --
<dtl if ($Env{"UserIsGroupRo[faq]"} eq "Yes") { $Data{"FAQLink"} = "$Env{"Box0"}<a href="" onclick="FAQSubmit(); return false;" onmouseover="window.status='$Text{"FAQ"}'; return true;" onmouseout="window.status='';"><img border="0" src="$Env{"Images"}help-small.png">$Text{"FAQ"}</a>$Env{"Box1"}"; }>
        $Data{"FAQLink"}
      </td>
    </tr>
    <tr>
      <td class="contentkey">$Text{"Text"}:</td>
      <td class="contentvalue" valign="top">

<!--<h2> this bit is still beting tested, use the text version for now</h2>-->
#########################################
<span>
<html>
<head>

<style type="text/css">
.imagebutton {height: 22; width: 23; border: solid 2px #C0C0C0; background-color: #C0C0C0}
.image {position: relative; left: 1; top: 1; height:20; width:21; border:none;}
.toolbar {height: 30; background-color: #C0C0C0;}
</style>

<script>
var command = "";

function InitToolbarButtons() {
  var kids = document.getElementsByTagName('DIV');

  for (var i=0; i < kids.length; i++) {
    if (kids[i].className == "imagebutton") {
      kids[i].onmouseover = tbmouseover;
      kids[i].onmouseout = tbmouseout;
      kids[i].onmousedown = tbmousedown;
      kids[i].onmouseup = tbmouseup;
      kids[i].onclick = tbclick;
    }
  }
}

function tbmousedown(e)
{
  var evt = e ? e : window.event; 

  this.firstChild.style.left = 2;
  this.firstChild.style.top = 2;
  this.style.border="inset 2px";
  if (evt.returnValue) {
    evt.returnValue = false;
  } else if (evt.preventDefault) {
    evt.preventDefault( );
  } else {
    return false;
  }
}

function tbmouseup()
{
  this.firstChild.style.left = 1;
  this.firstChild.style.top = 1;
  this.style.border="outset 2px";
}

function tbmouseout()
{
  this.style.border="solid 2px #C0C0C0";
}

function tbmouseover()
{
  this.style.border="outset 2px";
}

  function insertNodeAtSelection(win, insertNode)
  {
      // get current selection
      var sel = win.getSelection();

      // get the first range of the selection
      // (there's almost always only one range)
      var range = sel.getRangeAt(0);

      // deselect everything
      sel.removeAllRanges();

      // remove content of current selection from document
      range.deleteContents();

      // get location of current selection
      var container = range.startContainer;
      var pos = range.startOffset;

      // make a new range for the new selection
      range=document.createRange();

      if (container.nodeType==3 && insertNode.nodeType==3) {

        // if we insert text in a textnode, do optimized insertion
        container.insertData(pos, insertNode.nodeValue);

        // put cursor after inserted text
        range.setEnd(container, pos+insertNode.length);
        range.setStart(container, pos+insertNode.length);

      } else {

        var afterNode;
        if (container.nodeType==3) {

          // when inserting into a textnode
          // we create 2 new textnodes
          // and put the insertNode in between

          var textNode = container;
          container = textNode.parentNode;
          var text = textNode.nodeValue;

          // text before the split
          var textBefore = text.substr(0,pos);
          // text after the split
          var textAfter = text.substr(pos);

          var beforeNode = document.createTextNode(textBefore);
          afterNode = document.createTextNode(textAfter);

          // insert the 3 new nodes before the old one
          container.insertBefore(afterNode, textNode);
          container.insertBefore(insertNode, afterNode);
          container.insertBefore(beforeNode, insertNode);

          // remove the old node
          container.removeChild(textNode);

        } else {

          // else simply insert the node
          afterNode = container.childNodes[pos];
          container.insertBefore(insertNode, afterNode);
        }

        range.setEnd(afterNode, 0);
        range.setStart(afterNode, 0);
      }

      sel.addRange(range);
  };

function getOffsetTop(elm) {

  var mOffsetTop = elm.offsetTop;
  var mOffsetParent = elm.offsetParent;

  while(mOffsetParent){
    mOffsetTop += mOffsetParent.offsetTop;
    mOffsetParent = mOffsetParent.offsetParent;
  }

  return mOffsetTop;
}

function getOffsetLeft(elm) {

  var mOffsetLeft = elm.offsetLeft;
  var mOffsetParent = elm.offsetParent;

  while(mOffsetParent){
    mOffsetLeft += mOffsetParent.offsetLeft;
    mOffsetParent = mOffsetParent.offsetParent;
  }

  return mOffsetLeft;
}

function tbclick()
{
  if ((this.id == "forecolor") || (this.id == "hilitecolor")) {
    parent.command = this.id;
    buttonElement = document.getElementById(this.id);
    document.getElementById("colorpalette").style.left = getOffsetLeft(buttonElement);
    document.getElementById("colorpalette").style.top = getOffsetTop(buttonElement) + buttonElement.offsetHeight;
    document.getElementById("colorpalette").style.visibility="visible";
  } else if (this.id == "createlink") {
    var szURL = prompt("Enter a URL:", "http://");
    if ((szURL != null) && (szURL != "")) {
      document.getElementById('edit').contentWindow.document.execCommand("CreateLink",false,szURL);
    }
  } else if (this.id == "createimage") {
    imagePath = prompt('Enter Image URL:', 'http://');
    if ((imagePath != null) && (imagePath != "")) {
      document.getElementById('edit').contentWindow.document.execCommand('InsertImage', false, imagePath);
    }
  } else if (this.id == "createtable") {
    e = document.getElementById("edit");
    rowstext = prompt("enter rows");
    colstext = prompt("enter cols");
    rows = parseInt(rowstext);
    cols = parseInt(colstext);
    if ((rows > 0) && (cols > 0)) {
      table = e.contentWindow.document.createElement("table");
      table.setAttribute("border", "1");
      table.setAttribute("cellpadding", "2");
      table.setAttribute("cellspacing", "2");
      tbody = e.contentWindow.document.createElement("tbody");
      for (var i=0; i < rows; i++) {
        tr =e.contentWindow.document.createElement("tr");
        for (var j=0; j < cols; j++) {
          td =e.contentWindow.document.createElement("td");
          br =e.contentWindow.document.createElement("br");
          td.appendChild(br);
          tr.appendChild(td);
        }
        tbody.appendChild(tr);
      }
      table.appendChild(tbody);      
      insertNodeAtSelection(e.contentWindow, table);
    }
  } else {
    document.getElementById('edit').contentWindow.document.execCommand(this.id, false, null);
  }
}

function Select(selectname)
{
  var cursel = document.getElementById(selectname).selectedIndex;
  /* First one is always a label */
  if (cursel != 0) {
    var selected = document.getElementById(selectname).options[cursel].value;
    document.getElementById('edit').contentWindow.document.execCommand(selectname, false, selected);
    document.getElementById(selectname).selectedIndex = 0;
  }
  document.getElementById("edit").contentWindow.focus();
}

function dismisscolorpalette()
{
  document.getElementById("colorpalette").style.visibility="hidden";
}

function Start() {
  document.getElementById('edit').contentWindow.document.designMode = "on";
  try {
    document.getElementById('edit').contentWindow.document.execCommand("undo", false, null);
  }  catch (e) {
    alert("This demo is not supported on your level of Mozilla.");
  }

document.getElementById('edit').contentWindow.document.body.innerHTML=document.getElementById("Body").innerHTML;
//document.getElementById('edit').contentWindow.document.body.innerText=document.getElementById("Body").innerHTML;

  InitToolbarButtons();
  if (document.addEventListener) {
    document.addEventListener("mousedown", dismisscolorpalette, true);
    document.getElementById("edit").contentWindow.document.addEventListener("mousedown", dismisscolorpalette, true);
    document.addEventListener("keypress", dismisscolorpalette, true);
    document.getElementById("edit").contentWindow.document.addEventListener("keypress", dismisscolorpalette, true);
  } else if (document.attachEvent) {
    document.attachEvent("mousedown", dismisscolorpalette, true);
    document.getElementById("edit").contentWindow.document.attachEvent("mousedown", dismisscolorpalette, true);
    document.attachEvent("keypress", dismisscolorpalette, true);
    document.getElementById("edit").contentWindow.document.attachEvent("keypress", dismisscolorpalette, true);
  }
document.getElementById('edit').contentWindow.focus();
}

</script>
</head>
<body onLoad="Start();">
<p/>The Cut, Copy, and Paste buttons below are disabled for security reasons. <br/>To enable them you need to <a href="securityprefs.html">edit your preferences file</a>.(but you can still use the middle button <img src="/otrs-web/images/wink.gif")

<table bgcolor="#C0C0C0" id="toolbar1">
<tr>
<td>
<div class="imagebutton" id="cut"><img class="image" src="/otrs-web/images/cut.gif" alt="Cut" title="Cut"></div>
</td>
<td>
<div class="imagebutton" id="copy"><img class="image" src="/otrs-web/images/copy.gif" alt="Copy" title="Copy"></div>
</td>
<td>
<div class="imagebutton" id="paste"><img class="image" src="/otrs-web/images/paste.gif" alt="Paste" title="Paste"></div>
<td>
</td>
<td>
</td>
<td>
<div class="imagebutton" id="undo"><img class="image" src="/otrs-web/images/undo.gif" alt="Undo" title="Undo"></div>

</td>
<td>
<div class="imagebutton" id="redo"><img class="image" src="/otrs-web/images/redo.gif" alt="Redo" title="Redo"></div>
</td>
<td>
</td>
<td>
<div style="left: 10;" class="imagebutton" id="createlink"><img class="image" src="/otrs-web/images/link.gif" alt="Insert Link" title="Insert Link"></div>
</td>
<td>
<div style="left: 10;" class="imagebutton" id="createimage"><img class="image" src="/otrs-web/images/image.gif" alt="Insert Image" title="Insert Image"></div>
</td>
<td>
</td>
<td>
<div style="left: 10;" class="imagebutton" id="createtable"><img class="image" src="/otrs-web/images/table.gif" alt="Insert Table" title="Insert Table"></div>
</td>

</tr>
</table>
<table bgcolor="#C0C0C0" id="toolbar2">
<tr>
<td>
<select id="formatblock" onchange="Select(this.id);">
  <option value="<p>">Normal</option>
  <option value="<p>">Paragraph</option>
  <option value="<h1>">Heading 1 <H1></option>
  <option value="<h2>">Heading 2 <H2></option>

  <option value="<h3>">Heading 3 <H3></option>
  <option value="<h4>">Heading 4 <H4></option>
  <option value="<h5>">Heading 5 <H5></option>
  <option value="<h6>">Heading 6 <H6></option>
  <option value="<address>">Address <ADDR></option>
  <option value="<pre>">Formatted <PRE></option>

</select>
</td>
<td>
<select id="fontname" onchange="Select(this.id);">
  <option value="Font">Font</option>
  <option value="Arial">Arial</option>
  <option value="Courier">Courier</option>
  <option value="Times New Roman">Times New Roman</option>
</select>

</td>
<td>
<select unselectable="on" id="fontsize" onchange="Select(this.id);">
  <option value="Size">Size</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>

  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>  
</select>
</td>
<td>
<div class="imagebutton" id="bold"><img class="image" src="/otrs-web/images/bold.gif" alt="Bold" title="Bold"></div>
</td>
<td>
<div class="imagebutton" id="italic"><img class="image" src="/otrs-web/images/italic.gif" alt="Italic" title="Italic"></div>
</td>

<td>
<div class="imagebutton" id="underline"><img class="image" src="/otrs-web/images/underline.gif" alt="Underline" title="Underline"></div>
</td>
<td>
</td>
<td>
<div style="left: 10;" class="imagebutton" id="forecolor"><img class="image" src="/otrs-web/images/forecolor.gif" alt="Text Color" title="Text Color"></div>
</td>
<td>
<div style="left: 40;" class="imagebutton" id="hilitecolor"><img class="image" src="/otrs-web/images/backcolor.gif" alt="Background Color" title="Background Color"></div>
</td>
<td>
</td>
<td>
<div style="left: 10;" class="imagebutton" id="justifyleft"><img class="image" src="/otrs-web/images/justifyleft.gif" alt="Align Left" title="Align Left"></div>
</td>
<td>

<div style="left: 40;" class="imagebutton" id="justifycenter"><img class="image" src="/otrs-web/images/justifycenter.gif" alt="Center" title="Center"></div>
</td>
<td>
<div style="left: 70;" class="imagebutton" id="justifyright"><img class="image" src="/otrs-web/images/justifyright.gif" alt="Align Right" title="Align Right"></div>
</td>
<td>
</td>
<td>
<div style="left: 10;" class="imagebutton" id="insertorderedlist"><img class="image" src="/otrs-web/images/orderedlist.gif" alt="Ordered List" title="Ordered List"></div>
</td>
<td>
<div style="left: 40;" class="imagebutton" id="insertunorderedlist"><img class="image" src="/otrs-web/images/unorderedlist.gif" alt="Unordered List" title="Unordered List"></div>
</td>
<td>
</td>
<td>
<div style="left: 10;" class="imagebutton" id="outdent"><img class="image" src="/otrs-web/images/outdent.gif" alt="Outdent" title="Outdent"></div>

</td>
<td>
<div style="left: 40;" class="imagebutton" id="indent"><img class="image" src="/otrs-web/images/indent.gif" alt="Indent" title="Indent"></div>
</td>
</tr>
</table>
<br>
<iframe id="edit" width="70%" height="500px"></iframe>
<iframe width="250" height="170" id="colorpalette" src="/otrs-web/colors.html" style="visibility:hidden; position: absolute;"></iframe>

<script>
function viewsource(source)
{
  var html;
  if (source) {
    html = document.createTextNode(document.getElementById('edit').contentWindow.document.body.innerHTML);
    document.getElementById('edit').contentWindow.document.body.innerHTML = "";
    html = document.getElementById('edit').contentWindow.document.importNode(html,false);
	document.getElementById('edit').contentWindow.document.body.appendChild(html);
    document.getElementById("toolbar1").style.visibility="hidden";
    document.getElementById("toolbar2").style.visibility="hidden";  
  } else {
    html = document.getElementById('edit').contentWindow.document.body.ownerDocument.createRange();
    html.selectNodeContents(document.getElementById('edit').contentWindow.document.body);
    document.getElementById('edit').contentWindow.document.body.innerHTML = html.toString();
    document.getElementById("toolbar1").style.visibility="visible";
    document.getElementById("toolbar2").style.visibility="visible";  
  }
}

function usecss(source)
{
  document.getElementById('edit').contentWindow.document.execCommand("useCSS", false, !(source));  
}

function readonly(source)
{
    document.getElementById('edit').contentWindow.document.execCommand("readonly", false, !(source));  
}
</script>

<table>
 <tr>
  <td><input type="checkbox" onclick="viewsource(this.checked)"> View HTML Source</input></td>
  <td>
<div style="visibility:hidden;height:0">
	<textarea id="Body" name="Body" rows="1" cols="$Config{"Ticket::Frontend::TextAreaEmail"}" >
		 $Data{"ResponseFormat"}
	</textarea>
</div>
 </td>
 </tr><tr>
  <td><input checked type="checkbox" onclick="usecss(this.checked)">Use CSS</input></td>
  <td> </td>
 </tr><tr>
  <td><input type="checkbox" onclick="readonly(this.checked)">Read only</input></td>
  <td> </td>
 </tr>
</table>

</body>
</html>

</span>
##############################
<!--<h2> end of the testing section</h2>-->

<input type="button" onclick="Preview();" value="Preview"><br/>
<script>
function Preview()
{
document.getElementById("Body").value=document.getElementById("edit").contentWindow.document.body.innerHTML;
myPreview=window.open('','myPreview');
myPreview.document.writeln(document.getElementById('Body').value);
myPreview.document.close();
}
</script>

      </td>
    </tr>
# --
# use there are std. attachments for this response
# --
<dtl if ($Data{"StdAttachmentsStrg"} ne "") { $Data{"StdAttachmentsTable"} = "<tr><td>$Text{"Std. Attachment"}:</td><td>$Data{"StdAttachmentsStrg"}</td></tr>"; }>
    $Data{"StdAttachmentsTable"}
#
    <tr>
      <td class="contentkey">$Text{"Attachment"}:</td>
      <td class="contentvalue">
       <table cellspacing="0" cellpadding="0" width="400">
<!-- dtl:block:Attachment -->
         <tr><td>$QData{"Filename"}</td><td>$QData{"Filesize"}</td><td align="right"><input type="submit" name="AttachmentDelete$QData{"FileID"}" value="$Text{"Delete"}"></td></tr>
<!-- dtl:block:Attachment -->
         <tr><td colspan="2">
         <input name="file_upload" type="file" size="40" class="fixed"></td><td align="right"><input type="submit" name="AttachmentUpload" value="$Text{"Attach"}"><a name="attachment">
       </td></tr>
       </table>
      </td>
    </tr>
    <tr>
      <td class="contentkey">$Text{"Next ticket state"}:</td>
      <td class="contentvalue">$Data{"NextStatesStrg"}</td>
    </tr>
    <tr>
      <td class="contentkey">$Text{"Pending Date"} ($Text{"for pending* states"}):</td>
      <td class="contentvalue">$Data{"PendingDateString"} <font color="red" size="-2">$Text{"$Data{"Date invalid"}"}</font> </td>
    </tr>
#    <tr>
#      <td class="contentkey">$Data{"TicketFreeKeyField1"}:</td>
#      <td class="contentvalue">$Data{"TicketFreeTextField1"}</td>
#    </tr>
#   <tr>
#      <td class="contentkey">$Data{"TicketFreeKeyField2"}:</td>
#      <td class="contentvalue">$Data{"TicketFreeTextField2"}</td>
#   </tr>
#   <tr>
#      <td class="contentkey">$Data{"TicketFreeKeyField3"}:</td>
#      <td class="contentvalue">$Data{"TicketFreeTextField3"}</td>
#   </tr>
#   <tr>
#      <td class="contentkey">$Data{"TicketFreeKeyField4"}:</td>
#      <td class="contentvalue">$Data{"TicketFreeTextField4"}</td>
#   </tr>
#   <tr>
#      <td class="contentkey">$Data{"TicketFreeKeyField5"}:</td>
#      <td class="contentvalue">$Data{"TicketFreeTextField5"}</td>
#   </tr>
#   <tr>
#      <td class="contentkey">$Data{"TicketFreeKeyField6"}:</td>
#      <td class="contentvalue">$Data{"TicketFreeTextField6"}</td>
#   </tr>
#   <tr>
#      <td class="contentkey">$Data{"TicketFreeKeyField7"}:</td>
#      <td class="contentvalue">$Data{"TicketFreeTextField7"}</td>
#   </tr>
#   <tr>
#      <td class="contentkey">$Data{"TicketFreeKeyField8"}:</td>
#      <td class="contentvalue">$Data{"TicketFreeTextField8"}</td>
#   </tr>
<!-- dtl:block:TimeUnits -->
    <tr>
      <td class="contentkey">$Text{"Time units"}$Text{"$Config{"Ticket::Frontend::TimeUnits"}"}:</td>
      <td class="contentvalue"><input type="text" name="TimeUnits" value="$Data{"TimeUnits"}" size="3"></td>
    </tr>
<!-- dtl:block:TimeUnits -->
  </table>
  <br>
  <input class="button" accesskey="g" type="submit" value="$Text{"Send mail!"}" onclick="return submit_compose();">
  </form>

  <form action="$Env{"CGIHandle"}" method="post" name="spelling" target="spelling">
  <input type="hidden" name="Action" value="AgentSpelling">
  <input type="hidden" name="Body" value="">
  <input type="hidden" name="spell_lang" value="">
  </form>

  <form action="$Env{"CGIHandle"}" method="post" name="book" target="book">
  <input type="hidden" name="Action" value="AgentBook">
  <input type="hidden" name="To" value="">
  <input type="hidden" name="Cc" value="">
  <input type="hidden" name="Bcc" value="">
  </form>

  <form action="$Env{"CGIHandle"}" method="post" name="faq" target="faq">
  <input type="hidden" name="Action" value="FAQ">
  <input type="hidden" name="Nav" value="None">
  <input type="hidden" name="Body" value="">
  <input type="hidden" name="Subject" value="">
  <input type="hidden" name="What" value="">
  </form>

  </td>
</tr>
</table>
<!-- end compose form --></p>

    </div>

    <div class="email-info">
      <div class="likeform-wrapper right">
        <div class="messagelink pull-right">
          <button class="toggle-font btn btn-sm"
                title="Display in fixed font"
                data-bs-toggle="tooltip" data-placement="bottom">
                <i class="fa fa-font"></i>
          </button>
          <a href="/hyperkitty/list/otrs@lists.otrs.org/message/5MG4AAPHATSKTHCUWGNFSNH643K4Q6M4/"
             title="Permalink for this message"
             data-bs-toggle="tooltip" data-placement="bottom"><i class="fa fa-link"></i></a>
        </div>

    <form method="post" class="likeform"
          action="/hyperkitty/list/otrs@lists.otrs.org/message/5MG4AAPHATSKTHCUWGNFSNH643K4Q6M4/vote">
    <input type="hidden" name="csrfmiddlewaretoken" value="PrIYfbACDeHxeSCANkLM1qexk8RSAIOoI0O1vfPcYdPORjERc2rzdFPha99BgDLk">

			<a class="youlike vote  disabled" title="You must be logged-in to vote."
			href="#like" data-vote="1" aria-label="Like thread">
					<i class="fa fa-thumbs-o-up"></i> 0
			</a>
			<a class="youdislike vote disabled" title="You must be logged-in to vote."
			href="#dislike" data-vote="-1" aria-label="Dislike thread">
				<i class="fa fa-thumbs-o-down"></i> 0
			</a>

    </form>

        </div>

        <!-- Reply link -->

        <a class="reply reply-mailto" title="Reply" href="#">
            <i class="fa fa-reply"></i>
            Reply
        </a>

        <!-- Attachments -->

        <!-- Reply form -->

        <div class="reply-form-unauthenticated">
            <a class="btn btn-sm btn-primary" href="/accounts/login/?next=/hyperkitty/list/otrs%40lists.otrs.org/thread/5MG4AAPHATSKTHCUWGNFSNH643K4Q6M4/#">
                Sign in to reply online
            </a>
            <a class="btn btn-sm btn-secondary reply-mailto"
                       href="mailto:otrs@lists.otrs.org?Subject=Re%3A%20%5Botrs%5D%20Re%3A%20html%20is%20being%20stripped%20out&In-Reply-To=<44ED7DA3.70001%40Sun.COM>"
                       >Use email software</a></li>
        </div>

    </div>

</div>

                    <!-- End first email -->

                    <p class="sort-mode">

                        <a href="/hyperkitty/list/otrs@lists.otrs.org/thread/5MG4AAPHATSKTHCUWGNFSNH643K4Q6M4/?sort=date"
                            >Show replies by date</a>

                    </p>

                    <div class="anchor-link">
                        <a id="replies"></a>
                    </div>
                    <div class="replies">

                    </div>

                </div>
            </div>

            <div class="col-12 col-md-3">
                <div class="anchor-link">
                    <a id="stats"></a>
                </div>

<!-- right column -->
<section id="thread-overview-info">
    <!-- Start stats re: dates -->
    <div id="thread-date-info" class="row">
      <div class="col">
        <span class="days-num">6905</span>
        <div class="days-text">
          Age (days ago)
        </div>
      </div>
      <div class="col">
        <span class="days-num">6905</span>
        <div class="days-text">
          Last active (days ago)
        </div>
        </div>
    </div> <!-- /Stats re: dates -->

    <p>
        <a href="/hyperkitty/list/otrs@lists.otrs.org/" class="btn btn-outline-primary btn-sm">
            List overview
        </a>
    </p>

    <a href="/hyperkitty/list/otrs@lists.otrs.org/export/otrs@lists.otrs.org-5MG4AAPHATSKTHCUWGNFSNH643K4Q6M4.mbox.gz?thread=5MG4AAPHATSKTHCUWGNFSNH643K4Q6M4" title="This thread in gzipped mbox format"
          class="btn btn-outline-primary">
        <i class="fa fa-download"></i> Download</a>

    <p class="thread-overview-details">
    <div>
        <i class="fa fa-fw fa-comment"></i>
        0 comments
    </div>
    <div>
        <i class="fa fa-fw fa-user"></i>
        1 participants
    </div>

    </p>

    <form id="fav_form" name="favorite" method="post" class="favorite"
          action="/hyperkitty/list/otrs@lists.otrs.org/thread/5MG4AAPHATSKTHCUWGNFSNH643K4Q6M4/favorite">
        <input type="hidden" name="csrfmiddlewaretoken" value="PrIYfbACDeHxeSCANkLM1qexk8RSAIOoI0O1vfPcYdPORjERc2rzdFPha99BgDLk">
        <input type="hidden" name="action" value="add" />
        <p>
            <a href="#AddFav" class="notsaved disabled" title="You must be logged-in to have favorites.">
                <i class="fa fa-fw fa-star"></i>Add to favorites</a>
            <a href="#RmFav" class="saved">
                <i class="fa fa-fw fa-star"></i>Remove from favorites</a>
        </p>
    </form>

    <div id="tags">

        <h3 id="tag-title">tags </h3>

    </div>

    <div id="participants">
        <h3 id="participants_title">participants (1)</h3>
        <ul class="list-unstyled">

            <li class="d-flex">
                <div class="participant-gravatar circle"><img class="gravatar" src="https://secure.gravatar.com/avatar/f7784ab226f32b46a2befcde4b0dc7b3.jpg?s=48&d=mm&r=g" width="48" height="48" alt="" /></div>
                <div class="participant-name d-flex align-items-center">
                    <span>Stephen Gebbie</span>
                </div>
            </li>

        </ul>
    </div>

</section>

            </div>

        </div>

</div>

<!-- end of content -->

    </div> <!-- /container for content -->

    <footer class="footer">
      <div class="container">
        <p class="text-muted">
            <img class="logo" alt="HyperKitty" src="/static/hyperkitty/img/logo.png" />
            Powered by <a href="http://hyperkitty.readthedocs.org">HyperKitty</a> version 1.3.9.
        </p>
      </div>
    </footer>

    <script src="/static/hyperkitty/libs/jquery/jquery-3.6.0.min.js"></script>
    <script src="/static/hyperkitty/libs/jquery/jquery-ui-1.13.1.min.js"></script>
    <script src="/static/CACHE/js/output.3aaa7705d68a.js"></script>
    <script>
      // Add the .js-enabled class to the body so we can style the elements
      // depending on whether Javascript is enabled.
      $(document).ready(function(){
          $("body").addClass("js-enabled");
          $(".gravatar").addClass("rounded-circle");
      });
    </script>

<script type="text/javascript">
    $(document).ready(function() {
        //enable tooltips for thread buttons
        $("btn#next-thread").tooltip();
        $("btn#prev-thread").tooltip();

        setup_category();
        setup_tags();
        setup_favorites();
        // Hide quotes by default in the thread view
        fold_quotes("div.container-xxl");
        // Load the replies
        update_thread_replies("/hyperkitty/list/otrs@lists.otrs.org/thread/5MG4AAPHATSKTHCUWGNFSNH643K4Q6M4/replies?sort=thread&last_view=");
        setup_unreadnavbar("#unreadnavbar");
        setup_thread_keyboard_shortcuts();
    });
</script>

    </body>
</html>