Installing and Patching HTMLArea-3.0-beta for sitewide use

By Chris Snyder (email image) on 2003-09-20

This is a guide to installing and patching HTMLArea-3.0-beta so that it can always be loaded from http://yoursite/htmlarea/, even if the page you are using it on is somewhere else on your website.

The patch referenced below allows popupwin.js to discover the baseurl setting from the editor object, instead of making it up from the location of the calling page.

Download HTMLArea-3.0-beta from http://sourceforge.net/projects/itools-htmlarea/
Download the patch file from http://chxo.com/pWhiteboard/HTMLArea-3.0-beta.patch

There are two versions of this guide: one for site owners, and one for sysadmins who wish to make HTMLArea available to a number of virtual hosts.

Userland Installation (site owner)

  1. Unzip the HTMLArea source in your webroot, and rename the directory as htmlarea
    (Let's assume the your http document root is public_html)
    cd public_html
    unzip /path/to/HTMLArea-3.0-beta.zip
    mv HTMLArea-3.0-beta htmlarea
    find htmlarea/ -type f -exec chmod 644 {} \;
    find htmlarea/ -type d -exec chmod 755 {} \;
    find htmlarea/ -name "*.cgi" -exec chmod 755 {} \;
  2. Apply the patch
    cd htmlarea
    patch -Np1 < /path/to/HTMLArea-3.0-beta.patch
  3. Test the installation: go to http://yoursite/htmlarea/index.html and try out the demos

    Note that the spell-checker will not work without the following:
    1. the appropriate Perl modules installed -- see http://yoursite/htmlarea/plugins/SpellChecker/readme-tech.html
    2. permission to execute cgi scripts in /htmlarea/plugins/SpellChecker/ -- ask your sysadmin

  4. Congratulations, you may now use HTMLArea on any of your pages. See the basic example at the bottom of this page.

Server-wide Installation (sysadmin)

  1. Unzip the HTMLArea source in /usr/local, and rename the directory as htmlarea
    cd /usr/local
    unzip /path/to/HTMLArea-3.0-beta.zip
    mv HTMLArea-3.0-beta htmlarea

  2. Set the permissions to be a little more restrictive than the userland version.
    (Let's assume that your webserver runs with a GID of "nobody")
    chown -R root:nobody htmlarea
    find htmlarea/ -type f -exec chmod 640 {} \;
    find htmlarea/ -type d -exec chmod 750 {} \;
    # do the following only if you want to allow SpellCheck:
    # find htmlarea/ -name "*.cgi" -exec chmod 750 {} \;

  3. Apply the patch
    cd htmlarea
    patch -Np1 < /path/to/HTMLArea-3.0-beta.patch
  4. Add the following directives to your httpd.conf.
    Put this is the top-level server configuration to make HTMLArea available to all virtual hosts, or put it into specific virtual host containers to restrict it.
    #############################
    ## HTMLArea alias
    #
    Alias /htmlarea/ /usr/local/htmlarea/
    <Directory "/usr/local/htmlarea/">
            AllowOverride None
          # Uncomment the following two lines to allow SpellCheck
          # Options +ExecCGI
          # AddHandler cgi-script .cgi
            Order allow,deny
            Allow from all
    </Directory>
    #############################

  5. Test the installation: go to http://yoursite/htmlarea/index.html and try out the demos

    Note that the spell-checker will not work unless you allow CGI execution and install the appropriate Perl modules, as detailed in http://yoursite/htmlarea/plugins/SpellChecker/readme-tech.html

  6. Congratulations, your users may now use HTMLArea on any of their pages. See the basic example at the bottom of this page.

An Example of HTMLArea Use

There are really two steps involved in using HTMLArea on a page: loading all of the required scripts, and initializing the editor with an appropriate configuration. The following example will create an HTMLArea with the optional table editing tools:

<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>HTMLArea example</title>

      <!-- htmlarea includes -->
	<script type="text/javascript" src="/htmlarea/htmlarea.js"></script>
	<script type="text/javascript" src="/htmlarea/lang/en.js"></script>
	<script type="text/javascript" src="/htmlarea/dialog.js"></script>
	<script type="text/javascript" src="/htmlarea/popupwin.js"></script>
	<!-- load the TableOperations plugin files -->
	<script type="text/javascript" src="/htmlarea/plugins/TableOperations/table-operations.js"></script>
	<script type="text/javascript" src="/htmlarea/plugins/TableOperations/lang/en.js"></script>
	<style type="text/css">@import url(/htmlarea/htmlarea.css);</style>
      <!-- end of htmlarea includes -->

</head>
<body>

<!-- here is the form, with the textarea (named "content") to be replaced -->
<form id="edit" name="edit" action="youraction.php" method="post">
	<textarea id="content" name="content" rows="30" cols="80">
		&lt;h1&gt;html source to be edited here&lt;/h1&gt;
	</textarea>
	<input type="submit" name="submit" value="Save" />
</form>

<!-- and here is the script which initializes and configures the editor -->
<script type="text/javascript">
    var config = new HTMLArea.Config();
    config.editorURL = '/htmlarea/';

    // uncomment the following if you wish to apply a stylesheet to the html that is being edited
    // config.pageStyle = "@import url(/optional/stylesheet.css);";

    // create the editor
    editor = new HTMLArea("content", config);

    // register the TableOperations plugin with the editor
    editor.registerPlugin("TableOperations");

    editor.generate();
</script>
<!-- end of initialization script -->

</body>
</html>
For more information and other examples of how to customise HTMLArea to suit your needs, you should consult the documentation that comes with it.
See http://yoursite/htmlarea/reference.html