htmlArea

A directory of browser-based WYSIWYG editors

  MAIN
INDEX
SEARCH
POSTS
WHO'S
ONLINE
LOG
IN

Home: htmlArea 3 (beta): htmlArea 2 & 3 archive (read only): htmlArea v3.0 - Discussion:
Javascript references HTMLArea content.


The htmlArea 2 & 3 editors have been discontinued.

We've made these forums available as a read-only reference and knowledge-base for people using or developing editors based on htmlArea 2 or 3.

Anyone who is interested in taking over version 2 or 3 is free to do so. All we ask is that you choose a new name that doesn't have "htmlarea" in it to avoid confusion with this site. We'll even give you a link in the directory to make it easier for people to find you. If you are developing or hosting an htmlArea based-editor under a new name, please submit it to our directory.

 


robbrandt
New User

Dec 29, 2004, 2:20 PM

Post #1 of 4 (3530 views)
Shortcut
Javascript references HTMLArea content. Can't Post

I have a page with a script on it that adds keywords to a list. User types a keyword into a field, clicks on an Add button, and the keyword appears in a list of new keywords. Work(ed) great.

The keywords are often formatted for scientific purposes; italics, subscript, superscript, etc. We want to add HTMLArea to the input field to help them get the formatting right. I have HTMLArea working on this field.

The problem is that the Add button only works when the Toggle HTMLSource option is selected; in other words, only when the html source is displayed, not when in WYSIWYG mode. This sort of defeats the purpose :)

Here's my code for enabling htmlarea:

Code
 <script type="text/javascript"> 
4 _editor_url = "../../engine/htmlarea/";
5 _editor_lang = "en";
6 </script>
7 <script type="text/javascript" src="../../engine/htmlarea/htmlarea.js"></script>
8 <script type="text/javascript">
9
10 HTMLArea.loadPlugin("SpellChecker");
11 HTMLArea.loadPlugin("FullPage");
12
13 HTMLArea.loadPlugin("ListType");
14 HTMLArea.loadPlugin("CharacterMap");
15
16 </script>
17
18
19 <script type="text/javascript">
20
21 function initDocument() {
22
23 var txtKeyword = new HTMLArea("txtKeyword");
24 HTMLArea.loadPlugin("CharacterMap");
25 txtKeyword.config.toolbar = [
26 ['italic', 'underline',
27 'subscript', 'superscript',
28 'separator', "copy", "cut", "paste", "space", "undo", "redo", "killword", "separator", "htmlmode"]
29 ];
30
31 txtKeyword.config.height = '80px';
32 txtKeyword.config.width = '360';
33 txtKeyword.generate();
34
35 txtKeyword._statusBar.style.display = 'none';
36 txtKeyword.registerPlugin(CharacterMap);
37 txtKeyword.registerPlugin(FullPage);
38
39
40 }
41
42 HTMLArea.onload = initDocument;
43
44 </script>


It's loaded here:

Code
<body onload="HTMLArea.init();">


The Add button has an onclick:

Code
<input type="button" class="button" style="width:60px" onclick="addAddress(txtKeyword);" value="Add" />

where 'txtKeyword' is the id of the textarea. The addAddress script is here:

Code
 function addAddress(f) 
- 131 {
- 132 var s = window.document.contacts.txtKeyword;
- 133 var d = window.document.contacts.elements["selected_addresses[]"];
134
135 /* if (f.value != "") {
136 d.options[d.length] = new Option(f.value, f.value);
137 f.value = "";
138 }
139 var d = response.write(Session("keywordList"));
140
141 uncomment this to see what it is adding as it is adding it */
142 /* alert(_v.s1.options.length+"\n"+_v.t1.value+"\n"+_v.t0.value); */
- 143 var NI = d.options.length++;
- 144 d.options[NI].text=s.value;
- 145 d.options[NI].value=s.value;
- 146 s.value="";
147 }


Any ideas on how to get these things working together peacefully?

Thanks

Rob


sleemanj
User

Dec 30, 2004, 9:00 AM

Post #2 of 4 (3496 views)
Shortcut
Re: [robbrandt] Javascript references HTMLArea content. [In reply to] Can't Post


In Reply To
The problem is that the Add button only works when the Toggle HTMLSource option is selected; in other words, only when the html source is displayed, not when in WYSIWYG mode. This sort of defeats the purpose :)


You want to take the HTML from the htmlArea, not the textArea which is actually hidden out of the way when you create the htmlArea (and is made visible when you go to the code view). For that you need to use the getHTML() function of the htmlArea you create.

In your initDocument function you are creatign the htmlArea, calling it txtKeyword, however you are creating it as a local variable, the reference to which you lose when the function returns, I'd advise making that a global variable.



Code
     19 <script type="text/javascript"> 
20 var txtKeyword = null;
21 function initDocument() {
22
23 txtKeyword = new HTMLArea("txtKeyword");
24
38 ...snip...
44 </script>


The Add button has an onclick:

Code
<input type="button" class="button" style="width:60px" onclick="addAddress();" value="Add" />

where 'txtKeyword' is the id of the textarea. The addAddress script is here:

Code
 function addAddress() 
- 131 {
- 133 var d = window.document.contacts.elements["selected_addresses[]"];
134 var html = txtKeyword.getHTML();
- 143 var NI = d.options.length++;
- 144 d.options[NI].text=html;
- 145 d.options[NI].value=html;
- 146 txtKeyword.setHTML('');
147 }



James Sleeman
PHP Programmer


robbrandt
New User

Jan 5, 2005, 10:36 PM

Post #3 of 4 (3391 views)
Shortcut
Re: [sleemanj] Javascript references HTMLArea content. [In reply to] Can't Post

Very nice. Thank you. Works great.


robbrandt
New User

Jan 6, 2005, 7:23 PM

Post #4 of 4 (3360 views)
Shortcut
Re: [sleemanj] Javascript references HTMLArea content. [In reply to] Can't Post

OK, here's a curve ball.

It worked great until I demo'ed it to a client using Safari. HTMLArea doesn't work on Safari. So on his system the textarea is still plain html, and the Add Keyword function doesn't pass anything.

Ideas?

Rob

 
 
 


Search for (options)