Gossamer Forum: General: Internet Technologies: HTMLArea.. fun!

Hi,

I'm just trying to get HTMLArea 3.0 working in one of my plugins (Ace_News). I remember that it was a real PITA to setup when first writing Ace_News, and I'm having similar problems this time :(

The code I have, is;
Code:
<html> 
<head> 
<title>Modify Article - Advanced</title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<!-- Configure the path to the editor.  We make it relative now, so that the 
 example ZIP file will work anywhere, but please NOTE THAT it's better to 
 have it an absolute path, such as '/htmlarea/'. --> 
<script type="text/javascript"> 
 _editor_url = "./htmlarea/"; 
 _editor_lang = "en"; 
</script> 
<script type="text/javascript" src="htmlarea.js"></script> 
<style type="text/css"> 
html, body { 
 font-family: Verdana,sans-serif; 
 background-color: #fea; 
 color: #000; 
} 
a:link, a:visited { color: #00f; } 
a:hover { color: #048; } 
a:active { color: #f00; } 
textarea { background-color: #fff; border: 1px solid 00f; } 
</style> 
<script type="text/javascript"> 
var editor = null; 
function initEditor() { 
 editor = new HTMLArea("Full_Article"); 
 // comment the following two lines to see how customization works 
 editor.generate(); 
 return false; 
 var cfg = editor.config; // this is the default configuration 
 cfg.registerButton({ 
 id        : "my-hilite", 
 tooltip   : "Highlight text", 
 image     : "ed_custom.gif", 
 textMode  : false, 
 action    : function(editor) { 
 editor.surroundHTML("<span class=\"hilite\">", "</span>"); 
 }, 
 context   : 'table' 
 }); 
 cfg.toolbar.push(["linebreak", "my-hilite"]); // add the new button to the toolbar 
 // BEGIN: code that adds a custom button 
 // uncomment it to test 
 var cfg = editor.config; // this is the default configuration 
 /* 
 cfg.registerButton({ 
 id        : "my-hilite", 
 tooltip   : "Highlight text", 
 image     : "ed_custom.gif", 
 textMode  : false, 
 action    : function(editor) { 
 editor.surroundHTML("<span class=\"hilite\">", "</span>"); 
 } 
 }); 
 */ 
function clickHandler(editor, buttonId) { 
 switch (buttonId) { 
 case "my-toc": 
 editor.insertHTML("<h1>Table Of Contents</h1>"); 
 break; 
 case "my-date": 
 editor.insertHTML((new Date()).toString()); 
 break; 
 case "my-bold": 
 editor.execCommand("bold"); 
 editor.execCommand("italic"); 
 break; 
 case "my-hilite": 
 editor.surroundHTML("<span class=\"hilite\">", "</span>"); 
 break; 
 } 
}; 
cfg.registerButton("my-toc",  "Insert TOC", "ed_custom.gif", false, clickHandler); 
cfg.registerButton("my-date", "Insert date/time", "ed_custom.gif", false, clickHandler); 
cfg.registerButton("my-bold", "Toggle bold/italic", "ed_custom.gif", false, clickHandler); 
cfg.registerButton("my-hilite", "Hilite selection", "ed_custom.gif", false, clickHandler); 
cfg.registerButton("my-sample", "Class: sample", "ed_custom.gif", false, 
 function(editor) { 
 if (HTMLArea.is_ie) { 
 editor.insertHTML("<span class=\"sample\">&nbsp;&nbsp;</span>"); 
 var r = editor._doc.selection.createRange(); 
 r.move("character", -2); 
 r.moveEnd("character", 2); 
 r.select(); 
 } else { // Gecko/W3C compliant 
 var n = editor._doc.createElement("span"); 
 n.className = "sample"; 
 editor.insertNodeAtSelection(n); 
 var sel = editor._iframe.contentWindow.getSelection(); 
 sel.removeAllRanges(); 
 var r = editor._doc.createRange(); 
 r.setStart(n, 0); 
 r.setEnd(n, 0); 
 sel.addRange(r); 
 } 
 } 
); 
 /* 
 cfg.registerButton("my-hilite", "Highlight text", "ed_custom.gif", false, 
 function(editor) { 
 editor.surroundHTML('<span class="hilite">', '</span>'); 
 } 
 ); 
 */ 
 cfg.pageStyle = "body { background-color: #efd; } .hilite { background-color: yellow; } "+ 
 ".sample { color: green; font-family: monospace; }"; 
 cfg.toolbar.push(["linebreak", "my-toc", "my-date", "my-bold", "my-hilite", "my-sample"]); // add the new button to the toolbar 
 // END: code that adds a custom button 
 editor.generate(); 
} 
function insertHTML() { 
 var html = prompt("Enter some HTML code here"); 
 if (html) { 
 editor.insertHTML(html); 
 } 
} 
function highlight() { 
 editor.surroundHTML('<span style="background-color: yellow">', '</span>'); 
} 
</script> 
</head> 
<body onload="initEditor()"> 

<p align="center"><font color="#008000" face="Tahoma" size="2"><b>Modify</b></font><font face="Tahoma"><b><font color="#008000" size="2"> 
Article</font></b></font></p> 
<form method="POST" action="news_editor.cgi"> 
<div align="center"> 
<center> 
<table border="0" cellpadding="2" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" id="AutoNumber1" height="133"> 
<tr> 
<td width="50%" height="19"><font face="Tahoma" size="2">Article Title: 
</font><font face="Tahoma" size="1">[<a href="#help">help</a>]</font></td> 
<td width="50%" height="19"> 

<p> 
<input type="text" name="Title" size="33" value="Nouvelle version d'Agrimondial" style="border: 1px outset #FFFFFF"></p> 
</td> 
</tr> 
<tr> 
<td width="50%" height="19"><font face="Tahoma" size="2">Short Article (text): 
</font><font face="Tahoma" size="1">[<a href="#help">help</a>]</font></td> 
<td width="50%" height="19"> 
 <textarea rows="4" name="Short_Article" cols="28" style="border: 1px outset #FFFFFF"></textarea></td> 
</tr> 
<tr> 
<td width="50%" height="19"><font face="Tahoma" size="2">Full Article (HTML): 
</font><font face="Tahoma" size="1">[<a href="#help">help</a>]</font></td> 

<td width="50%" height="19"> 
 <textarea rows="10" name="Full_Article" id="Full_Article" cols="28" style="border: 1px outset #FFFFFF"></textarea></td> 
</tr> 
<tr> 
<td width="50%" height="19">&nbsp;</td> 
<td width="50%" height="19">&nbsp;</td> 
</tr> 
<tr> 
<td width="50%" height="19"><font face="Tahoma" size="2">Image (photo): 
</font><font face="Tahoma" size="1">[<a href="#help">help</a>]</font></td> 
<td width="50%" height="19"> 
<input type="text" name="Image" size="33" value="" style="border: 1px outset #FFFFFF"></td> 
</tr> 

<tr> 
<td width="50%" height="19">&nbsp;</td> 
<td width="50%" height="19">&nbsp;</td> 
</tr> 
<tr> 
<td width="50%" height="19"><font face="Tahoma" size="2">Assign to Category: </font><font face="Tahoma" size="1"> 
[<a href="#help">help</a>]</font></td> 
<td width="50%" height="19"><select size="1" name="Category"><option>Agriculture  
bio</option><option>Agritourisme</option><option>Materiels agricoles</option><option> 
Environnement</option><option>Divers-informatique</option><option> 
Agro-alimentaire</option><option>Enseignement</option></select></td> 

</tr> 
<tr> 
<td width="50%" height="19">&nbsp;</td> 
<td width="50%" height="19">&nbsp;</td> 
</tr> 
<tr> 
<td width="50%" height="19"> 
<p align="right"> 
<input type="submit" value="Submit" name="B1" style="border: 1px outset #FFFFFF"> </p> 
</td> 
<td width="50%" height="19">&nbsp;<input type="reset" value="Reset" name="B2" style="border: 1px outset #FFFFFF"></td> 
</tr> 
</table> 
</center> 
</div> 
<input type="hidden" name="a" value="modify_article_do"> 

<input type="hidden" name="TimeStmp" value=""> 
</form> 
<p align="center"><br> 
&nbsp;</p> 
</body> 
</html>
I've run this through IE 6, and its showing an error, saying HTMLArea uis undefined :(

Any ideas? Angelic
TIA

Andy (mod)
andy@ultranerds.co.uk