Create an unordered list in a textarea

JavaScript
1

I have googled and searched, but can’t find a way of creating an unordered list in a textarea, in a similar fashion to the function described here:

http://www.sitepoint.com/forums/showthread.php?p=2139348#post2139348

but with the prompt box for list items, like here at SP forums.

Any help gratefully accepted.

2

A textarea only contains text, but you can insert newlines and tabs with the text to simulate a list. Make sure the css of the textarea includes white-space:pre (to preserve the whitespace).

listarray=['item1','item2','item3'];
var who=document.getElementsByTagName('textarea')[0];
var str='\
\	* '+listarray.join('\
\	* ')+'\
';
who.value+=str;
3

Sorry I don’t think I explained that very well.

I want to have a button that creates a list the same way as if doing it in these forum posts, so that it puts tags inside square brackets that I can use a php regular expression on to turn them into <ul><li>…</li></ul> tags and back again.

The code in the thread I linked to inserted bold, italic, hr and a wink. I need one that makes an unordered list.

4

I am not sure, if I understand you well. Anyway I had this on my old disc:

<style type="text/css"><!--
#ovladace{display:none;}
--></style>


<script type="text/javascript">
var d=document;
function tarea(startTag,endTag) {//based on http://www.alexking.org/blog/2003/06/02/inserting-at-the-cursor-using-javascript/
var txt=d.getElementById('txt');
if(d.selection){//ie
sel=d.selection.createRange();
sel.text=startTag+sel.text+endTag;}
else if(txt.selectionStart||txt.selectionStart=='0'){//gecko
var zac=txt.selectionStart;
var kon=txt.selectionEnd;
txt.value=txt.value.substring(0,zac)
+startTag
+txt.value.substring(zac,kon)
+endTag
+txt.value.substring(kon,txt.value.length);
txt.selectionStart=zac+startTag.length;
txt.selectionEnd=kon+startTag.length;}
else{txt.value+=myValue;}
txt.focus();}
function init(){
var kde=d.getElementById('ovladace');
kde.style.display='block';
var hrefy=kde.getElementsByTagName('a');
for(i=0,j=0;i<hrefy.length;i++){
hrefy[i].onclick=function(){
tarea('['+this.getAttribute('title')+']','[/'+this.getAttribute('title')+']');
return false;}}}
function addEvent(obj,evType,fn){
if(obj.addEventListener){obj.addEventListener(evType,fn,true);return true;}
else if(obj.attachEvent){var r=obj.attachEvent("on"+evType,fn);return r;}
else{return false;}
}
addEvent(window,'load',init); //addEvent:thx http://www.scottandrew.com/weblog/articles/cbs-events
</script>



<textarea id="txt"></textarea>
<div id="ovladace">
<a href="#" title="h1">h1</a>
<a href="#" title="h2">h2</a>
<a href="#" title="h3">h3</a>
<a href="#" title="h4">h4</a>
<a href="#" title="h5">h5</a>
<a href="#" title="ul">ul</a>
<a href="#" title="li">li</a>
</div>
5

Where you want the round bullet to appear just insert the special characted resembling it. code for special character is &#9679

<textarea rows="6" cols="20">
&#9679 Item1
&#9679 Item2
&#9679 Item3
&#9679 Item4
&#9679 Item5
</textarea>

Just try pasting the above code in HTML file and see if that is what you expect!

6

Thanks for the help guys. I got it sorted by amending the code in the post I referred to earlier.