bb Code Editor

bluedisc

bluedisc

Aktives Mitglied
Thread Starter
Dabei seit
12.12.2009
Beiträge
371
Reaktionspunkte
9
Hallo!

Ich habe mir ein BB-Code-Editor gebastelt. Wenn ich aber eine Textstelle markiere, und auf Fett klicke wird ganz brav \[b\]text\[\/b\] gesetzt. aber nach dem einsetzten soll text (nicht \[b\][\/b\]) markiert werden, wie hier. Wie?

Viele Grüße,
York

PS: Braucht ihr meinen jetztigen Code?
 
Zuletzt bearbeitet:
wenn Du nicht möchtest das Programmiersprache, Ursache nd Lösung aus einer Glaskugel erraten werden, wäre das gut :)
 
  • Gefällt mir
Reaktionen: below
Code:
/* <![CDATA[ */

  var idTextfeld    = 'nachricht';       // ID der <textarea>
  var idColorpicker = 'colorpicker';     // ID der Tabelle

  var rangeIE = null;

  function insertProperty(prop,val)
  {
    insertText('[' + prop + '=' + val + ']', '[\/' + prop + ']');
  }

  // IE/Gecko-Weiche zum Einfügen von Text ins Textfeld
  function insertText(vor, nach)
  {
     var textfeld = document.getElementById(idTextfeld);
     textfeld.focus();                                         // falls Cursor außerhalb war

     if(typeof document.selection != 'undefined')              // für IE, auch Opera
     {
       insertIE(textfeld, vor, nach);
     }
     else if (typeof textfeld.selectionStart != 'undefined')   // Geckos (FF)
     {
       insertGecko(textfeld, vor, nach);
     }
  }

  // Im "textfeld" Portionen "vor" und "nach" einfügen (IE)
  function insertIE(textfeld, vor, nach)
  {
     if(!rangeIE) rangeIE = document.selection.createRange();

     // nichts weiter tun, falls wir nicht im Textfeld sind
     if(rangeIE.parentElement().id != idTextfeld) { rangeIE = null; return; }

     var alterText = rangeIE.text;

     // Auswahl um BBC ergänzen
     rangeIE.text = vor + alterText + nach;

     // Cursor neu setzen (wie SelfHTML)
     if (alterText.length == 0)
       rangeIE.move('character', -nach.length);
     else
       rangeIE.moveStart('character', rangeIE.text.length);
    
     rangeIE.select();
     rangeIE = null;
  }

  // Im "textfeld" Portionen "vor" und "nach" einfügen (Geckos)
  function insertGecko(textfeld, vor, nach)
  {
     von = textfeld.selectionStart;
     bis = textfeld.selectionEnd;

     // Text zerlegen
     anfang = textfeld.value.slice(0,   von);
     mitte  = textfeld.value.slice(von, bis);
     ende   = textfeld.value.slice(bis);        // der Rest des Strings

     // BBC einfügen und ins Textfeld schreiben
     textfeld.value = anfang + vor + mitte + nach + ende;
     document.forms[beitrag].elements[beitrag].focus();

     // Cursor neu setzen
     if(bis - von == 0)
     {
       textfeld.selectionStart = von + vor.length;
       textfeld.selectionEnd   = textfeld.selectionStart;
     }
     else
     {
       textfeld.selectionEnd   = bis + vor.length + nach.length;
       textfeld.selectionStart = textfeld.selectionEnd;
     }
  };

  // Im IE die Textauswahl merken (onMouseDown im Farbwähler)
  function getSelectionIE()
  {
    if (document.selection)
    {
      document.getElementById(idTextfeld).focus();
      rangeIE = document.selection.createRange();
    }
  }

  /* ========= Ab hier: Farbwähler =================================== */

  // Farbtabelle erzeugen und in Container-Div schreiben bzw. Tabelle löschen
  function generateColorTable(idContainer)
  {
    if(document.getElementById(idColorpicker))
    {
      document.getElementById(idContainer).innerHTML = ''; return;
    }

    var strTabelle = '<table id="colorpicker" cellspacing="0">'+"\n";
strTabelle += 'farbtabelle, die zu lang ist'
    /*for(var r=0; r<257; r+=64)
    {
      strTabelle += "<tr>\n";

      for(var g=0; g<257; g+=64)
        for(var b=0; b<257; b+=64)
           strTabelle += '<td style="background:rgb('+r+','+g+','+b+')" '
                         + 'onclick="pickBgColor(this)" '
                         + 'onmousedown="getSelectionIE()"><\/td>'+"\n";

      strTabelle += "<\/tr>\n";
    }*/
    document.getElementById(idContainer).innerHTML += strTabelle;    // "+=", ggf. "="
  }

  // Hintergrundfarbe des <td>-Elements auslesen und als [color=..] einfügen
  function pickBgColor(elem)
  {
  	var textfeld = document.getElementById(idTextfeld);
  	textfeld.focus();
    insertProperty('color', elem.bgColor);
  }
  
  /* ]]> */

das ist javascript. Die Ursache ist, dass ich nicht den Befehl für teilweises selektieren weiß.

Viele Grüße,
bluedisc
 
Zurück
Oben Unten