Ich habe zwei einfache Textareas, in denen ich den JavaScript-Code hervorheben möchte, der gerade geschrieben wird. Sobald der Benutzer die Funktion in den Textbereich eingibt, müssen die Schlüsselwörter usw. in einer anderen Farbe angezeigt werden.
Ich habe versucht, dieses Skript zu hacken. Aber konnte nicht bekommen, was ich wollte.
Ich war schon immer daran interessiert, textarea -Elemente mit zusätzlichen Funktionen wie Code-Hervorhebung zu haben, während sie immer noch als einfache bearbeitbare Textareas übrig bleiben. Ich habe ein bisschen hier experimentiert: Ссылка
Es ist alles andere als optimal und ziemlich fehlerhaft, aber dennoch ... Es erlaubt die Hervorhebung von Text mit willkürlichen Regeln. Ich hatte eine funktionierende Version, die es erlaubte, die Textfarbe zu ändern (und nicht nur den Hintergrund), aber es hatte einige Probleme.
Im Grunde genommen füge ich eine div -Überlagerung mit genau dem gleichen Inhalt und Schriftstil wie der Textbereich hinzu, aber mit transparenten Schriftarten. Der Text im Inneren enthält span Elemente, die bestimmte Wörter und Sätze umhüllen, die spezielle Hintergründe, Ränder usw. haben können.
Um verschiedene Schriftfarben zu ermöglichen, habe ich versucht, den textarea -Text transparent zu machen, während das Overlay div text angezeigt wird. Das Hauptproblem dort war, dass der Cursor auch transparent wurde.
Ich würde sagen, dass die Verwendung von div mit editierbaren Inhalten eine viel bessere Option ist.
Sie könnten Ace ( Demo ) und CodeMirror ( demo ).
Ich nehme Textarea, das Syntax-Highlighting im laufenden Betrieb tun kann ? und Fragen zum Online-Code-Editor werden auch für Sie nützlich sein.
Ich denke, dass Sie ein div- oder section-Tag mit editierbarem Attribut verwenden können. Innerhalb dieses Bereichs oder Abschnitts können Sie ein zusätzliches Markup für Higlight-Funktionen, Vars usw. verwenden. Dieses Attribut funktioniert jedoch nur in neuen Browsern, die HTML5-Attribut-Inhalt bearbeiten. Hier ist eine Demo
Wenn Sie einen einfachen js highligter brauchen, kann dieser Ссылка für Ihre Aufgabe nützlich sein
Da ein Textbereich kein Markup enthalten kann, kann die Hervorhebung nicht per se erfolgen. Der Ansatz, den ich für eine Inline-Rechtschreibprüfung verwendete, bestand darin, Divs für Wörter zu überlagern, die falsch geschrieben wurden. Dies war möglich, weil es möglich war, die x- und y-Position von Wörtern innerhalb des Textes zu finden.
Es ist jedoch möglicherweise vorzuziehen, die Textfläche mit einem editierbaren div-Inhalt zu überlagern, mit dem Sie Inhalt in Spannen usw. umbrechen und dann das Styling anwenden können.
Tags und Links javascript html