Use HTMLArea as WYSIWYG editor

HTMLArea configuration and troubleshooting

While it's true that all you need is one line of JavaScript to create an htmlArea WYSIWYG editor, you can also specify more configuration settings in the code to control how the editor works and looks. For details how to configure, see the original HTMLArea website http://dynarch.com/mishoo/htmlarea.epl

Customize HTMLArea

As mentioned in the HTMLArea docs, never make modifications in the original HTMLArea sources. Apply all extensions and configurations in separate files.

I made all the customization in a new file called htmlareaconfig.js and saved the file in the same directory as the htmlarea sources. It is important to load the plugins first, then create the HTMLArea widget en then let the widget create its HTML on a body onload event, or else Internet Explorer will never display the WYSIWYG editor. My htmlareaconfig.js file:

// Register plugins
HTMLArea.loadPlugin("TableOperations");
HTMLArea.loadPlugin("FullPage");
HTMLArea.loadPlugin("ContextMenu");
HTMLArea.loadPlugin("HtmlTidy");
HTMLArea.loadPlugin("ListType");

/* Create configured htmlarea */
function createCustomHTMLArea( editor_id ) {

var config = new HTMLArea.Config(); // create a new configuration object
// having all the default values

// Customized toolbar
config.toolbar = [
[ "fontname", "space",
"fontsize", "space",
"formatblock", "space",
"bold", "italic", "underline", "strikethrough", "separator",
"subscript", "superscript", "separator",
"copy", "cut", "paste", "space", "undo", "redo" ],

[ "justifyleft", "justifycenter", "justifyright", "justifyfull",
"separator",
"orderedlist", "unorderedlist", "outdent", "indent", "separator",
"forecolor", "hilitecolor", "separator",
"inserthorizontalrule", "createlink", "insertimage", "inserttable",
"htmlmode", "separator", "popupeditor" ] ];

// Create editor
editor = new HTMLArea( editor_id, config );
editor.registerPlugin(TableOperations);
editor.registerPlugin(HtmlTidy);
editor.registerPlugin(ListType);
editor.registerPlugin("ContextMenu");

// Wait 500mS to settle down and then generate the HTML
setTimeout(function() { editor.generate(); }, 500);
}

In /inc/app/cms/forms/add/sitellite_page/index.php changes the following lines somewhat:

page_add_script ('_editor_url = "/htmlarea/";
_editor_lang = "en";');
page_add_script ('/htmlarea/htmlarea.js');
page_add_script ('/htmlarea/htmlareaconfig.js');
page_onload ('createCustomHTMLArea(\'body\');');

Plugins get not initialized: Preload Plugins

Sometimes the plugins don't get loaded. Then try the this:

In htmlarea.js in the function 'HTMLArea.loadPlugin' include the javascript for the plugins by a document.write() instead of the elegant DOM methode. It solved the problem in IE for me. Mozilla offcourse had no problems with it...

My loadPlugin functions (app. line 960):

HTMLArea.loadPlugin = function(pluginName) {
var dir = _editor_url + "plugins/" + pluginName;
var plugin = pluginName.replace(/([a-z])([A-Z])([a-z])/g,
function (str, l1, l2, l3) {
return l1 + "-" + l2.toLowerCase() + l3;
}).toLowerCase() + ".js";
var plugin_file = dir + "/" + plugin;
var plugin_lang = dir + "/lang/" + HTMLArea.I18N.lang + ".js";
HTMLArea._scripts.push(plugin_file, plugin_lang);
document.write("<script type='text/javascript' src='" + plugin_file + "'></script>");
document.write("<script type='text/javascript' src='" + plugin_lang + "'></script>");
};

See also this topic: http://www.interactivetools.com/forum/gforum.cgi?post=31315#31315

Full screen editing doesn't work in IE and Mozilla

The browser doesn't like relative paths, change the code on approximately line15 in /htmlarea/popups/fullscreen.html with:

And add a try and cache to the _CloseOnExit(ev) function, see http://www.interactivetools.com/forum/gforum.cgi?post=30160#30160 for details:

function _CloseOnEsc(ev) {
try{
ev || (ev = window.event);
if (ev.keyCode == 27) {
// update_parent();
window.close();
return;
}
} catch(e) {
}
}

Go to the HTMLArea.cloneObject Method in htmlarea.js and use the following code in the second 'else' node:

} else for (var n in obj) {
var node = obj[n];
if (node != null && typeof node == 'object') { newObj[n] = HTMLArea.cloneObject(node); }
else { newObj[n] = node; }
}

>HTML Tidy doesn't work>

This plugin requires at least PHP version 4.3 to function. See arabolds code at http://www.interactivetools.com/forum/gforum.cgi?post=25740#25740 to make the HTML Tidy plugin work with at least PHP version 4.1. and remove the bug that caused the generated JavaScript to fail. The string that is returned from tidy has to be escaped twice:

The modified part of /htmlarea/plugins/HtmlTidy/html-tidy-logic.php:

// Create a set of javascript code to compile a new source string
$jsMakeSrc = "";
foreach ($srcLines as $line) {
$newLine = str_replace("\\","\\\\",$line);
$newLine = str_replace("'","\\'",$newLine);
$jsMakeSrc .= "\tns += '$newLine\\n';\n";
}

// proc_open replacement
function filterThroughCmd($input, $commandLine) {

$commandLine .= " << TIDYEND\n";
$commandLine .= $input;
$commandLine .= "\nTIDYEND\n";

$pipe = popen($commandLine, 'r');
if (!$pipe) {
print "pipe failed.";
return "";
}
$output = '';

while(!feof($pipe)) {
$output .= fread($pipe, 1024);
}

pclose($pipe);
return $output;
}

Sometime an iframe doesn't get declared, the following code will fix that.

See http://www.interactivetools.com/forum/gforum.cgi?post=28972#28972. Add this code to /htmlarea/plugins/HtmlTidy/html-tidy.js:

if (! parent.document.getElementById('htiframe_id') && HTMLArea.is_ie) {
var frame;
frame = '<iframe name="htiframe_name" id="htiframe_id" ';
frame += 'style="position: absolute; width: 0; height: 0; ';
frame += ' border: 0; left: 0; top:0; padding: 0; margin: 0">';
frame += '</iframe>';
document.body.insertAdjacentHTML("beforeEnd",frame);
}

Author

Rob Juurlink (rob@juurlink.org)

Page 1: Introduction to HTMLArea
Page 2: Replace Xed with HTML textarea
Page 3: HTMLArea configuration and troubleshooting

All Tutorials