Stefan Richter: Richtext Editor (Abfrage der Formatierung)

SELF-Forum

Richtext Editor (Abfrage der Formatierung)

Stefan Richter
– Informationen zu den Bewertungsregeln

Hallo.

Es gibt doch diese schönen Richtext Editoren im Internet, wo man direkt über den Browser, wie z.B. in Word, Texte bearbeiten und formatieren kann.

Habe mir jetzt mal einen Editor selbst zusammengebaut, welcher einfache Funktionen wie Fett, Kursiv, Unterstreichen etc. kann.

Nun meine Frage:

Bei einigen Editoren die im Web (auch kostenlos) erhältlich sind, gibt es ja die Funktion, dass wenn man sich über einem Wort befindet, welches formatiert ist, dass in der Toolbar diese Formatierungen als aktiviert angezeigt werden.
Bspw.: Ich befinde mich über einem Wort welches fett formatiert ist, so möchte ich diesen Status abfragen und das "B" Element in der Toolbar als aktiviert anzeigen lassen.

Leider habe ich noch nicht herausgefunden wie man den Status der Formatierungen abfragen kann.

Vielleicht könnt ihr mir da weiterhelfen... habe auch schon gegooglet, leider noch nichts gefunden.

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Richtext Editor (Abfrage der Formatierung)

    Felix Riesterer Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Lieber Stefan,

    Habe mir jetzt mal einen Editor selbst zusammengebaut, welcher einfache Funktionen wie Fett, Kursiv, Unterstreichen etc. kann.

    das ist sehr ehrenwert, dabei lernt man eine unheimliche Menge. Vor einem ähnlichen Projekt stand ich einst auch einmal.

    Bei einigen Editoren die im Web (auch kostenlos) erhältlich sind, gibt es ja die Funktion, dass wenn man sich über einem Wort befindet, welches formatiert ist, dass in der Toolbar diese Formatierungen als aktiviert angezeigt werden.
    [...]
    Leider habe ich noch nicht herausgefunden wie man den Status der Formatierungen abfragen kann.

    Dazu bräuchtest Du eine Funktion, die von einem Eventhandler (oder von einigen dieser "Sinne eines Browsers") aufgerufen wird. Je nach onkeyup oder mousedown/mouseup könnte diese Funktion das Element unter dem Cursor oder unter der Selection finden.

    Du wirst Dich wohl oder übel mit der Angelegenheit von Selections und (Text-)Ranges befassen müssen, wenn Du das selbst programmieren möchtest. Leider haben Dir da die Entwickler der verschiedenen Browser ihre jeweils eigenen Ideen als Steine in den Weg gelegt, die Du nun schön aufsammeln und berücksichtigen darfst. Im Sinne eines Lehrstücks sicherlich spannend. Wenn Du aber einen Richtext-Editor _haben_ möchtest, dann rate ich Dir lieber zu einem bereits fertigen Produkt. Mein Favorit: TinyMCE, da man ihn so unglaublich vielfältig konfigurieren und erweitern kann.

    Liebe Grüße aus Ellwangen,

    Felix Riesterer.

    --
    ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Richtext Editor (Abfrage der Formatierung)

      Stefan Richter
      – Informationen zu den Bewertungsregeln

      Hallo,

      danke erstmal für deine Antwort...

      Habe auch eine Kleinigkeit dazu gefunden. Und zwar gibt es das Attribut queryCommandValue(...), mit welchem man zwischen Start- und Endposition die Formatierung herausbekommen kann.

      Ein Problem dabei habe ich aber leider noch. Da das Eingabefeld ja ein IFrame ist, kann ich ja schlecht ein event wie onclick oder onkeyup darauf legen... hast du vielleicht da eine Lösung?

      Also wie gesagt mittels
      var formatstring = document.frame.queryCommandValue(...) scheint es zu funktionieren.. aber wie am besten abfragen?

      Grüße

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Richtext Editor (Abfrage der Formatierung)

        Axel Richter
        – Informationen zu den Bewertungsregeln

        Hallo,

        Also wie gesagt mittels
        var formatstring = document.frame.queryCommandValue(...) scheint es zu funktionieren..

        Naja, frame.queryCommandValue gibt es nicht. Das ist eine Methode des document. Für einiges brauchst Du auch noch queryCommandState.

        aber wie am besten abfragen?

        Schreib einen eigenen Thread, der die queryCommandValue und queryCommandState des Documents überwacht. In JavaScript nicht so ohne, weil nur als immer wieder startende Funktion implementierbar.

        Beispiel:

          
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
        "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<title>IFrame im Designmode f&uuml;r IE und Mozilla</title>  
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">  
<script type="text/javascript">  
<!--  
function watchFormats() {  
 var editorDoc = document.getElementById('editor').contentWindow.document;  
 var format = "";  
 format += editorDoc.queryCommandValue('fontname') + " ";  
 format += editorDoc.queryCommandValue('fontsize') + " ";  
 if (editorDoc.queryCommandState('bold')) format += "bold ";  
 if (editorDoc.queryCommandState('italic')) format += "italic ";  
 if (editorDoc.queryCommandState('underline')) format += "underline ";  
 document.getElementById('tf').value = format;  
}  
  
window.onload = function() {  
  var editorDoc = document.getElementById('editor').contentWindow.document;  
  editorDoc.designMode="on";  
  
  editorDoc.execCommand('fontname', false, 'Times New Roman');  
  editorDoc.execCommand('fontsize', false, '12');  
  window.setInterval("watchFormats()", 100);  
};  
//-->  
</script>  
</head>  
  
<body>  
  
<h1>Demonstration der Nutzung eines IFrames als Editor-Element</h1>  
  
<p><button onclick="document.getElementById('editor').contentWindow.document.execCommand('bold', false, null)">Fett</button>  
<button onclick="document.getElementById('editor').contentWindow.document.execCommand('italic', false, null)">Kursiv</button>  
<button onclick="document.getElementById('editor').contentWindow.document.execCommand('underline', false, null)">Unterstrichen</button></p>  
  
<p><label>aktuelles Format </label><input type="text" id="tf" value="" size="50" maxlength="50"></p>  
  
<p>Hier Text eingeben:</p>  
  
<iframe id="editor" width="400" height="100"></iframe>  
  
<p><textarea rows="5" cols="50" id="ta"></textarea></p>  
  
<button onclick="document.getElementById('ta').value=document.getElementById('editor').contentWindow.document.getElementsByTagName('html')[0].innerHTML;">Zeige Quelltext</button>  
</body>  
</html>

        viele Grüße

        Axel

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln