Home: htmlArea 2: htmlArea 2 & 3 archive (read only): htmlArea v2.0:
dynamically adding unlimited number of textareas



aNovice
New User

Dec 17, 2004, 12:07 AM


Views: 11860
dynamically adding unlimited number of textareas

To any HTMLArea expert:
I am a novice in terms of javascript language and i surfed upon htmlarea just 3 weeks ago and find this very interesting. So i tried to use htmlarea for my own use.

1)I have a button which dynamically adds multiple number of textarea when clicked.
2)I used 'Tykuo's modified editor.js file because it allows one toolbar for multiple number of textarea.

the problem: i cannot get the toolbar activated for every one of the added textarea. I hope someone will take a look at my code. I think its the problem of passing the textarea's name... i dont know, i hope someone can help me..

<html>
<head>
<script language="Javascript1.2">
<!-- // load htmlarea
_editor_url = "../slide2/"; // URL to htmlarea files
var win_ie_ver = parseFloat(navigator.appVersion.split("MSIE")[1]);
if (navigator.userAgent.indexOf('Mac') >= 0) { win_ie_ver = 0; }
if (navigator.userAgent.indexOf('Windows CE') >= 0) { win_ie_ver = 0; }
if (navigator.userAgent.indexOf('Opera') >= 0) { win_ie_ver = 0; }
if (win_ie_ver >= 5.5) {
document.write('<scr' + 'ipt src="' +_editor_url+ 'editor.js"');
document.write(' language="Javascript1.2"></scr' + 'ipt>');
}
else
{ document.write('<scr'+'ipt>function editor_generate() { return false; }</scr'+'ipt>'); }
// -->
</script>
<SCRIPT>
if (document.layers)
window.setResizable(false);
var c = 0;
function addTextArea(form) {
if (document.all) {
var html = '<BR><TEXTAREA NAME="aTextArea' + c++ + '" ROWS="5" COLS="40">slide '+c+'<\/TEXTAREA>';
// editor_generate('aTextArea' + "c");
form.insertAdjacentHTML('beforeEnd', html)
createhtmlarea(c);
}
else if (document.getElementById) {
var textarea = document.createElement('TEXTAREA');
textarea.name = 'aTextArea' + c++;
textarea.rows = 5;
textarea.cols = 40;
form.appendChild(document.createElement('BR'));
form.appendChild(textarea);
}
else if (document.layers) {
var l = new Layer (window.innerWidth);
var html = '';
html += '<HTML><BODY><FORM NAME="formName">';
html += '<TEXTAREA NAME="aTextArea" ROWS="5" COLS="40"><\/TEXTAREA>';
html += '<\/FORM><\/BODY><\/HTML>';
l.document.open();
l.document.write(html);
l.document.close();
l.top = document.height;
document.height += l.document.height;
l.visibility = 'show';
}
}
</SCRIPT>

<script language="javascript">
function createhtmlarea(num) {
editor_generate(num);

</HEAD>
<BODY>
<FORM NAME="formName">
<INPUT TYPE="button" VALUE="add textarea" ONCLICK="addTextArea(this.form)">
</FORM>
}

</script>
</BODY>
</HTML>

Thanks in advance...i really appreciate for any helpful replies.


tykuo
Novice

Dec 17, 2004, 6:10 AM


Views: 11839
Re: [aNovice] dynamically adding unlimited number of textareas

Hi aNovice,

Try this:




<html>
<head>
<script language="Javascript1.2">
<!-- // load htmlarea
_editor_url = "../slide2/"; // URL to htmlarea files
var win_ie_ver = parseFloat(navigator.appVersion.split("MSIE")[1]);
if (navigator.userAgent.indexOf('Mac') >= 0) { win_ie_ver = 0; }
if (navigator.userAgent.indexOf('Windows CE') >= 0) { win_ie_ver = 0; }
if (navigator.userAgent.indexOf('Opera') >= 0) { win_ie_ver = 0; }
if (win_ie_ver >= 5.5) {
document.write('<scr' + 'ipt src="' +_editor_url+ 'editor.js"');
document.write(' language="Javascript1.2"></scr' + 'ipt>');
}
else
{ document.write('<scr'+'ipt>function editor_generate() { return false; }</scr'+'ipt>'); }
// -->
</script>
<SCRIPT>
if (document.layers)
window.setResizable(false);
var c = 0;
function addTextArea(form) {
if (document.all) {
var html = '<BR><TEXTAREA NAME="aTextArea' + c + '" ROWS="5" COLS="40">slide '+c+'<\/TEXTAREA>';
form.insertAdjacentHTML('beforeEnd', html)
}
else if (document.getElementById) {
var textarea = document.createElement('TEXTAREA');
textarea.name = 'aTextArea' + c;
textarea.rows = 5;
textarea.cols = 40;
form.appendChild(document.createElement('BR'));
form.appendChild(textarea);
}
else if (document.layers) {
var l = new Layer (window.innerWidth);
var html = '';
html += '<HTML><BODY><FORM NAME="formName">';
html += '<TEXTAREA NAME="aTextArea" ROWS="5" COLS="40"><\/TEXTAREA>';
html += '<\/FORM><\/BODY><\/HTML>';
l.document.open();
l.document.write(html);
l.document.close();
l.top = document.height;
document.height += l.document.height;
l.visibility = 'show';
}
createhtmlarea('aTextArea' + c );
c++;
}
</SCRIPT>

<script language="javascript">
function createhtmlarea(num) {
editor_generate(num);
}
</script>
</HEAD>
<BODY>
<FORM NAME="formName">
<INPUT TYPE="button" VALUE="add textarea" ONCLICK="addTextArea(this.form)">
</FORM>

</BODY>
</HTML>





Or, check this page for the above code: http://nomiss.nttu.edu.tw/htmlarea/example2.html

-- tykuo


aNovice
New User

Dec 19, 2004, 8:15 PM


Views: 11781
Re: [aNovice] dynamically adding unlimited number of textareas

thank you tykuo, you're good..... you really know what i needed there. thanks again


cronomen
Novice

Feb 7, 2005, 11:39 PM


Views: 11552
Re: [tykuo] dynamically adding unlimited number of textareas

hi Tykuo. Have you maybe any version of this script working with frames?

i need a frame with administrator links up to the screen
in second frame i need htmlarea
but there are problems with size of the frame and scrollbar ...
can you try make this for me working?

<frameset rows="70,*" frameborder=0 border=0>
<frame name="nagl" src="xxx.php" frameborder="0" scrolling=yes >

<frame name="main" src="example.html" frameborder="0"> </frameset>


tykuo
Novice

Feb 11, 2005, 5:00 AM


Views: 11512
Re: [cronomen] dynamically adding unlimited number of textareas

Hi cronomen,

My editor.js is suitable for frame version. Please see my frame_version example.

Modifications are made to example.html as follows:




function fixSize() {
try{
var workarea = document.all._workarea;
workarea.style.height = Math.max(0, document.body.offsetHeight - workarea.offsetTop - 2);
workarea.style.width = Math.max(0, document.body.offsetWidth - 2);
}
catch(e){};
}

window.onresize = fixSize;
top.moveTo(0,0);
top.resizeTo(screen.availWidth,screen.availHeight);
fixSize();



May it be helpful.



-- tykuo


cronomen
Novice

Feb 11, 2005, 5:49 AM


Views: 11502
Re: [tykuo] dynamically adding unlimited number of textareas

! F ... great!!! Thanks for your time and help for me!

now i only need a trick with verticaly resizable textarea when i fill it with content (no scroll bars)
maybe iframe hmm , i dont know and anyone can't help me on this forum .. Frown


tykuo
Novice

Feb 11, 2005, 8:49 AM


Views: 11494
Re: [cronomen] dynamically adding unlimited number of textareas

Hi cronomen,

It is easy to do. In my editor.js, changethe line 1065 (in function editor_setmode)

var RichEdit = '<iframe scrolling=no ID="_' +objname+ '_editor" style="width:' +editor_obj.style.width+ '; height:' +editor_obj.style.height+ ';"></iframe>';


And, add these lines at the bottom of the file.

function update_editor_height(){
if(!!currentObjname){
try{
var editor_obj = document.all["_" +currentObjname + "_editor"];
var h=parseInt(editor_obj.contentWindow.document.body.scrollHeight)+5;
var oldh=parseInt(document.all[currentObjname].config.height);
if(h<oldh) h=oldh;
if(editor_obj.contentWindow) editor_obj.style.height=h;
}
catch(e){};
}
}
window.setInterval(update_editor_height, 200);


Please see my demo page for automatic extending htmlarea.



--tykuo


cronomen
Novice

Feb 20, 2005, 6:22 AM


Views: 11362
Re: [tykuo] dynamically adding unlimited number of textareas

yes yes yes! great! it works;) thx tykuo
unfortunatelly i have problem to run context menus etc in your editor now ;( something like table operations in luis editor webstation one
;(


tykuo
Novice

Feb 20, 2005, 5:16 PM


Views: 11355
Re: [cronomen] dynamically adding unlimited number of textareas

Hi cronomen,

I have removed some Chinese characters from the popup table operation page. (sorry, i forgot removing them before posting).

You can retry my demo page http://nomiss.nttu.edu.tw/htmlarea/example.html again to check if it can operate correctly online. Normally, right click on an inserted table would pop up a menu for chosing various table operations. Note that all the files must be put on an web server for proper working. It would not work if all the editor files are located at your local computer.

For the purpose of managing extending height of htmlarea, I have made some modifications to the editor.js file. In your page, if you want to turn on the extending height property of a htmlarea, then call

editor_generate('yourFiledName',true); // the second para be true for turning on extending height property

If want to turn off the extending height property, just call

editor_generate('yourFiledName');

Attachment is my new version of the demo site.

Hope it helps.

-- tykuo


(This post was edited by tykuo on Feb 21, 2005, 6:46 AM)
Attachments: htmlarea.rar (100 KB)