Hallo,

Ich bastle im moment einen Editor zusammen der mir bei meiner Arbeit etwas erleichern soll. Mein derzeiter Editor besteht mehr oder weniger aus PHP was natürlich einiges einschränkt. Ich wollte zudem eine Echtzeitvorschau bieten. Somit sieht man direkt wie gross der Text in wirklichkeit ist und nicht wie bis anhin nur Code ;)

Ja, sowas dachte ich mir, deshalb die Frage. Das wird aber, so wie Du das machen willst, meiner Meinung nach nicht gut gelingen. Mit JavaScript Rich-Text Editing haben sich schon erfahrene Programmierer beschäftigt und dabei viele mögliche Probleme bereits erkannt und berücksichtigt. Das muss man nicht alles neu erfinden.

Schau Dir mal folgende Lösungen an:
http://jquery-plugins.net/tag/rich-text-editor

Leider ist mir aufgefallen wen ich die Tags über diese Funktion integriere, gibt der mir im Div Container als bsp. <px7>Makiert</px7> aus.

Ja, es wird ja auch textContent erzeugt, keine Elemente.

In meiner alten Funktion sind die Tag's in der anzeige Box direkt verschwunden und der Text wurde grösser.
Die CSS-Style angaben sind natürlich gesetzt und funktioniert eig auch einwandfrei.

Ja, weil Du dort das innerHTML neu aufgebaut hattest. Wobei es in HTML aber kein PX7-Element gibt. Ganz sauber ist das also nicht und damit ist nicht sichergestellt, dass es immer funktioniert. Und an das innerHTML des Range.startContainer kommt man nicht direkt ran.

Hättest du hierzu eine Idee?

Nein, keine umfassende und praktisch einsetzbare. Da haben sich, wie gesagt, schon erfahrenere Programmierer intensiv mit beschäftigt und praxistaugliche Lösungen gefunden, die man nur nutzen muss.

Man kann natürlich PX7-Elemente erzeugen und einhängen. Das geht sogar relativ simpel. Die Links zur MDN-Doku hatte ich ja bereits gepostet.

  
<div id="newest" contenteditable="true">  
Hallo wie geht es?  
Danke mir gehts super!  
</div>  
  
<input type="button" id="button" value="do">  
  
<pre id="monitor"></pre>  
  
<script>  
  
[code lang=javascript]document.getElementById("button").onclick = function(e) {  
  
 var sel = window.getSelection();  
  
 var ersteSelRange = sel.getRangeAt(0);  
  
 var XMLElementPX7 = document.createElement("px7");  
  
 try {  
  ersteSelRange.surroundContents(XMLElementPX7);  
 } catch(error) {  
  alert(error);  
 }  
  
 var newestTextContent = document.createTextNode(document.getElementById("newest").innerHTML);  
 document.getElementById("monitor").innerHTML = "";  
 document.getElementById("monitor").appendChild(newestTextContent);  
  
};  

</script>
[/code]
aber das geht nur solange gut, bis man die Verschachtelungsregeln verletzt. Das müsste man dann programmtechnisch abfangen. usw. usw. bis man dann irgendwann einen kompletten Editor neu progammiert hat, den es sogar *besser* schon lange gibt.

viele Grüße

Axel