Exploring Drupal's Htmlarea module

28-Nov-2007
Filed under: Drupal

I've spent the last two days looking at Drupal's Htmlarea module. Similar to the TinyMCE module, this module acts as a wrapper for the Xinha WYSIWYG editor (Xinha is a fork of the original htmlArea WYSIWYG editor).

I like Xinha, though, as you might expect, it's not without its fair share of issues. The developer community for Xinha seems to be quite active though, and bugs are being addressed.

I've assembled a few preliminary notes here that might help you on your way:

  1. I'm using the ExtendedFileManager plugin, which blows TinyMCE's free offerings out of the water. Just a note taken from this forum post: "ExtendedFileManager is a full replace for and advancement of ImageManager. You don't have to and should not enable both."
  2. I downloaded the latest release of Xinha (0.94 at the time of writing). There is a bug in sites/all/modules/htmlarea/xinha/plugins/ExtendedFileManager/assets/manager.js. See http://xinha.webfactional.com/changeset/918 to download a fixed version of this file.
  3. To get the ExtendedFileManager working properly, I had to make the following changes to the configuration in sites/all/modules/htmlarea/xinha/plugins/ExtendedFileManager/config.inc.php:

    <?php
    /**
    * I've set this up so that my default upload directory is /files/editor.
    * Within /files/editor I have two more subdirectories: images and
    * documents. For the image popup I constrain the user to the
    * /files/editor/images directory, but for the document link popup, I
    * let them see both the documents and images directories.
    */

    /**
    * Double-dotted madness. We have to work our way back from the
    * plugin's directory to our upload directories.
    */
    $IMConfig['images_dir'] = '../../../../../../../files/editor/images';
    $IMConfig['files_dir'] = '../../../../../../../files/editor';

    /**
    * Assumes your Drupal installation is installed on the root of a
    * domain and that /files is your default upload directory.
    */
    $IMConfig['images_url'] = '/files/editor/images';
    $IMConfig['files_url'] = '/files/editor';
    ?>
  4. Finally, I had a requirement to get the InsertSnippet plugin working. In order to get your own snippets to appear in the list of available snippets you have to open up sites/all/modules/htmlarea/xinha/plugins/InsertSnippet/insert_snippet.js and change the following section:
    Xinha.Config.prototype.InsertSnippet =
    {
      'snippets' : _editor_url+"plugins/InsertSnippet/demosnippets.js", // purely demo purposes, you should change this
      'css' : ['../InsertSnippet.css'], //deprecated, CSS is now pulled from xinha_config
      'showInsertVariable': false,
      'backend_data' : null
    };
    so that it reads:
    Xinha.Config.prototype.InsertSnippet =
    {
      'snippets' : _editor_url+"plugins/InsertSnippet/snippets.php",
      'css' : ['../InsertSnippet.css'], //deprecated, CSS is now pulled from xinha_config
      'showInsertVariable': false,
      'backend_data' : null
    };
    Now open sites/all/modules/htmlarea/xinha/plugins/InsertSnippet/snippets.php and change the following line to point to your own snippets file (or leave it be and just change the snippets.html file in the same directory if your snippets are unlikely to change much):
    <?php
    $snippets_file
    = 'snippets.html';
    ?>
    I've made this point to my own script that grabs user-defined snippets (stored as nodes) from the database and generates the appropriate output for the InsertSnippet plugin. See the readme.html file in the InsertSnippet directory for guidance on how to format the snippets output.

Comments

I've tried to install the

I've tried to install the editor but frustated as the editor won't show up on my text area.

Is there any documentation on this matter?

Thanks.

Handbook

You can find the module's handbook page here: http://drupal.org/handbook/modules/htmlarea. Looks a bit thin on information though.

Make sure that your permissions are configured correctly, and post a support request if required: http://drupal.org/project/issues/htmlarea?categories=support&states=all

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

More information about formatting options