How to Integrate OTRS with htmlArea - dev

2 Jul 2004

      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 /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 
# --
# 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 /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">
$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
(<a target="_blank" href="http://localhost/otrs/index.pl?Action=FAQArticle">http://localhost/otrs/index.pl?Action=FAQArticle</a>). 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:
<a target="_blank" href="http://www.interactivetools.com/forum/forum.cgi?forum=18">http://www.interactivetools.com/forum/forum.cgi?forum=18</a>. 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
         <a target="_blank" href="http://www.otrs.de/">http://www.otrs.de/</a> :: Tel. +49 (0)6172 4832388</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/dev@lists.otrs.org/message/VQGSOT22PTE2PSLGNR63QMMN3ERXSM3I/"
             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/dev@lists.otrs.org/message/VQGSOT22PTE2PSLGNR63QMMN3ERXSM3I/vote">
    <input type="hidden" name="csrfmiddlewaretoken" value="NdhQM8dma1VUx4C5mf8n9bAGhu2PkyCLF7KXmRI5hTZrA1gpOcNcKclc9AuWst5S">

			<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/dev%40lists.otrs.org/thread/VQGSOT22PTE2PSLGNR63QMMN3ERXSM3I/#">
                Sign in to reply online
            </a>
            <a class="btn btn-sm btn-secondary reply-mailto"
                       href="mailto:dev@lists.otrs.org?Subject=Re%3A%20%5Bdev%5D%20How%20to%20Integrate%20OTRS%20with%20htmlArea&In-Reply-To=<017001c4600d%246778ae20%240164a8c0%40intern.roknet.de>"
                       >Use email software</a></li>
        </div>

    </div>

</div>

                    <!-- End first email -->

                    <p class="sort-mode">

                        <a href="/hyperkitty/list/dev@lists.otrs.org/thread/VQGSOT22PTE2PSLGNR63QMMN3ERXSM3I/?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">7706</span>
        <div class="days-text">
          Age (days ago)
        </div>
      </div>
      <div class="col">
        <span class="days-num">7706</span>
        <div class="days-text">
          Last active (days ago)
        </div>
        </div>
    </div> <!-- /Stats re: dates -->

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

    <a href="/hyperkitty/list/dev@lists.otrs.org/export/dev@lists.otrs.org-VQGSOT22PTE2PSLGNR63QMMN3ERXSM3I.mbox.gz?thread=VQGSOT22PTE2PSLGNR63QMMN3ERXSM3I" 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/dev@lists.otrs.org/thread/VQGSOT22PTE2PSLGNR63QMMN3ERXSM3I/favorite">
        <input type="hidden" name="csrfmiddlewaretoken" value="NdhQM8dma1VUx4C5mf8n9bAGhu2PkyCLF7KXmRI5hTZrA1gpOcNcKclc9AuWst5S">
        <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/507a8cfea200236c373b3df017124ec2.jpg?s=48&d=mm&r=g" width="48" height="48" alt="" /></div>
                <div class="participant-name d-flex align-items-center">
                    <span>Robert Kehl</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/dev@lists.otrs.org/thread/VQGSOT22PTE2PSLGNR63QMMN3ERXSM3I/replies?sort=thread&last_view=");
        setup_unreadnavbar("#unreadnavbar");
        setup_thread_keyboard_shortcuts();
    });
</script>

    </body>
</html>