Im HTML-Editor wird standardmäßig immer <p> </p> angezeigt, wenn Sie die Eingabetaste drücken. Natürlich kann durch Drücken der Umschalttaste + Eingabetaste direkt <br> hinzugefügt werden, und viele Leute hoffen, dass das Drücken der Eingabetaste dazu führt, dass <br> umbrochen wird statt Teil zu brechen.
Die Leute haben mir diese Frage gestellt, aber ohne einen Codetest zu schreiben, dachte ich, ich könnte sie beurteilen und lösen, indem ich event.keyCode==13 in onkeydown bewerte. Aber später stellte ich fest, dass niemand in der Lage zu sein schien, sie erfolgreich zu lösen mit dieser Methode. Tut mir leid! Aus diesem Grund habe ich nach sorgfältiger Untersuchung festgestellt, dass es zwei Lösungen gibt, von denen jedoch keine perfekt ist, aber grundsätzlich die Anforderungen erfüllen kann:
1. Fügen Sie beim Initialisieren des Editorinhalts „<div></div>“ hinzu.
Wenn Sie auf diese Weise die Eingabetaste drücken, generiert der Editor direkt „<div></div>“ anstelle von <p></p>, und Sie können einfach die Zeile anstelle des Absatzes umbrechen, wie unten gezeigt:
| Nachfolgend der zitierte Inhalt: <SCRIPT LANGUAGE="javascript"><!--function initeditor(){ var L_DEFAULTHTML_TEXT="<DIV></DIV>"; var sz="" sz+="<BODY ONCONTEXTMENU="return false">" +L_DEFAULTHTML_TEXT+"</BODY>" idEditbox.document.designMode="on"//Bearbeitungsmodus öffnen idEditbox.document.write(sz) //Der folgende Code dient nur zur Unterstützung beim Anzeigen des Editor-Quellcodes idEditbox.document.attachEvent ( " onkeyup" , readsource ); idEditbox.document.attachEvent( "onkeydown" , readsource );}//Sehen Sie sich den Quellcode an. function readsource(){ document.all.source.value=idEditbox.document.body.innerHTML; }//- -></SCRIPT><BODY ><iframe width="500" height="400" id="idEditbox"></iframe><BR><INPUT TYPE="button" value="Quelle anzeigen code" >< BR><TEXTAREA NAME="source" ROWS="20" COLS="60"></TEXTAREA></BODY> |
unzureichend:
Ein Fehler bei dieser Methode besteht darin, dass Sie nach dem Hinzufügen von Inhalten im Editor alle Inhalte auswählen (Strg+A) und dann den gesamten Inhalt löschen (dadurch wird auch <div></div> gelöscht), den Inhalt erneut eingeben und die Eingabetaste drücken . Wird weiterhin <p></p> produzieren
2. Verarbeiten Sie es direkt in onkeypress
Wir können direkt in onkeypress herauskommen, aber bei der Beurteilung von event.keyCode == 13, also beim Drücken der Eingabetaste, fügen wir das Tag <br> direkt ein, sodass auf jeden Fall kein Problem auftritt. Hier ist ein Codebeispiel:
| Nachfolgend der zitierte Inhalt: <SCRIPT LANGUAGE="javascript"><!--function initeditor(){ var sz="" sz+="<BODY ONCONTEXTMENU="return false"></BODY>" idEditbox.document.designMode="on" idEditbox.document.write(sz) idEditbox.document.onkeypress=fnKeypress}function fnKeypress(){ //Hinweis: Diese Funktion funktioniert nicht, wenn der Fokus nicht im Editor liegt; var ev = idEditbox.event; keyCode==13){ insertHTML("<br><!-- -->"); //Ich weiß nicht, ob es ein Problem mit meinem Browser oder etwas anderem ist. Es wird nur das <br>-Tag eingefügt Der Cursor wird nicht umbrochen. Sie müssen andere Tags anhängen, Sie können ihn am Ende löschen. return false;//Auf diese Weise entspricht der Wagenrücklauf einem ungültigen Tag und das lästige <p>-Tag wird nicht hinzugefügt.}} //HTML-Funktion an der Cursorposition einfügen insertHTML(html){var sel = idEditbox.document.selection;if (sel!=null) { var rng = sel.createRange(); if (rng!=null) rng.pasteHTML (html);}}//Codefunktion anzeigen readsource(){ document.all.source. value=idEditbox.document.body.innerHTML;}//--></SCRIPT><BODY ><iframe width="500 " height="400" id="idEditbox"></iframe><BR><INPUT TYPE="button" value="Quellcode anzeigen" ><BR><TEXTAREA NAME="source" ROWS="20" COLS ="60"></TEXTAREA></BODY> |
unzureichend:
1).insertHTML("<br><!-- -->"); generiert Müllcode "<!-- -->";
2) Um sicherzustellen, dass der Fokus im Editor liegen muss, um auf das Onkeypress-Ereignis des Editors zu reagieren, bietet dieses Beispielprogramm aus Zeitgründen keine Verarbeitungsmethode, wenn der Fokus nicht im Editor liegt.