29. März 201015 j Hi, ich versuche mich grade an einem einfachen Syntaxhighlighter für sql. für das highlighting benutze ich ein div element, in dem der text per javascript und regex farblich formatiert wird, was auch soweit funktioniert eingaben in das div element mache ich per tastatur eventhandler, aber ich habe keine idee wie ich da einen curser einbaue der im text anzeigt, wo man grade schreibt oder einfügt, bzw mit dem man per pfeiltasten im text navigieren kann (der kleine blinkende strich den es in so gut wie jedem texteditor gibt). meine ideen waren bisher, das man nen 2 px breites bild oder nen | (alt gr + '<') nimmt, aber bei dem bild ka wie ichs positionieren soll und der strich verändert die zeilenlänge um ein zeichen und verursacht so nervige effekte bei automatischen zeilenumbrüchen ich habe es auch schon mit dem attribut contenteditable (oder so ähnlich) versucht, allerdings wird da der text schon von vornherein mit <p> tags formatiert und im firefox funktioniert es auch nicht sonderlich gut. hat da jemand eine idee, wie ich den cursor realisieren kann? bitte keine fertigen syntaxhighlighter, da es bei meinem versuch einen zu basteln nicht um praktischen nutzen, sondern nur um den lerneffekt geht...
29. März 201015 j weil man da nur den ganzen inhalt der textarea formatieren kann, und nicht nur einzelne wörter (wie beim Syntaxhighlighting benötigt) ... oder geht das doch irgendwie?
29. März 201015 j CodePress - Real Time Syntax Highlighting Editor written in JavaScript tut genau das und einiges mehr (auto-complete, ..) is zwar knapp 2 jahre her, aber ich glaube das ließ sich sogar recht leicht benutzen und anpassen. wobei ich grad seh, das die zwar an ne textarea binden aber die darstellung dann in html passiert ^^ Bearbeitet 29. März 201015 j von _n4p_
29. März 201015 j deswegen: bitte keine fertigen syntaxhighlighter, da es bei meinem versuch einen zu basteln nicht um praktischen nutzen, sondern nur um den lerneffekt geht... ... und weil ich da noch nen paar andere sachen als syntaxhighlighter mit ausprobieren wollte Bearbeitet 29. März 201015 j von Callam
29. März 201015 j das war auch nur n hinweis, nicht die aufforderung den zu benutzen. aber man kann sich doch mal umsehen wie andere sowas machen.
30. März 201015 j Guck Dir mal TinyMCE an, ist OpenSource ... da kannst Du ja gucken, wie die's mit WYSIWYG gemacht haben und Highlighting wäre ja von da aus kein Problem mehr
31. März 201015 j ein bisschen weiter gekommen bin ich durch die beispiele, aber ich hab immer noch n paar kleine probleme... Mein Quellcode: <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1250"> <meta name="generator" content="PSPad editor, www.pspad.com"> <style> body { text-align:right; } p { margin:0px; } </style> <script src="prototype.js" type="text/javascript" language="Javascript"></script> <title></title> <script> var dingens = new PeriodicalExecuter(function(evt) { //Highlighting zurücksetzen if(document.body.innerText.length >0) { var range = document.selection.createRange(); range.moveStart("character", -10000000000000000); range.moveEnd ("character", -10000000000000000); range.moveStart('character',0); range.moveEnd('character',document.body.innerText.length); range.execCommand("ForeColor",false,"#000000"); } //sonst Verschiebung d. Highlighting durch Zeilenumbrüche var txt = document.body.innerText.replace(/\n/g,""); //Start u. Endposition d. Hervorhebung var rStart = txt.search(/\'(.*?)(\')/); var rEnd = txt.match(/\'(.*?)(\')/); rEnd = rEnd ? rEnd[0].length : false; //Hervorheben if(rEnd&&rStart) { var range = document.selection.createRange(); range.moveStart("character", -10000000000000000); range.moveEnd ("character", -10000000000000000); range.moveEnd("character",rEnd); range.moveStart("character", -10000000000000000); range.moveEnd ("character", -10000000000000000); range.moveStart("character",rStart); range.moveEnd("character",rEnd); range. var test = range.htmlText.match(/<\/P>/g); range.execCommand("ForeColor",false,"#FF0033"); } }, 5); //wenn fertig 1, jetzt 5 damit Testausgaben mit alert nicht nerven </script> </head> <body contenteditable="true" id="body" valign="right" oncontextmenu="alert(document.body.innerHTML);alert(document.body.innerText);return false;"> </body> </html> zum testen hab ich jetzt mal alles in eine datei gepackt, javascript und css kommen später natürlich in eigene dateien. mein problem ist nun an der stelle: var rStart = txt.search(/\'(.*?)(\')/); var rEnd = txt.match(/\'(.*?)(\')/); rEnd = rEnd ? rEnd[0].length : false; so bekomm ich leider nur den ersten treffer. versucht habe ich es, in dem ich alle treffer von txt.match(/\'(.*?)(\')/); durchgegangen bin, und dann wollte ich mit range.findText (hatt ich gestern irgendwo gefunden) die treffer markieren und dann mit range.execCommand("ForeColor",false,"#FF0033"); färben, hat aber nicht funktioniert... das ganze soll vor allem im ie6+ laufen, von der idee, das auch für andere browser zu machen habe ich mich vererst mal verabschiedet, da mir der aufwand für ein "nur mal schauen ob ichs hinbekomm" zu groß wäre
Archiv
Dieses Thema wurde archiviert und kann nicht mehr beantwortet werden.