Skapa HTML kod i formulär?

Tjenare, jag har sökt lite utan att hitta något som passar mig.

När man skriver ett inlägg här på webforum t.e.x. så kan man enkelt infoga länkar eller tjock text genom att klicka på knapparna ovanför textrutan då det uppenbarar sig en ruta där man skriver in sin valda fettext. Jag undrar hur man gör en sådan funktion?

Tack på förhand!

Hej!

Det använder du JavaScript till. Exempel:

<script type="text/javascript">

function trim(s){
    return s.replace(/(^\s+)|(\s+$)/g, "");
}

function bt(f){
    var txt = window.prompt("Skriv in den text som skall vara fetstilt", "");

    if (txt != null && trim(txt).length != 0){
        f.elements["message"].value += "&#91;b]" + txt + "&#91;/b]";
    }
}

</script>

<form>
    <textarea name="message"></textarea>
    <input type="button" value="Bold" onclick="bt(this.form)">
</form>

En följdfråga, måste man skapa en funktion för varje stil man vill lägga till? Ex.

<script type="text/javascript">

function trim(s){
    return s.replace(/(^\s+)|(\s+$)/g, "");
}

function bt(f){
    var txt = window.prompt("Skriv in den text som skall vara fetstilt", "");

    if (txt != null && trim(txt).length != 0){
        var elm = f.elements["message"];

        elm.value += "&#91;b]" + txt + "&#91;/b]";
    }
}

function bf(f){
    var txt = window.prompt("Skriv in den text som skall vara fetstilt", "");

    if (txt != null && trim(txt).length != 0){
        var elm = f.elements["message"];

        elm.value += "&#91;i]" + txt + "&#91;/i]";
    }
}

</script>

<form>
    <textarea name="message"></textarea>
    <input type="button" value="Bold" onclick="bt(this.form)">
    <input type="button" value="Kursiv" onclick="bf(this.form)">
</form>

Nej. Med lite modifikation:

<script type="text/javascript">

function trim(s){
    return s.replace(/(^\s+)|(\s+$)/g, "");
}

function bt(f, t){
    var txt = window.prompt("Skriv text som skall vara mellan &#91;" + t + "]&#91;/" + t + "]", "");

    if (txt != null && trim(txt).length != 0){
        f.elements["message"].value += "&#91;" + t + "]" + txt + "&#91;/" + t + "]";
    }
}

</script>

<form>
    <textarea name="message"></textarea>
    <input type="button" value="Bold" onclick="bt(this.form, 'b')">
    <input type="button" value="Kursiv" onclick="bt(this.form, 'i')">
</form>

Ett uppslagsverk i mänsklig form. :)

Tack för den!

Det är jag som ska tacka! :)

Men hur importerar man en URL? När man först får välja vad länk-texten ska vara, sedan vad adressen är?

<script type="text/javascript">

function trim(s){
    return s.replace(/(^\s+)|(\s+$)/g, "");
}

function t(f, t){
    var txt = window.prompt("Skriv text som skall vara mellan [" + t + "][/" + t + "]", "");

    if (txt != null && trim(txt).length != 0){
        f.elements["message"].value += "[" + t + "]" + txt + "[/" + t + "]";
    }
}

function lnk(f, t){
    var txt = window.prompt("Skriv länktexten", ""),
	url = "";

    if (txt != null && trim(txt).length != 0){
	url = window.prompt("Skriv URL:en", "");

	if (url != null && trim(url).length != 0){
	    f.elements["message"].value += "[" + t + "=" + url + "]" + txt + "[/" + t + "]";
	}
    }
}

</script>

<form>
    <textarea name="message"></textarea>
    <input type="button" value="Fet" onclick="t(this.form, 'b')">
    <input type="button" value="Kursiv" onclick="t(this.form, 'i')">
    <input type="button" value="Länk" onclick="lnk(this.form, 'a')">
</form>

Pillade lite i koden Peter, och la till

f.elements["message"].value += "[" + t + "=" + url + "]" + txt + "[/" + t + "]";

Vet inte om det är korrekt, eftersom jag endast kan ytterst lite om javascript, men nu blir det [ a=asdf]asdf[ /a], alltså det värdet som står i lnk(this.form, 'a').

:bire

Ja, givetvis skall det vara så. *redigerar*

Jag vet att det inte är jag som har startat tråden, men har också ett stort behov av det här på en sida jag håller på att utvecklar.

En följdfråga; Hade tänkt att använda mig av det här i en gästbok, men det finns så knappt om plats, så jag tänkte om man kunde trycka på en länk, så öppnas ett popupfönster med alla dessa buttons, sedan, om man trycker på någon av dessa så infogas det i textarean i gästboken (huvudfönstret).
Går det att ordna? :)

Javisst. Den bästa lösningen är nog att lägga all JavaScript-kod i popupfönstret och sedan göra följande ändringar:

function t(a){
    if (!window.opener){
        return;
    }

    var txt = window.prompt("Skriv text som skall vara mellan [" + a + "][/" + a + "]", "");

    if (txt != null && trim(txt).length != 0){
        window.opener.document.forms["[b]namn_på_formulär[/b]"].elements["message"].value += "[" + a + "]" + txt + "[/" + a + "]";
    }
}

function lnk(a){
    if (!window.opener){
        return;
    }

    var txt = window.prompt("Skriv länktexten", ""),
	url = "";

    if (txt != null && trim(txt).length != 0){
	url = window.prompt("Skriv URL:en", "");

	if (url != null && trim(url).length != 0){
	    window.opener.document.forms["[b]namn_på_formulär[/b]"].elements["message"].value += "[" + a + "=" + url + "]" + txt + "[/" + a + "]";
	}
    }
}

Anrop:

// Ta bort det första argumentet
onclick="t('b')"

Briliant! ;)

Tack! :) :) :)

Ja, tack! :)

Flyttas från PHP..

Det funkar inte riktigt. Bold och Kursiv funkar jättebra. Men inte att skapa länkar. Så här ser koderna ut:

<script type="text/javascript">
function trim(s){
    return s.replace(/(^\s+)|(\s+$)/g, "");
}

function t(f, t){
    var txt = window.prompt("Skriv text som skall vara mellan <" + t + ">xxx</" + t + ">", "");

    if (txt != null && trim(txt).length != 0){
        f.elements["news"].value += "<" + t + ">" + txt + "</" + t + ">";
    }
}

function lnk(f, t){
    var txt = window.prompt("Skriv textem som ska länkas", ""),
	url = "";

    if (txt != null && trim(txt).length != 0){
	url = window.prompt("Skriv adressem", "");

	if (url != null && trim(url).length != 0){
	    f.elements["news"].value += "<" + t + "=" + url + ">" + txt + "</" + t + ">";
	}
    }
}
</script>

och på sidan:

					<input type="button" value="Infoga tjock text" onClick="t(this.form, 'b')"><br/>
					<input type="button" value="Infoga kursiv text" onClick="t(this.form, 'i')"><br/>
					<input type="button" value="Infoga hyperlänk" onClick="lnk(this.form, 'a'"><br/>

1. Parentes:

<input type="button" value="Infoga hyperlänk" onClick="lnk(this.form, 'a'[b])[/b]"><br/>

2. Semikolon:

var txt = window.prompt("Skriv texten som ska länkas", "");

I och för sig så skapas inte en länk så där.

Nej, jag märker det. För det funkar inte!

Detta fungerar för mig:

<script type="text/javascript">
function trim(s){
    return s.replace(/(^\s+)|(\s+$)/g, "");
}

function t(f, t){
    var txt = window.prompt("Skriv text som skall vara mellan <" + t + ">xxx</" + t + ">", "");

    if (txt != null && trim(txt).length != 0){
        f.elements["news"].value += "<" + t + ">" + txt + "</" + t + ">";
    }
}

function lnk(f, t){
    var txt = window.prompt("Skriv textem som ska länkas", ""),
	url = "";

    if (txt != null && trim(txt).length != 0){
	url = window.prompt("Skriv adressen", "");

	if (url != null && trim(url).length != 0){
	    f.elements["news"].value += "<" + t + "=" + url + ">" + txt + "</" + t + ">";
	}
    }
}
</script>

<form>
<textarea name="news" rows="15" cols="60"></textarea>
	<input type="button" value="Infoga tjock text" onClick="t(this.form, 'b')"><br/>
	<input type="button" value="Infoga kursiv text" onClick="t(this.form, 'i')"><br/>
<input type="button" value="Infoga hyperlänk" onClick="lnk(this.form, 'a')"><br/>
</form>

Någon som vet hur dom löst detta på blogger.com där allting sker precis som i word, alltså du markerar lite text och klickar på bold så blir texten verkligen fet, direkt i textboxen.

Antar att det är ganska komplicerat, men det är ju så läckert! :e

DatorMagazin gade en artikel om just sådana editorer i förra numret. Jag har tyvärr tappat bort mitt nummer, men kolla på din närmsta bibbla. I artikeln finns det länkar för att ladda ner sådana editorer.
Men det måste ju förstås finnas ett stöd på server-sidan för det också.