How to Integrate OTRS with htmlArea

htmlArea is a JavaScript based WYSIWYG editor replacement for any
<textarea> field. It features a word processor like interface to compose
HTML without even knowing about it. This way your users may compose
HTML-FAQs on the fly with a convenient GUI, for example.

htmlArea is published by interactivetools.com
<http://www.interactivetools.com/> under a BSD-style license
<http://www.interactivetools.com/products/htmlarea/license.html>. You
can download htmlArea from the homepage:
<http://www.interactivetools.com/products/htmlarea/>

Install htmlArea. See htmlArea's documentation for this. Make it
accessible via the URI "/htmlarea/". Basically, this means inserting an
alias definition to your httpd.conf. The following line assumes you
installed htmlArea to /usr/local/htmlarea, which may not be the case
with
your installation, so please adapt:

  Alias /htmlarea/ "/usr/local/htmlarea/"

Make sure it is working by visiting
<http://localhost/htmlarea/examples/>. You may later want to delete the
examples, but have a look at them to get an impression of what's
possible with the software.

Create a new theme. Refer to
<http://doc.otrs.org/1.2/en/html/dtl-theme.html> on how to do this. We
will refer to MyTheme in the following as the new Theme.

Create <OTRS_HOME>/Kernel/Output/HTML/MyTheme/htmlarea.dtl with the
following content. Again, adapt the URI of htmlarea if needed.

---snip---
# --
# htmlarea.dtl - Implements htmlArea in OTRS
# Copyright (C) 2004- Dipl.-Ing. Robert Kehl <[EMAIL PROTECTED]>
# --
# 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 http://www.gnu.org/licenses/gpl.txt.
# --
<script type="text/javascript">
  _editor_url = "/htmlarea/";
  _editor_lang = "$Env{"UserLanguage"}";
</script>
<script type="text/javascript" src="/htmlarea/htmlarea.js"></script>
<script type="text/javascript">
function initDocument(myTextArea) {
  var editor = new HTMLArea(myTextArea);
  editor.generate();
  with(document.getElementById(myTextArea+"_on").style){
    if(visibility!="hidden"){visibility="hidden"}
  }
}
</script>
----snap----

Edit <OTRS_HOME>/Kernel/Output/HTML/MyTheme/FAQArticleForm.dtl and
include the following line somewhere to load the above:

  $Include{"htmlarea"}

Now locate a textarea, let's say the one named "Field1". Here's what it
looks like:

 <tr>
  <td class="table1" valign="top">$Text{"$Config{"FAQ::Field1"}"}: </td>
  <td class="table1">
<textarea name="Field1" rows="12" cols="65"
wrap="$Env{"BrowserWrap"}">$Data{"Field1"}</textarea>
 </tr>

Change it to look like this and save the file:

 <tr>
  <td class="table1" valign="top">$Text{"$Config{"FAQ::Field1"}"}: <br>
   <a id="Field1_on"
href="javascript:initDocument('Field1');">HTML-Editor</a>
  </td>
  <td class="table1">
<textarea id="Field1" name="Field1" rows="12" cols="65"
wrap="$Env{"BrowserWrap"}">$Data{"Field1"}</textarea>
 </tr>

You see, we added a new attribute 'id' to the textarea besides the
'name', and added a link to actually display htmlArea. The link's name
is the name of the accompagning textarea with a '_on' appended to it.
Layouted this way, it will disappear after being clicked.

Load the page to edit or create an FAQ entry
(<http://localhost/otrs/index.pl?Action=FAQArticle>). You'll see a new
link underneath the labeling of the first textarea called "HTML Editor".
Click on it, it will disappear and -bingo!- exchange the textarea with
htmlArea. Edit the content to suit you needs, and submit the form as
usual. You need not (and cannot, btw) swith off htmlArea beforehand.

That's it. Feel free to use htmlArea wherever you like to produce
rich-featured, good looking work. Please note that there's much more to
htmlArea than shown here. You may extend it via its plugin functionality
with such fine things like a right-mouse context menu, a spell checker,
CSS support, support for tables and stuff. See htmlArea's accompagning
documentation and examples on how to do it.

Please understand that we cannot cover any support question concerning
htmlArea. Feel free to use their support forum therefore:
<http://www.interactivetools.com/forum/forum.cgi?forum=18>. This
How-To is provided without any warranty. Use at your own risk. Backup
beforehand. Please watch out, lines in the code sniplets might break, so
use with caution when copy/pasting.

With best wishes,

Robert Kehl

--
((otrs.de)) :: OTRS GmbH :: Norsk-Data-Str. 1 :: 61352 Bad Homburg
         http://www.otrs.de/ :: Tel. +49 (0)6172 4832388

_______________________________________________
OTRS mailing list: dev - Webpage: http://otrs.org/
Archive: http://lists.otrs.org/pipermail/dev
To unsubscribe: http://lists.otrs.org/cgi-bin/listinfo/dev

Reply via email to