Feature: SPAN Auszeichnung mit Spaw-Editor + Bugfix

[matze]

ist es möglich die style-sheet-zuweisung auf eine span-auszeichnung umzustellen?

mein problem:
obwohl ich nur ein wort markiert habe, wird bei mir immer gleich der gesamte absatz mit dem style-sheet ausgezeichnet.

weiß jemand rat?
matze

[emergence]

der spaw ist momentan nicht dafür ausgelegt...
da müsste man in der class/script.js.php herumhacken...

[matze]

aha, danke!

theoretisch müsste man demnach in der "script.js.php" nur folgende funktion umschreiben, oder?

Code: Alles auswählen

  function SPAW_style_change(editor, sender)
  {
    classname = sender.options[sender.selectedIndex].value;

    window.frames[editor+'_rEdit'].focus();

    var el = SPAW_getParentTag(editor);
    if (el != null && el.tagName.toLowerCase() != 'body')
    {
      if (classname != 'default')
        el.className = classname;
      else
        el.removeAttribute('className');
    }
    else if (el.tagName.toLowerCase() == 'body')
    {
      if (classname != 'default')
        this[editor+'_rEdit'].document.body.innerHTML = '<P class="'+classname+'">'+this[editor+'_rEdit'].document.body.innerHTML+'</P>';
      else
        this[editor+'_rEdit'].document.body.innerHTML = '<P>'+this[editor+'_rEdit'].document.body.innerHTML+'</P>';
    }
    sender.selectedIndex = 0;

    SPAW_update_toolbar(editor, true);
  }

also das <p> kann man ja einfach durch <span> ersetzen. aber wie schaff ich es nur das markierte zu "taggen"? hast du da eine idee?
(".innerHTML" mit ".execCommand" ersetzen?)

oder ist das doch schwieriger als ich denke?
matze


ps
hier zum vergleich die function zum "bold"-tag.

Code: Alles auswählen

  function SPAW_bold_click(editor, sender)
  {
    window.frames[editor+'_rEdit'].focus();
    this[editor+'_rEdit'].document.execCommand('bold', false, null);
    SPAW_update_toolbar(editor, true);
  }

[emergence]

theoretisch müsste man demnach in der "script.js.php" nur folgende SPAW_style_change(editor, sender) umschreiben, oder?

korrekt, das ist die funktion die man ändern muss...

also das <p> kann man ja einfach durch <span> ersetzen.

eben nicht, das wird nicht funktionieren...
der teil mit <p> wird nur dann angewand wenn der übergeordnete tag body wäre...

aber wie schaff ich es nur das markierte zu "taggen"? hast du da eine idee?

ähm wie du den text bekommst siehst du in der function SPAW_isFoolTag zb mit:

Code: Alles auswählen

    var trange = this[editor+'_rEdit'].document.selection.createRange();
    var ttext;
    if (trange != null) ttext = SPAW_trim(trange.htmlText);

das würde ja funktionieren nur produziert die funktion SPAW_trim
ne endlosschleife... diese funktionen müsste man ebenso ersetzen...
der vorteil hiebei wäre wenn nichts selektiert ist bleibt ttext leer...

(".innerHTML" mit ".execCommand" ersetzen?)

das geht nicht, da innerHTML den kompletten text in textarea umfasst !

oder ist das doch schwieriger als ich denke?

ähm ja...

da mich das selbst intressiert hat, habe ich mir ein paar gedanken dazu gemacht...
1. zuerst braucht man eine möglichkeit herauszufinden ob überhaupt text markiert ist...
2. wenn keiner markiert ist ausführung wie bisher...
2.a wenn ein style gewählt wurde dieses setzen
2.b wenn keines gewählt wurde entfernen, jedoch wenn das übergeordnete element span ist den tag mittels removeNode komplett entfernen...
3. wenn text markiert wurde diesen von spans umschließen und mit pasteHTML wieder einfügen...

beim punkt 3 gibts aber noch ne menge probleme...
was passiert wenn die markierte stelle bereits von spans umschlossen ist ?
etc. etc. etc.

das wäre ungefähr die vorgangsweise...

[emergence]

hab jetzt mal ein paar dinge geändert...

alles in spaw/class/script.js.php

Code: Alles auswählen

  // trim functions
  function SPAW_ltrim(txt)
  {
    var spacers = " \t\r\n";
    while (spacers.indexOf(txt.charAt(0)) != -1)
    {
      txt = txt.substr(1);
    }
    return(txt);
  }
  function SPAW_rtrim(txt)
  {
    var spacers = " \t\r\n";
    while (spacers.indexOf(txt.charAt(txt.length-1)) != -1)
    {
      txt = txt.substr(0,txt.length-1);
    }
    return(txt);
  }
  function SPAW_trim(txt)
  {
    return(SPAW_ltrim(SPAW_rtrim(txt)));
  }

ersetzen durch

Code: Alles auswählen

  // trim functions
  function SPAW_ltrim(txt)
  {
    //Match spaces at beginning of text and replace with a null string
    return txt.replace(/^\s+/,'');
  }
  function SPAW_rtrim(txt)
  {
    //Match spaces at end of text and replace with a null string
    return txt.replace(/\s+$/,'');
  }
  function SPAW_trim(txt)
  {
    //Remove spaces at beginning and end of text
    return(SPAW_ltrim(SPAW_rtrim(txt)));
  }

weiteres folgt...

[emergence]

also das ist jetzt etwas länger als die normale spaw 1.0.3 routine
mit leichten änderungen aus der 1.0.4 version

die änderungen für die trim functions werden benötigt...

Code: Alles auswählen

  function SPAW_style_change(editor, sender)
  {
    classname = sender.options[sender.selectedIndex].value;

    window.frames[editor+'_rEdit'].focus();

    // v2.1 modified version by horwath@opensa.org
    var ttext = "";
    var trange = this[editor+'_rEdit'].document.selection.createRange();

    if (trange != null && this[editor+'_rEdit'].document.selection.type != "Control")
      ttext = SPAW_trim(trange.htmlText);

    var el = SPAW_getParentTag(editor);

    if (ttext == "") { // if no range was selected

      if (el != null && el.tagName.toLowerCase() != 'body')
      {
        if (classname != 'default' && classname != "")
          el.className = classname;
        else
          if (el.tagName.toLowerCase() != 'span')
            el.removeAttribute('className');
          else
            el.removeNode(); // remove span tag
      }
      else if (el.tagName.toLowerCase() == 'body')
      {
        if (classname != 'default' && classname != "")
          this[editor+'_rEdit'].document.body.innerHTML = '<p class="'+classname+'">'+this[editor+'_rEdit'].document.body.innerHTML+'</p>';
        else
          this[editor+'_rEdit'].document.body.innerHTML = '<p>'+this[editor+'_rEdit'].document.body.innerHTML+'</p>';
      }
    } else { // if range was found

      var otext = ttext; // orginal html replacement string

      // remove spans from our ttext
      if (otext.match(/<span[^>]*>/i)) {
        ttext = otext.replace(/<span[^>]*>/i,'');
        ttext = ttext.replace(/<\/span>/i,'');
      }

      if (classname != 'default' && classname != "")
        ttext = '<span class="'+classname+'">'+ttext+'</span>';

      // replace orginal string with our span tag
      this[editor+'_rEdit'].document.body.innerHTML = this[editor+'_rEdit'].document.body.innerHTML.replace(otext,ttext);

    }
    sender.selectedIndex = 0;

    SPAW_update_toolbar(editor, true);
  }

die routine müsste ziemlich fehlerfrei sein...
es sind zwar noch einige schwachsinnigkeiten der orginal routine drinnen, aber was solls...

zur funktionsweise:
wenn kein text markiert ist funktioniert es wie bisher
ausnahme:
sollte ein style entfernt werden und das übergeordnete element ist span wird es entfernt.
ebenso wird das style entfernt wenn das value "" ist (bisher war dies nur bei default der fall)

die andere sache ist simpel...
wenn ein markierter bereich gefunden wird, werden aus diesem string alle span tags entfernt
anschließend wird beim string das eigene style mittels span hinzugefügt...
letzer schritt ist den orginal string mit dem neuen string zu ersetzen...

anmerkung: beim letzten schritt kann es zu problemen kommen wenn der orginalstring mehrfach vorkommt... halte ich aber für unwahrscheinlich...

tja und somit kann man nun im spaw spannen

mit bitte um feedback...

[matze]

zur funktionsweise:
wenn kein text markiert ist funktioniert es wie bisher
ausnahme:
sollte ein style entfernt werden und das übergeordnete element ist span wird es entfernt.
ebenso wird das style entfernt wenn das value "" ist (bisher war dies nur bei default der fall)

funktioniert tadellos!

die andere sache ist simpel...
wenn ein markierter bereich gefunden wird, werden aus diesem string alle span tags entfernt
anschließend wird beim string das eigene style mittels span hinzugefügt...
letzer schritt ist den orginal string mit dem neuen string zu ersetzen...

anmerkung: beim letzten schritt kann es zu problemen kommen wenn der orginalstring mehrfach vorkommt... halte ich aber für unwahrscheinlich...

funktioniert nicht ganz! (oder hab ich das falsch verstanden?)

wenn ich zum beispiel einen gegebenen text in folgender form habe ...

Code: Alles auswählen

<SPAN class=blau>überschrift blau</SPAN> text rot

... und den dann ändern möchte in ...

Code: Alles auswählen

<SPAN class=rot>überschrift blau text rot</SPAN>

... funktioniert es nur, wenn ich vorher das alte span-tag entferne und dann das neue setzte. überschreiben geht irgendwie nicht?
(auch wenn ich die span-area nur erweitern möchte, muss ich vorher immer das alte tag entfernen.)

tja und somit kann man nun im spaw spannen

mit bitte um feedback...

GENIAL!!!

matze

[emergence]

funktioniert nicht ganz! (oder hab ich das falsch verstanden?)

was funktioniert nicht ganz ?

auch wenn ich die span-area nur erweitern möchte, muss ich vorher immer das alte tag entfernen.

nein eigentlich nicht, man wählt ein anderes style aus dem dropdown aus und das sollte umgestellt werden... (der komplette textblock mit span muss nicht markiert sein)

sieh es dir nochmal genau durch, kann ja sein das noch weitere fehler enthalten sind...

[matze]

ok,
ich nehm alles zurück! es funktioniert prima!
mir ist nur gerade dein oben geschilderter fall passiert.
(man muss wirklich aufpassen, dass man keine strings markiert, die schon vorher auftauchen.)


und noch eine frage zu einem thema aus einem anderen thread.
um die komplette style-sheet-datei einzubinden, muss man das "client-root-verzeichnis" angeben. damit ist doch das verzechnis "cms" gemeint, oder?
jedenfalls funktioniert bei mir nur die anweisung "spaw-styles". "spaw-stylesheet-file" will nicht!?

m.

[emergence]

schau mal da...
http://www.contenido.de/forum/viewtopic ... stylesheet
und da
http://contenido.de/forum/viewtopic.php ... ht=wysiwyg

verschoben... und titel geändert...

tja liebe leute ich bräuchte mehr feedback...

[emergence]

ich hab jetzt nochmal etwas nachgebessert...
es wird versucht auch textpassagen die mehrfach vorkommen dezitiert zu ersetzen... das schlimmste was jetzt passieren könnte, wäre das manchmal kein style gesetzt wird... (warum weiss ich eigentlich nicht)

tipp: man sollte wenn man ein style setzt, das bestehende entfernen.
dann kann eigentlich fast nichts schief gehen...

Code: Alles auswählen

  function SPAW_style_change(editor, sender)
  {
    classname = sender.options[sender.selectedIndex].value;

    window.frames[editor+'_rEdit'].focus();

    // v2.2 modified version by horwath@opensa.org
    var ttext = "";
    var trange = this[editor+'_rEdit'].document.selection.createRange();

    if (trange != null && this[editor+'_rEdit'].document.selection.type != "Control")
      ttext = SPAW_trim(trange.htmlText);

    var el = SPAW_getParentTag(editor);

    if (ttext == "") { // if no range was selected

      if (el != null && el.tagName.toLowerCase() != 'body')
      {
        if (classname != 'default' && classname != "")
          el.className = classname;
        else
          if (el.tagName.toLowerCase() != 'span')
            el.removeAttribute('className');
          else
            el.removeNode(); // remove span tag
      }
      else if (el.tagName.toLowerCase() == 'body')
      {
        if (classname != 'default' && classname != "")
          this[editor+'_rEdit'].document.body.innerHTML = '<p class="'+classname+'">'+this[editor+'_rEdit'].document.body.innerHTML+'</p>';
        else
          this[editor+'_rEdit'].document.body.innerHTML = '<p>'+this[editor+'_rEdit'].document.body.innerHTML+'</p>';
      }
    } else { // if range was found

      var otext = ttext; // orginal html replacement string

      if (otext.match(/<span[^>]*>/i)) {
        // remove spans from our ttext
        ttext = ttext.replace(/<span[^>]*>/ig,'');
        ttext = ttext.replace(/<\/span>/ig,'');
      } else {
        // create a unique replacement string for our ttext
        // a single span for any multiple char is possible
        idstr = "556e697175657e537472696e67";
        trange.pasteHTML(idstr);
        otext = idstr;
      }

      if (classname != 'default' && classname != "")
        ttext = '<span class="'+classname+'">'+ttext+'</span>';

      // replace orginal string with our span tag
      this[editor+'_rEdit'].document.body.innerHTML = this[editor+'_rEdit'].document.body.innerHTML.replace(otext,ttext);

    }
    sender.selectedIndex = 0;

    SPAW_update_toolbar(editor, true);
  }

[emergence]

jetzt hab ich wirklich ne saubere lösung gefunden... (alle guten dinge sind 3)
die neue variante ersetzt wirklich genau den teil der markiert wurde...
meist sind die einfachsten ideen doch die besten...

Code: Alles auswählen

  function SPAW_style_change(editor, sender)
  {
    classname = sender.options[sender.selectedIndex].value;

    window.frames[editor+'_rEdit'].focus();

    // v2.3 modified version by horwath@opensa.org
    var ttext = "";
    var trange = this[editor+'_rEdit'].document.selection.createRange();

    if (trange != null && this[editor+'_rEdit'].document.selection.type != "Control")
      ttext = trange.htmlText;

    if (SPAW_trim(ttext) == "") { // if no range was selected

      var el = SPAW_getParentTag(editor);

      if (el != null && el.tagName.toLowerCase() != 'body')
      {
        if (classname != 'default' && classname != "")
          el.className = classname;
        else
          if (el.tagName.toLowerCase() != 'span')
            el.removeAttribute('className');
          else
            el.removeNode(); // remove span tag
      }
      else if (el.tagName.toLowerCase() == 'body')
      {
        if (classname != 'default' && classname != "")
          this[editor+'_rEdit'].document.body.innerHTML = '<p class="'+classname+'">'+this[editor+'_rEdit'].document.body.innerHTML+'</p>';
        else
          this[editor+'_rEdit'].document.body.innerHTML = '<p>'+this[editor+'_rEdit'].document.body.innerHTML+'</p>';
      }
    } else { // if range was found

      this[editor+'_rEdit'].document.selection.clear(); // remove selection
      var otext = "556e697175657e537472696e67";         // unique string
      trange.pasteHTML(otext);                          // insert placeholder
      ttext = ttext.replace(/<\/?span[^>]*>/gi,'');     // remove all spans from ttext

      if (classname != 'default' && classname != "")
        ttext = '<span class="'+classname+'">'+ttext+'</span>';

      // replace placeholder string with ttext
      this[editor+'_rEdit'].document.body.innerHTML = this[editor+'_rEdit'].document.body.innerHTML.replace(otext,ttext);

    }
    sender.selectedIndex = 0;

    SPAW_update_toolbar(editor, true);
  }