(opgelost) HTML-code op cursor invoegen

[Gymnasiast]

Ik heb een HTML-editor in mijn CMS met knoppen voor vette tekst, plaatjes etcetera. Als ik nu een woord selecteer en ik druk op één van de knoppen wordt de tekst vervangen door de codes in plaats van dat ze aan weerskanten worden toegevoegd. Wat ik wil: als de gebruiker in de zin

Code: [Selecteer]

een woord in de zin dat dikgedrukt moet worden
het woord 'dikgedrukt' selecteert en op de knop 'Vet' klikt, dan wordt de zin

Code: [Selecteer]

een woord in de zin dat <b>dikgedrukt</b> moet worden
(en natuurlijk hetzelfde met de andere knoppen.

En nog iets: als ik niets geselecteerd heb en ik klik op een knop, wil ik graag de tags aan weerskanten van de cursor.

Mijn huidige functie is deze (Internet Explorer hoeft niet per se ondersteund te blijven overigens, maar zat toevallig in het voorbeeld dat ik heb overgenomen:

Code: [Selecteer]

function insertAtCursor(naam) {
var artikel = document.bewerkartikel.artikel;
if (naam == "vet")
{
var code = "<b></b>";
}
if (naam == "cursief")
{
var code = "<i></i>";
}
if (naam == "onderstreept")
{
var code = "<u></u>";
}
if (naam == "centreren")
{
var code = "<center></center>";
}
if (naam == "verwijzing")
{
var code = '<a href="pagina-adres">Beschrijving</a>';
}
if (naam == "plaatje")
{
var code = '<img src="naamvanhetplaatje">';
}
if (naam == "nieuweregel")
{
var code = '<br>';
}
if (naam == "rood")
{
var code = '<font color="#BB0000">Rode tekst</font>';
}
if (naam == "horlijn")
{
var code = '<hr>';
}
if (naam == "tabel")
{
var code = '<table></table>';
}
if (naam == "tabelrij")
{
var code = '<tr></tr>';
}
if (naam == "tabelcel")
{
var code = '<td></td>';
}

//IE support
if (document.selection) {
artikel.focus();
sel = document.selection.createRange();
sel.text = code;
}
//MOZILLA/NETSCAPE support
else if (artikel.selectionStart || artikel.selectionStart == '0') {
var startPos = artikel.selectionStart;
var endPos = artikel.selectionEnd;
artikel.value = artikel.value.substring(0, startPos)
+ code
+ artikel.value.substring(endPos, artikel.value.length);
} else {
artikel.value += code;
}
}
document.write (document.bewerkartikel.artikel);
Weet iemand hoe ik dit voor elkaar krijg? Ik weet dat het mogelijk moet zijn, want de editor op dit forum kan het ook.

[erik1984]

Als ik zo snel even kijk lijk je dat stuk er idd uit te knippen (in de firefox code). Je pakt eerst het artikel tot aan de selectie, plakt de code ertussen en dan plak je daar weer het artikel ná de selectie aan. De selectie zelf verdwijnt zo. Misschien het volgende toevoegen:

Code: [Selecteer]

var selectie = artikel.value.substring(startPos,endPos);

en daar de codetags omheen zetten.

[Gymnasiast]

Geweldig, dat loste het belangrijkste probleem op .

Weet je ook hoe ik ervoor kan zorgen dat als er niets is geselecteerd de code aan weerskanten van de cursor wordt geplaatst en de cursor blijft staan? (Dat was het tweede probleem dat ik in de startpost vermeldde.)

[erik1984]

https://developer.mozilla.org/en/XUL/Property/selectionEnd

Over SelectionEnd:

If this value is equal to the value of the selectionStart property, no text is selected, but the value indicates the position of the caret (cursor) within the textbox.

In dat geval kun je volgens mij gewoon doen wat je nu al hebt toch? selectionStart en selectionEnd bevatten dan de cursorpositie als het goed is. Dus je kan de tekst voor en na de cursor knippen zoals je nu doet en de code ertussen plaatsen.

[Gymnasiast]

Ik bedoelde eigenlijk dat het probleem is dat de cursor verdwijnt en niet blijft staan. Maar dat was niet zo heel belangrijk. Het belangrijkste probleem was het vervangen ipv omsluiten maar daar heb jij de oplossing voor aangedragen (dank daarvoor). Ik ga het topic dus gewoon markeren als opgelost.