[Javascript] Selectie in textarea

[Verwijderd]

Hallo,

Ik weet dat in de search veel te vinden is ... en ik heb ook alle mogelijkheden van textarea, select, selection, createRange, tags om tekst e.d. geprobeerd maar kom net niet op het juiste antwoord. Ik heb vervolgens geprobeerd om in de references van javascript het antwoord te vinden maar dit lukte ook niet.

Ik probeer het volgende te bereiken. Gewoon simpele html tags om een tekst heen te zetten. Die tekst staat in een textarea en is geselecteerd door de gebruiker.

Met deze regel code krijg geef ik de selectie weer in een alert :

code:

alert(document.selection.createRange().text);

Dus dat lukt wel, maar nu is het probleem om er tags omheen te zetten. Ik snap dat met textareanaam.value = '<tag>' + selectie '</tag>' je de tags eromheen zet maar dat werkt alleen als je heel de tekst selecteert , en niet een gedeelte.

Verder heb ik al gelezen dat je kunt zoeken naar de positie van je selectie en dan met substr eerst de tekst voor de selectie, dan tag, dan selectie, dan tag en dan tekst na selectie. Maar dan is het probleem dat als de selectie meerdere keren voorkomt de tags wellicht om de verkeerde tekst komen te staan.

Ik zou zeggen dat je een soort left of begin attribuut hebt ... maar die heb ik niet kunnen vinden voor document.selection nog voor de createRange().

Alvast bedankt !

[jvo]

Ik weet wat precies het doel is, maar je kan kijken naar het html edit component dat standaard in ie zit. Het werkt zover ik weet dus niet met andere browsers, maar stelt je in staat om eenvoudig een html-edit textarea te creeren, dat ongeveer werkt als een textverwerkingsprogramma. Met ctrl-b wordt de tekst dus gewoon bold, maar de eigenlijke input wordt gewoon voorzien van <B> tags.

[Verwijderd]

en waar kan ik dat component vinden ?

[Janoz]

**** over Javascript en HTML topics ****

Programming & Webscripting -> Webdesign & Graphics

[Verwijderd]

Janoz schreef op 05 april 2004 @ 15:34:
**** over Javascript en HTML topics ****

Programming & Webscripting -> Webdesign & Graphics

Sorry zo duidelijk had ik de omschrijving niet gelezen .... ik liet me misleiden door het feit dat er scripting in de titel stond. Excuses

[RM-rf]

createRange creert een Range-object, hiervan kun je allerhande waardes uitlezen
http://www.w3.org/TR/2000...es.html#Level-2-Range-idl

kijk bv naar de insertNode -methode

[Verwijderd]

Met een combinatie van deze twee functies heb je iig een Gecko+IE compatibele versie...
Linea recta uit mijn editor core (NextAvenue) geknipt en plakt, moet je wel even een paar aanpassingen maken...

code:

NextAvenue.prototype.insertHTML = function(html) {
  var sel = this.getSelection();
  var range = this.getRange();

  if (this.browser.isIE) {
    if ((sel.type+"").toLowerCase() == "control") {
      range(0).insertAdjacentHTML("beforeBegin", html);
      range(0).removeNode(true);
// Inserting HTML when control (Table, Image etc) is selected: not done yet!
    } else {
      range.pasteHTML(html);
    }
  } else {
    var div = document.createElement("div");
    div.innerHTML = html;
    range.deleteContents();
    for (var i = 0; i < div.childNodes.length; i++) {
      range.insertNode(div.childNodes[i]);
    }
  }
};

NextAvenue.prototype.getHtmlFromRange = function () {
  if (r = this.getRange()) {
    if (this.browser.isIE) {
      return (r.htmlText);
    } else {
      documentFragment = r.cloneContents();
      var myElem = document.createElement("div");
      myElem.appendChild(documentFragment);
      return (myElem.innerHTML);
    }
  }
}

[ Voor 4% gewijzigd door Verwijderd op 05-04-2004 15:49 ]

[Verwijderd]

RM-rf schreef op 05 april 2004 @ 15:39:
createRange creert een Range-object, hiervan kun je allerhande waardes uitlezen
http://www.w3.org/TR/2000...es.html#Level-2-Range-idl

kijk bv naar de insertNode -methode

Ok als ik het goed begrijp kan ik het begin en eind van de range uitlezen met startContainer en endContainer.... maar als ik dat probeer te testen met alert(range.startContainer) krijg ik de waarde undefined terug...

Wat doe ik fout ?