WYSIWYG Editor, fortgeschrittenes Stringbearbeiten

[Tim C.]

Einen wunderschönen guten Morgen!

Wie sich evtl. noch einige erinnern, habe ich für ein Projekt einen online WYSIWYG Editor entwickelt (entsprechenden, seitenlangen Thread sollte man, bei Interesse, per Suchfunktion gut finden ).

Nunja, eine Funktion dieses Editors besteht darin, eine neue Tabelle einzufügen. Dies geschieht, indem man zunächst via prompt aufgefordert wird, Zeilen, Spalten und Rahmendicke einzugeben. Daraufhin wird die Tabelle an das Ende der Seite eingefügt und kann dann verschoben werden.

An das Ende der Seite wird eingefügt, weil als Bearbeitungsfläche ein iFrame dient, welcher via iView.document.designMode = 'On'; als Eingabefeld missbraucht wird.
Nun stellt sich mir folgende Frage:

Ich kann ja auf dem gesamten Quellcode meines Eingabefensters via iView.document.body.innerHTML zugreifen, aber ist es möglich auch an einer bestimmten Stelle, an der sich mein Cursor gerade befindet etwas zu ändern ?

Die konkrete Situation sieht so aus, dass ich in Tabellenzellen wählen will, ob diese bei der vertikalen Ausrichtung des Inhalts valign=top,bottom oder center/middle sind. Standardmäßig stehen die nämlich auf center (oder war es middle?), was jedoch nicht immer sinnvoll ist.

Jetzt ist die Frage: Kann ich irgendwie eine Änderung in dem Quelltext machen, der meiner momentanen Markierung zugehörig ist, oder habe ich da etwas vor, was nicht möglich ist ?

 

[aquasonic]

Guten Morgen wünsch ich dir auch!

Ich kann Dir bei deinem Problem leider nicht helfen, ich kann Dir höchstens einen Tipp geben: Schau dir mal das Protopad an...Ist ein WYSIWYG welcher OpenSource zur Verfügung gestellt wird. Ich habe auch mal einen eigenen online-Editor gemacht, und ich habe den auch als Vorlage benutzt, damit kannst du fast alles

Ich hoffe ich konnte dir trotzdem ein bisschen helfen.

PS: Ich denke es ist alles möglich

 

[Tim C.]

Original geschrieben von aquasonic
Schau dir mal das Protopad an...Ist ein WYSIWYG welcher OpenSource zur Verfügung gestellt wird.

Danke für den Hinweis, habe es mir angeguckt, aber soweit ich das sehe basiert er auch auf den execCommands() die ich auch Online mit JavaScript nutze, nur halt offline. Außerdem ergibt sich bei diesem Editor das gleiche Problem in Bezug auf die vertical-align und es ist nichtmal ein Switch in den reinen HTML Modus vorgesehen, womit ich dort arbeiten könnte. Ansonsten nettes Teil und meiner Meinung nach überflüssig sowas lokal laufen zu lassen

PS: Ich denke es ist alles möglich

Das denke/hoffe ich ja auch, deshalb hatte ich auch hier gepostet

 

[aquasonic]

Ja ist überflüssig lokal, aber wir haben das in unser CMS eingebaut (also nur etwa mit einem drittel der Funktionen)...

 

[Sven Mintel]

Habe ich das dem sagenumwobenden Thread richtig entnommen, dass es nur im IE laufen muss?

 

[Fabian H]

<script type="text/javascript">
function setAllTDChildsCSSAttribute(a_oObject, a_sAttribute, a_sValue)
{
    for (i=0; i<a_oObject.childNodes.length; i++) {
        if (a_oObject.childNodes[i].tagName == "TD") {
            a_oObject.childNodes[i].style[a_sAttribute] = a_sValue;
        }
    }
    return true;
}

function setValign(a_sValign)
{
    window.document.getElementById("TextInput").focus();

    oSelection = window.document.selection.createRange();

    if (oSelection.htmlText != undefined) {
        if (oSelection.tagName == "TD") {
            oSelection.style['verticalAlign'] = a_sValign;
        } else if (oSelection.parentElement().tagName == "TD") {
            oSelection.parentElement().style['verticalAlign'] = a_sValign;
        } else if (oSelection.parentElement().tagName == "TR") {
            setAllTDChildsCSSAttribute(oSelection.parentElement(),
                                       "verticalAlign", a_sValign);
        } else {
            if (oSelection.parentElement().tagName) {
                sTagName = oSelection.parentElement().tagName;
            }
            if ((sTagName == "TABLE") || (sTagName == "TBODY")) {
                for (i=0; i<oSelection.parentElement().childNodes.length; i++) {
                    if (oSelection.parentElement().childNodes[i].tagName == "TR") {
                        setAllTDChildsCSSAttribute(oSelection.parentElement().childNodes[i],
                                                   "verticalAlign", a_sValign);
                    }
                }
            }
        }
    }
}
</script>

<div id="TextInput" style="width:500px;height:300px;" contentEditable>
    <table border="1" style="width:200px;height:200px;">
        <tr>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
            <td>foo</td>
        </tr>
        <tr>
            <td>bar</td>
            <td>bar</td>
            <td>bar</td>
            <td>bar</td>
        </tr>
    </table>
</div>
<br>
<br>
<input type="button" value="Top" onclick="setValign('top');">
 <input type="button" value="Middle" onclick="setValign('middle');">
 <input type="button" value="Bottom" onclick="setValign('bottom');">
<br>
<br>
<input type="button" value="Source"
       onclick="window.alert(window.document.getElementById('TextInput').innerHTML);">

Hat noch so einige Fehler, aber die kann man ja beheben, ist eigentlich immer
das gleiche Muster.

 

[Tim C.]

Hi Fabian danke schonmal für den Versuch zu helfen. Da ich durch den Code nur bedingt durchsteige und einfach zu wenig über den Aufbau von JavaScript weiss, habe ich das einfach mal eingefügt und TextInput durch den Namen meines I-Frames ersetzt.

Jetzt tritt das Problem auf, dass

undefined ist undefiniert

Ich denke mal das bezieht sich auf die Zeile
if (oSelection.htmlText != undefined) {
Dann habe ich probiert das undefined in Anführungszeichen zu setzen, dann kommt zwar kein JS-Fehler mehr, aber ändern tut sich an den Tabellen auch nichts.

Würde es dir evtl. etwas ausmachen, kurz zu erläutern, was welche Passagen im Code machen, welche Methoden/Klassen/Member-Variablen (?) dieser Pseudoklassen, per default da sind, und welche du dir evtl. selbst erstellt hast ?

 

[Ossi]

Ich hätte auch mal eine Frage zum Tabelle einfügen:

Ich habe die Funktion bei meinem Editor auch einge(kl)baut, sie läuft auch ganz gut, nur, bis auf einen Editor (den ich aber leider nicht mehr finde) verändern sich die Tabellenspalten, wenn man Text im WYSIWYG-Modus in die Tabelle eingibt. Kann man die Tabellenspalten irgendwie fixieren, damit sie die Breiten und Höhen behalten ?