Nieuws:

We zijn er weer.

Na lange tijd van afwezigheid zijn we er weer  :laugh:
We hebben alle wachtwoorden gereset, je oude wachtwoord werkt niet meer.Je moet via het "wachtwoord vergeten"-linkje je wachtwoord resetten. Je krijgt hiervoor een mailtje op het adres dat je bij ons geregistreerd hebt.

De komende tijd zijn we nog druk bezig om de rest van de site op te bouwen, dus het kan zijn dat sommige onderdelen (tijdelijk) niet werken.

Welkom, Gast. Alsjeblieft inloggen of registreren.
Heb je de activerings-mail niet ontvangen?

Auteur Topic: (opgelost) HTML-code op cursor invoegen  (gelezen 1102 keer)

Offline Gymnasiast

  • Lid
  • Steunpunt: Nee
(opgelost) HTML-code op cursor invoegen
« Gepost op: 2012/01/17, 13:33:10 »
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
een woord in de zin dat dikgedrukt moet worden
het woord 'dikgedrukt' selecteert en op de knop 'Vet' klikt, dan wordt de zin
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:
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.
« Laatst bewerkt op: 2012/01/17, 22:34:54 door Gymnasiast »
NOBODY expects the Spanish Inquisition!

Offline erik1984

  • Lid
    • erik1984
  • Steunpunt: Nee
Re: HTML-code op cursor invoegen
« Reactie #1 Gepost op: 2012/01/17, 13:51:22 »
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:

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

en daar de codetags omheen zetten.

Offline Gymnasiast

  • Lid
  • Steunpunt: Nee
Re: HTML-code op cursor invoegen
« Reactie #2 Gepost op: 2012/01/17, 14:04:01 »
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.)
NOBODY expects the Spanish Inquisition!

Offline erik1984

  • Lid
    • erik1984
  • Steunpunt: Nee
Re: HTML-code op cursor invoegen
« Reactie #3 Gepost op: 2012/01/17, 14:58:53 »
https://developer.mozilla.org/en/XUL/Property/selectionEnd

Over SelectionEnd:
Citaat
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.

Offline Gymnasiast

  • Lid
  • Steunpunt: Nee
Re: HTML-code op cursor invoegen
« Reactie #4 Gepost op: 2012/01/17, 22:34:26 »
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.
NOBODY expects the Spanish Inquisition!