Indsæt BB Code, rundt om den markeret tekst

Det gik vidst lidt for hurtigt prøver lige igen:
Hvordan kan man lave så der f.eks kommer "b tags" rundt om den markeret tekst inde i en textarea? Jeg har ledt på nettet i lang tid nu, og har stadig ikke fundet noget der virker.

Altså mener du sådan, at man har fx en Fed, Kursiv, Understreg knap, hvor når man trykker på disse, laver de den markerede text den style?

I såfald burde det, være sådan noget her du leder efter:

<script type="text/javascript">
<!--
    function formatText (tag) {
        var selectedText = document.selection.createRange().text;
       
        if (selectedText != "") {
            var newText = "<" + tag + ">" + selectedText + "</" + tag + ">";
            document.selection.createRange().text = newText;
        }
    }
//-->
</script>

<form name="din_form">
    <textarea name="dit_textarea"></textarea><br />
    <input type="button" value="bold" onclick="formatText ('b');" />
    <input type="button" value="italic" onclick="formatText ('i');" />
    <input type="button" value="underline" onclick="formatText ('u');" />
</form>

Håber det kan bruges :) du må endelig skrive hvis du har spørgsmål til overstående script, eller ønsker øget funktionaliteter :)

Alternativt kunne man bruge TinyMCE som er en JavaScript WYSIWYG editor, der er lidt mere brugervenligt. Det er dog ikke vailid (det virker dog i alle nye browser).

#2
Det var lige præcis sådan noget jeg havde forestillet mig.

Men hvordan kan jeg f.eks. gøre sådan at når man vil tilføje et link, så kommer der først en "pop up alert box" hvori man skal skrive linket og derefter kommer der en til "pop up alert box" hvori man skal skrive hvad der skal stå i linket. Så resultatet er således: Hjemmeside

Og så med tilføj billede hvordan gør man så sådan med et "pop up alert box" hvori man skal skrive billede linket? resultat: http://billedelink.dk/billede.png

Tak på forhånd
Mikkel Mathiesen

Hmm jeg kan se den ændre de "resultater" jeg har lavet, håber du forstår det alligevel.

Mikkel Mathiesen

<ole>

Hvis det kan have interesse for andre, har jeg skrevet en lille bookmarklet, jeg har liggende i min Links-bar i IE (læs evt. om bookmarklets her: http://www.dengodekode.dk/bm_artikel.html ). Bookmarklet'en gør automatisk BB-indsættelse muligt her i Ekspertens textarea.

Når jeg har klikket på favoritten, kan jeg udvælge tekst og trykke Ctrl+B, Ctrl+I eller Ctrl+U og indsætte BB-tags omkring teksten. Hvis man undlader at udvælge tekst, indsætter den BB-koden, hvor cursoren står - hvorefter cursoren flyttes ind i tagget:

<a href='java script:d=document;o=d.getElementById("newreplytext");d.onkeydown=function(){e=event;k=e.keyCode;if(e.ctrlKey&&(k==66||k==73||k==85)){t=k==66?"b":k==73?"i":"u";oT=d.selection.createRange();if(oT.text.length>0)oT.text="["+t+"]"+oT.text+"[/"+t+"]";else oT.text="["+t+"][/"+t+"]";oT.moveStart("character",-4);oT.collapse();oT.select();e.cancelBubble=true;e.returnValue=false}};void(0)'>[OCBM] - Format</a>

Både min bookmarklet og CCodam's kode virker dog kun i IE  :o|

/mvh
</bole>

#4 Ville det ikke være bedst, hvis folk bare skrev linket ind, og at du så ved post, laved en regex der finder http:// eller www og laver disse om til links, sådan så brugeren skal lave mindst muligt?

Efter min mening så synes jeg det med "pop up alert box" er bedst.

#8 Jamen så får du det da sådan :)
Hvis noget i teksten er markeret, så vil den automatisk antage at dette er linket, og kun spørge efter hvilket navn linket skal have...

<script type="text/javascript">
<!--
    function formatText (tag) {
        var selectedText = document.selection.createRange().text;
     
        if (selectedText != "") {
            if (tag == "b" || tag == "i" || tag == "u") {
                var newText = "<" + tag + ">" + selectedText + "</" + tag + ">";
                document.selection.createRange().text = newText;
            }
            else if (tag == "l") {
                var lname = prompt("Type in the the name of the link")
                var newText = "<a href=\"" + selectedText + "\">" + lname + "</a>";
                document.selection.createRange().text = newText;
            }
        }
        else {
            if (tag == "l") {
                var link = prompt("Type in the hyperlink")
                var lname = prompt("Type in the the name of the link")
                var newText = "<a href=\"" + link + "\">" + lname + "</a>";
                document.selection.createRange().text = newText;
            }
        }
    }

//-->
</script>

<form name="din_form">
    <textarea name="dit_textarea"></textarea><br />
    <input type="button" value="bold" onclick="formatText ('b');" />
    <input type="button" value="italic" onclick="formatText ('i');" />
    <input type="button" value="underline" onclick="formatText ('u');" />
    <input type="button" value="link" onclick="formatText ('l');" />
</form>

I IE er prompt ikke længere tilgængelig, så man er nødt til at lave én selv.

Her er et script uden links, men til gengæld cross browser og du kan vælge mellem Ctrl+B eller knappen B (og ligeså med I og U):

<script type="text/javascript">
function insBBTags(oTxt, sTag) {
    var sVal = oTxt.value;
    oTxt.focus();
    if (document.selection && document.selection.createRange) {
        var oSel = document.selection.createRange();
        if (oSel.parentElement()==oTxt) {
            oSel.text = "["+sTag+"]" + oSel.text + "[/"+sTag+"]";
            oSel.moveStart("character", -4);
            oSel.collapse();
            oSel.select();
            oTxt.focus();
        }
    }
    else if (typeof oTxt.selectionStart=="number") {
        var nLen = oTxt.textLength;
        var nSelStart = oTxt.selectionStart;
        var nSelEnd = oTxt.selectionEnd;
        oTxt.value = sVal.substring(0, nSelStart) + "["+sTag+"]" + sVal.substring(nSelStart, nSelEnd) + "[/"+sTag+"]" + sVal.substring(nSelEnd, nLen);
        if (nLen>0) oTxt.selectionStart = oTxt.selectionEnd = nSelEnd+3;
        else oTxt.selectionStart = oTxt.selectionEnd = nSelStart+3;
    } else {
        oTxt.value += "["+sTag+"][/"+sTag+"]";
        oTxt.focus();
    }
}
function insTagHere(oTxt, e) {
    if (!e.ctrlKey) return true;
    var bKillEvnt = true;
    switch (e.keyCode) {
        case 66:
            insBBTags(oTxt, "b");
        break;
        case 73:
            insBBTags(oTxt, "i");
        break;
        case 85:
            insBBTags(oTxt, "u");
        break;
        default:
            bKillEvnt = false;
    }
    if (!bKillEvnt) return true;
    if (e.stopPropagation) e.stopPropagation();
    if (e.preventDefault) e.preventDefault();
    e.cancelBubble = true;
    e.returnValue = false;
}
</script>

<p><textarea id="message" cols="50" rows="10" onkeydown="insTagHere(this, event)"></textarea></p>

<p><button title="Bold" onclick="addTags(document.getElementById('message'),'b')"><b>B</b></button>
<button title="Italic" onclick="addTags(document.getElementById('message'),'i')"><i>I</i></button>
<button title="Underline" onclick="addTags(document.getElementById('message'),'u')"><u>U</u></button></p>

- også her springer cursoren ind i tagget

#10 Nej ok :/ men kan du så ikke prøve at lave dit bud på et "prompt" like script, til hans link funktion, for så går det ud over mine evner :)

#10
Wauw, fedt lavet. Mange tak, men kan du ikke lave det med link og billede, det ville være super fedt.

Tak på forhånd
Mikkel Mathiesen

#10
btw. selve knapperne virker ikke, men det med ctrl virker perfekt.

MVH Mikkel Mathiesen

Fandt fejlen:
onclick="addTags(document.getElementById('message'),'b')"
Skal være:
onclick="insBBTags(document.getElementById('message'),'b')"

Her er det med links. Det er kun i IE 7, prompt ikke virker, så dér lavede jeg et lille 'hack'  =)

<script type="text/javascript">
function insBBTags(oTxt, sTag) {
    var sVal = oTxt.value;
    oTxt.focus();
    if (document.selection && document.selection.createRange) {
        var oSel = document.selection.createRange();
        if (oSel.parentElement()==oTxt) {
            if (sTag=="a") {
                var oSel = document.selection.createRange();
                var oLinkTest = document.getElementById("ieLinkTest");
                oLinkTest.setAttribute("contentEditable", "true");
                oLinkTest.focus();
                document.execCommand("CreateLink")
                oSel.text = "<a href='"+oLinkTest.firstChild.getAttribute("href")+"'>"+oSel.text+"</a>";
                oLinkTest.removeChild(oLinkTest.firstChild);
            }
            else oSel.text = "["+sTag+"]" + oSel.text + "[/"+sTag+"]";
            oSel.moveStart("character", -4);
            oSel.collapse();
            oSel.select();
            oTxt.focus();
        }
    }
    else if (typeof oTxt.selectionStart=="number") {
        var nLen = oTxt.textLength;
        var nSelStart = oTxt.selectionStart;
        var nSelEnd = oTxt.selectionEnd;
        if (sTag=="a") {
            var sHref = prompt("Angiv en URL:");
            var sLnk = "<a href='"+sHref+"'>" + sVal.substring(nSelStart, nSelEnd) + "</a>";
            oTxt.focus();
            oTxt.value = sVal.substring(0, nSelStart) + sLnk + sVal.substring(nSelEnd, nLen);
            oTxt.selectionStart = oTxt.selectionEnd = nSelStart+sLnk.length-4;
        } else {
            oTxt.value = sVal.substring(0, nSelStart) + "["+sTag+"]" + sVal.substring(nSelStart, nSelEnd) + "[/"+sTag+"]" + sVal.substring(nSelEnd, nLen);
            if (nLen>0) oTxt.selectionStart = oTxt.selectionEnd = nSelEnd+3;
            else oTxt.selectionStart = oTxt.selectionEnd = nSelStart+3;
        }
    } else {
        oTxt.value += "["+sTag+"][/"+sTag+"]";
        oTxt.focus();
    }
}
function insTagHere(oTxt, e) {
    if (!e.ctrlKey) return true;
    var bKillEvnt = true;
    switch (e.keyCode) {
        case 66:
            insBBTags(oTxt, "b");
        break;
        case 73:
            insBBTags(oTxt, "i");
        break;
        case 76:
            insBBTags(oTxt, "a");
        break;
        case 85:
            insBBTags(oTxt, "u");
        break;
        default:
            bKillEvnt = false;
    }
    if (!bKillEvnt) return true;
    if (e.stopPropagation) e.stopPropagation();
    if (e.preventDefault) e.preventDefault();
    e.cancelBubble = true;
    e.returnValue = false;
}
</script>

<p><textarea CONTENTEDITABLE id="message" cols="50" rows="10" style="display:block;border:1px solid red" onkeydown="insTagHere(this, event)"></textarea></p>

<p><button title="Bold" onclick="insBBTags(document.getElementById('message'),'b')"><b>B</b></button>
<button title="Italic" onclick="insBBTags(document.getElementById('message'),'i')"><i>I</i></button>
<button title="Underline" onclick="insBBTags(document.getElementById('message'),'u')"><u>U</u></button>
<button title="Link" onclick="insBBTags(document.getElementById('message'),'a')">L</button></p>
<div id="ieLinkTest" style="position:absolute;width:0px;height:0px;left:100px;top:-100px;overflow:hidden"></div>

Ups .. rester fra tests  =)

<p><textarea CONTENTEDITABLE id="message" cols="50" rows="10" style="display:block;border:1px solid red" onkeydown="insTagHere(this, event)"></textarea></p>

- skal bare være:

<p><textarea id="message" cols="50" rows="10" onkeydown="insTagHere(this, event)"></textarea></p>

- og denne:

<div id="ieLinkTest" style="position:absolute;width:0px;height:0px;left:100px;top:-100px;overflow:hidden"></div>

- bør også lægges ud til venstre ... og fjern den gerne endnu mere:

<div id="ieLinkTest" style="position:absolute;width:0px;height:0px;left:-1000px;top:-1000px;overflow:hidden"></div>

Nu ser jeg, du også gerne vil have mulighed for billeder. Det er der ikke et lignende 'hack' til, men du kunne vælge at bruge prompt til begge i Firefox - og så bruge showModalDialog i IE:
    http://msdn.microsoft.com/en-us/library/ms536759(VS.85).aspx

- men det får du selv lov at lege lidt med  =)

#18
Det vil jeg prøve, tusind tak for hjælpen :D

Nu har jeg prøvet at lave <a href=""></a> om til [ url ] tags (uden mellemrum), men det gik helt galt, vil du ikke være venlig at prøve at lave det?

Tak på forhånd
Mikkel Mathiesen

ps. smid lige et svar ;)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Indsæt BB-Kode [http://www.eksperten.dk/spm/872172]</title>
</head>
<body>

<script type="text/javascript">
function insBBTags(oTxt, sTag) {
    var sVal = oTxt.value;
    oTxt.focus();
    if (document.selection && document.selection.createRange) {
        var oSel = document.selection.createRange();
        if (oSel.parentElement()==oTxt) {
            if (sTag=="a") {
                var oDialog = window.showModalDialog("dialog.html?u="+new Date().getTime(), ["link", oSel.text], "dialogHeight:150px;dialogWidth:400px;edge:Raised;center:Yes;resizable:No;status:No");
                if (oDialog) oSel.text = "[a href='"+oDialog[0]+"']" + oDialog[1] + "[/a]";
            }
            else if (sTag=="g") {
                var oDialog = window.showModalDialog("dialog.html?u="+new Date().getTime(), ["pic", ""], "dialogHeight:105px;dialogWidth:400px;edge:Raised;center:Yes;resizable:No;status:No");
                if (oDialog) oSel.text += "[img src='"+oDialog[0]+"']";
            }
            else oSel.text = "["+sTag+"]" + oSel.text + "[/"+sTag+"]";
            if (sTag!="g")oSel.moveStart("character", -4);
            oSel.collapse();
            oSel.select();
            oTxt.focus();
        }
    }
    else if (typeof oTxt.selectionStart=="number") {
        var nLen = oTxt.textLength;
        var nSelStart = oTxt.selectionStart;
        var nSelEnd = oTxt.selectionEnd;
        if (sTag=="a") {
            var sHref = prompt("Angiv en URL:");
            var sLnk = "<a href='"+sHref+"'>" + sVal.substring(nSelStart, nSelEnd) + "</a>";
            oTxt.focus();
            oTxt.value = sVal.substring(0, nSelStart) + sLnk + sVal.substring(nSelEnd, nLen);
            oTxt.selectionStart = oTxt.selectionEnd = nSelStart+sLnk.length-4;
        }
        else if (sTag=="g") {
            var sSrc = prompt("Angiv en URL:");
            var sImg = sVal.substring(nSelStart, nSelEnd) + "[img src='"+sSrc+"']";
            oTxt.focus();
            oTxt.value = sVal.substring(0, nSelStart) + sImg + sVal.substring(nSelEnd, nLen);
            oTxt.selectionStart = oTxt.selectionEnd = nSelStart+sImg.length;
        } else {
            oTxt.value = sVal.substring(0, nSelStart) + "["+sTag+"]" + sVal.substring(nSelStart, nSelEnd) + "[/"+sTag+"]" + sVal.substring(nSelEnd, nLen);
            if (nLen>0) oTxt.selectionStart = oTxt.selectionEnd = nSelEnd+3;
            else oTxt.selectionStart = oTxt.selectionEnd = nSelStart+3;
        }
    } else {
        oTxt.value += "["+sTag+"][/"+sTag+"]";
        oTxt.focus();
    }
}
function insTagHere(oTxt, e) {
    if (!e.ctrlKey) return true;
    var bKillEvnt = true;
    switch (e.keyCode) {
        case 66:
            insBBTags(oTxt, "b");
        break;
        case 73:
            insBBTags(oTxt, "i");
        break;
        case 76:
            insBBTags(oTxt, "a");
        break;
        case 71:
            insBBTags(oTxt, "g");
        break;
        case 85:
            insBBTags(oTxt, "u");
        break;
        default:
            bKillEvnt = false;
    }
    if (!bKillEvnt) return true;
    if (e.stopPropagation) e.stopPropagation();
    if (e.preventDefault) e.preventDefault();
    e.cancelBubble = true;
    e.returnValue = false;
}
</script>

<p><textarea id="message" cols="50" rows="10" onkeydown="insTagHere(this, event)"></textarea></p>

<p><button title="Bold" onclick="insBBTags(document.getElementById('message'),'b')"><b>B</b></button>
<button title="Italic" onclick="insBBTags(document.getElementById('message'),'i')"><i>I</i></button>
<button title="Underline" onclick="insBBTags(document.getElementById('message'),'u')"><u>U</u></button>
<button title="Link" onclick="insBBTags(document.getElementById('message'),'a')">L</button>
<button title="Picture" onclick="insBBTags(document.getElementById('message'),'g')">G</button></p>

<!-- dialog.html - Start

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Titel</title>
<style type="text/css">
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    font: 11px tahoma, sans-serif;
    background: buttonface;
    overflow: hidden;
}
body {
    padding: 8px 20px 0 20px;
}
p {
    padding: 6px 0 6px 0;
    margin: 0;
}
input {
    width: 355px;
    font: 11px tahoma, sans-serif;
}
p.btns {
    padding-top: 8px;
    margin-top: 6px;
    border-top: 2px groove buttonhighlight;
    text-align: center;
}
p.btns button {
    width: 80px;
    margin: 0 3px;
}
</style>
<script type="text/javascript">
function gE(id){return document.getElementById(id)};
function setReturn() {
    window.returnValue = [gE("url").value, gE("txt").value];
}

window.returnValue = false;
var aArgs = null;
window.onload = function() {
    aArgs = window.dialogArguments;
    if (aArgs[0]=="link") {
        document.title = "Indsæt Link";
        gE("txt").value = aArgs[1];
        gE("lblUrl").firstChild.nodeValue = "Angiv en URL:";
        gE("lblTxt").firstChild.nodeValue = "Linktekst:";
    }
    else if (aArgs[0]=="pic") {
        document.title = "Indsæt Billede";
        gE("lblUrl").firstChild.nodeValue = "Angiv en URL:";
        gE("txtCont").style.display = "none";
    }
    var oUrl = gE("url");
    var oRng = oUrl.createTextRange();
    oRng.moveStart("character", oUrl.value.length);
    oRng.collapse();
    oRng.select();
}
</script>
</head>
<body>

<p><label id="lblUrl" for="url">&nbsp;</label><br><input id="url" type="text" value="http://"></p>
<p id="txtCont"><label id="lblTxt" for="txt">&nbsp;</label>:<br><input id="txt" type="text"></p>
<p class="btns"><button onclick="setReturn();window.close()">OK</button><button onclick="window.close()">Fortryd</button></p>

</body>
</html>

dialog.html - End -->

</body>
</html>

Det er første gennemskrivning, så du må selv 'sexe' koden op, hvis du vil. Keyboard shortcuts virker ikke i Opera (default events kan ikke aflyses), så du kunne skrive noget i stil med:

function insTagHere(oTxt, e) {
    if (navigator.userAgent.toLowerCase().indexOf("opera")>-1) return true;
    if (!e.ctrlKey) return true;
    ... osv ... osv ...

PS: jeg prøvede med 'Ctrl+p' for 'picture', men så insisterede IE på at skrive p'et i textarea'et - derfor 'Ctrl+g' for 'graphic'  =)

Det er fandme godt lavet, jeg siger tusind tak for hjælpen :D

MVH Mikkel Mathiesen

Selvtak - og tak for points  ;o)