Knapper med JS

[code="JavaScript"]
// bbCode control by
// subBlue design
// www.subBlue.com

// Startup variables
var imageTag = false;
var theSelection = false;

// Check for Browser & Platform for PC & IE specific bits
// More details from: http://www.mozilla.org/docs/web-developer/sniffer/browser_type.html
var clientPC = navigator.userAgent.toLowerCase(); // Get client info
var clientVer = parseInt(navigator.appVersion); // Get browser version

var is_ie = ((clientPC.indexOf("msie") != -1) && (clientPC.indexOf("opera") == -1));
var is_nav = ((clientPC.indexOf('mozilla')!=-1) && (clientPC.indexOf('spoofer')==-1)
&& (clientPC.indexOf('compatible') == -1) && (clientPC.indexOf('opera')==-1)
&& (clientPC.indexOf('webtv')==-1) && (clientPC.indexOf('hotjava')==-1));
var is_moz = 0;

var is_win = ((clientPC.indexOf("win")!=-1) || (clientPC.indexOf("16bit") != -1));
var is_mac = (clientPC.indexOf("mac")!=-1);

// Define the bbCode tags
bbcode = new Array();
bbtags = new Array('','','','','','','[center]','[/center]',/*FIX*//*'[ code ]','[ / code ]'*/,'[list]','[/list]','[list=]','[/list]','[img]','[/img]','','');
imageTag = false;

// Replacement for arrayname.length property
function getarraysize(thearray) {
for (i = 0; i < thearray.length; i++) {
if ((thearray == "undefined") || (thearray == "") || (thearray == null))
return i;
}
return thearray.length;
}

// Replacement for arrayname.push(value) not implemented in IE until version 5.5
// Appends element to the array
function arraypush(thearray,value) {
thearray[ getarraysize(thearray) ] = value;
}

// Replacement for arrayname.pop() not implemented in IE until version 5.5
// Removes and returns the last element of an array
function arraypop(thearray) {
thearraysize = getarraysize(thearray);
retval = thearray[thearraysize - 1];
delete thearray[thearraysize - 1];
return retval;
}


function checkForm() {

formErrors = false;

if (document.getElementById('message').value.length < 2) {
//formErrors = "Tom";
}

if (formErrors) {
alert(formErrors);
return false;
} else {
bbstyle(-1);
//formObj.preview.disabled = true;
//formObj.submit.disabled = true;
return true;
}
}

function emoticon(text) {
var txtarea = document.getElementById('message');
text = ' ' + text + ' ';
if (txtarea.createTextRange && txtarea.caretPos) {
var caretPos = txtarea.caretPos;
caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ? caretPos.text + text + ' ' : caretPos.text + text;
txtarea.focus();
} else {
txtarea.value += text;
txtarea.focus();
}
}

function bbfontstyle(bbopen, bbclose) {
var txtarea = document.getElementById('message');

if ((clientVer >= 4) && is_ie && is_win) {
theSelection = document.selection.createRange().text;
if (!theSelection) {
txtarea.value += bbopen + bbclose;
txtarea.focus();
return;
}
document.selection.createRange().text = bbopen + theSelection + bbclose;
txtarea.focus();
return;
}
else if (txtarea.selectionEnd && (txtarea.selectionEnd - txtarea.selectionStart > 0))
{
mozWrap(txtarea, bbopen, bbclose);
return;
}
else
{
txtarea.value += bbopen + bbclose;
txtarea.focus();
}
storeCaret(txtarea);
}


function bbstyle(bbnumber) {
var txtarea = document.getElementById('message');

txtarea.focus();
donotinsert = false;
theSelection = false;
bblast = 0;

if (bbnumber == -1) { // Close all open tags & default button names
while (bbcode[0]) {
butnumber = arraypop(bbcode) - 1;
txtarea.value += bbtags[butnumber + 1];
//buttext = eval('document.post.addbbcode' + butnumber + '.value');
//eval('document.post.addbbcode' + butnumber + '.value ="' + buttext.substr(0,(buttext.length - 1)) + '"');
eval('document.post.addbbcode'+butnumber+'.style.border="1px outset"');
eval('document.post.addbbcode'+butnumber+'.style.color="black"');
}
imageTag = false; // All tags are closed including image tags
txtarea.focus();
return;
}

if ((clientVer >= 4) && is_ie && is_win)
{
theSelection = document.selection.createRange().text; // Get text selection
if (theSelection) {
// Add tags around selection
document.selection.createRange().text = bbtags[bbnumber] + theSelection + bbtags[bbnumber+1];
txtarea.focus();
theSelection = '';
return;
}
}
else if (txtarea.selectionEnd && (txtarea.selectionEnd - txtarea.selectionStart > 0))
{
mozWrap(txtarea, bbtags[bbnumber], bbtags[bbnumber+1]);
return;
}

// Find last occurance of an open tag the same as the one just clicked
for (i = 0; i < bbcode.length; i++) {
if (bbcode == bbnumber+1) {
bblast = i;
donotinsert = true;
}
}

if (donotinsert) { // Close all open tags up to the one just clicked & default button names
while (bbcode[bblast]) {
butnumber = arraypop(bbcode) - 1;
txtarea.value += bbtags[butnumber + 1];
//buttext = eval('document.post.addbbcode' + butnumber + '.value');
//eval('document.post.addbbcode' + butnumber + '.value ="' + buttext.substr(0,(buttext.length - 1)) + '"');
eval('document.post.addbbcode'+butnumber+'.style.border="1px outset"');
eval('document.post.addbbcode'+butnumber+'.style.color="black"');
imageTag = false;
}
txtarea.focus();
return;
} else { // Open tags

if (imageTag && (bbnumber != 14)) { // Close image tag before adding another
txtarea.value += bbtags[15];
lastValue = arraypop(bbcode) - 1; // Remove the close image tag from the list
//document.post.addbbcode14.value = "Img"; // Return button back to normal state
document.post.addbbcode14.style.border="1px outset";
document.post.addbbcode14.style.color="black";
imageTag = false;
}

// Open tag
txtarea.value += bbtags[bbnumber];
if ((bbnumber == 14) && (imageTag == false)) {
imageTag = 1; // Check to stop additional tags after an unclosed image tag
}
arraypush(bbcode,bbnumber+1);
//eval('document.post.addbbcode'+bbnumber+'.value += "*"');
eval('document.post.addbbcode'+bbnumber+'.style.border="1px inset"');
eval('document.post.addbbcode'+bbnumber+'.style.color="gray"');
txtarea.focus();
return;
}
storeCaret(txtarea);
}

// From http://www.massless.org/mozedit/
function mozWrap(txtarea, open, close)
{
var selLength = txtarea.textLength;
var selStart = txtarea.selectionStart;
var selEnd = txtarea.selectionEnd;
if (selEnd == 1 || selEnd == 2)
selEnd = selLength;

var s1 = (txtarea.value).substring(0,selStart);
var s2 = (txtarea.value).substring(selStart, selEnd)
var s3 = (txtarea.value).substring(selEnd, selLength);
txtarea.value = s1 + open + s2 + close + s3;
return;
}

// Insert at Claret position. Code from
// http://www.faqts.com/knowledge_base/view.phtml/aid/1052/fid/130
function storeCaret(textEl) {
if (textEl.createTextRange) textEl.caretPos = document.selection.createRange().duplicate();
}
[/code]

[code="HTML"]
<table border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td style="text-align:left;"><table border="0" cellspacing="1" cellpadding="0">

<tr>
<td><input type="button" class="submit" name="addbbcode0" value="B"
style="font-weight:bold; width: 25px" onClick="bbstyle(0)"
onmouseover="bg(this)"
onmouseout="bg(this)"
title="Fed skrift: text" /></td>
<td><input type="button" class="submit" name="addbbcode2" value="I"
style="font-style:italic; width: 25px" onClick="bbstyle(2)"
onmouseover="bg(this)"
onmouseout="bg(this)"
title="Kursiv skrift: text" /></td>
<td><input type="button" class="submit" name="addbbcode4" value="U"
style="text-decoration: underline; width: 25px" onClick="bbstyle(4)"
onmouseover="bg(this)"
onmouseout="bg(this)"
title="Understregning: text" /></td>
<td><input type="button" class="submit" name="addbbcode16" value="URL"
style="width: 30px" onClick="bbstyle(16)"
onmouseover="bg(this)"
onmouseout="bg(this)"
title="Indsæt URL: http://url or [url=http://url]URL text[/url]" /></td>
<td><input type="button" class="submit" name="addbbcode14" value="IMG"
style="width: 30px" onClick="bbstyle(14)"
onmouseover="bg(this)"
onmouseout="bg(this)"
title="Indsæt billede: [img]http://image_url[/img]" /></td>
<td><input type="button" class="submit" name="addbbcode6" value="Centrér"
style="width: 50px" onClick="bbstyle(6)"
onmouseover="bg(this)"
onmouseout="bg(this)"
title="Centrér teksten: [center]text[/center]" /></td>
<td><input type="button" class="submit" name="addbbcode-1"
style="width: 65px"
value="Luk koder"
onClick="bbstyle(-1)"
onmouseover="bg(this)"
onmouseout="bg(this)"
title="Luk alle åbne BBcoder" /></td>
<td><select name="addbbcode18"
onChange="bbfontstyle('[color=' + this.form.addbbcode18.options[this.form.addbbcode18.selectedIndex].value + ']', '[/color]');this.selectedIndex=0;"
style="font-family:verdana,sans-serif;
font-size:9px;border:0px;margin:0px;
width:70px;">

<option style="color:black;" value="black">Sort</option>
<option style="color:darkred;" value="darkred">Mørkerød</option>
<option style="color:red;" value="red">Rød</option>
<option style="color:orange;" value="orange">Orange</option>
<option style="color:brown;" value="brown">Brun</option>
<option style="color:yellow;" value="yellow">Gul</option>

<option style="color:green;" value="green">Grøn</option>
<option style="color:olive;" value="olive">Mørkegrøn</option>
<option style="color:cyan;" value="cyan">Cyan</option>
<option style="color:blue;" value="blue">Blå</option>
<option style="color:darkblue;" value="darkblue">Mørkeblå</option>
<option style="color:indigo;" value="indigo">Indigo</option>

<option style="color:violet;" value="violet">Violet</option>
</select></td>
<td><select name="addbbcode20" onChange="bbfontstyle('[size=' + this.form.addbbcode20.options[this.form.addbbcode20.selectedIndex].value + ']', '[/size]')"
style="font-family:verdana,sans-serif;
font-size:9px;border:0px;margin:0px;
width:70px;">
<option value="7">Bitte</option>
<option value="9">Lille</option>
<option value="12" selected>Normal</option>
<option value="18">Stor</option>

<option value="24">Koloenorm</option>
</select></td>
</tr>
</table></td>
</tr>
<tr>
<td style="text-align:left;"><textarea name="tekst"
id="message"
tabindex="3" class="textarea"
onselect="storeCaret(this);"
onclick="storeCaret(this);"
onkeyup="storeCaret(this);"
onfocus="bg(this)"
onblur="bg(this)"
style="height:100px;width:394px;"></textarea></td>
</tr>
[/code]

Ok, så det der er taget direkte fra en gammel side jeg lavede engang...

Der er nogle småting, onfocus="bg(this)" og den slags som du nok skal fjerne da det er til andre funktioner, og nok lidt styles som skal fikses

Jeg måtte lige rette lidt i det, da der var en knap i editoren der hedder "[ code ]".

Det er btw ikke mig der har kodet dette.

--
mere :p

Du må selv lige sørge for at parse det når det er sendt, php, asp, hvad du nu bruger, det kan godt være lidt indviklet...

Et tekstfelt? eller wysiwyg?

Lidt ligesom den "editor" herinde, bare så det virker ikke?

øhh ja, det skal smides ind i et textarea, men ikke helt som det er her inde, da det også sletter teksten (prøv selv)

lukker denne gamle gamle tråd, har glemt at tjekke den, men har selv fundet et svar..