[js] html syntax highlight voor wysiwyg editor

[Verwijderd]

Ik ben op zoek naar een scriptje of oplossing die mijn online html editor kan voorzien van html syntax highlighting. Na verschillende zoektochten heb ik helaas niet kunnen vinden waar ik naar op zoek ben.

Is er iemand die zoiets al wel eens heeft gebruikt of gezien ??

[Thijsmans]

Nee, ik heb het nog nooit gezien Je zou het echter zelf kunnen maken:

• Als er op de spatie wordt gedrukt (keyCode afvangen), trigger je een functie die
  • Alle content (innerText) ophakt in stukken zonder de spaties (split(' '))
  • Uitzoekt welke tag er is geopend, en hieraan een kleur hangt (form bijv. oranje, table groen)
  • Alle values tussen quotes (value="woei") een andere kleur geeft
• De boel weer terugzet

Lijkt me best lastig om alles werkende te krijgen, maar het resultaat mag er dan ook zijn

[Clay]

je zou kunnen beginnen met een statische versie is wellicht iets makkelijker. Schakel je om naar source mode >> highlighten. typ je wat, dan gaat het "fout", maarja, daar kan je weer een knop voor maken oid. Je bent dan ook met een wysiwyg editor bezig, en dan lijkt codekloppen me niet de hoofdprio hebben.
Qua aanpak zou ik gewoon html fragmenten oppakken met regexp. van < tot > en dan alles ertussen highlighten.

[Verwijderd]

Je titel "html syntax highlight voor wysiwyg editor" is een contradictie. In een wysiwyg editor kun je geen syntax-highlighting hebben omdat je dan net de syntax voor de gebruiker verbergt en de gebruiker in het 'eindresultaat' laat editten...

Als je een html-editor aan het bouwen bent dan wens ik je veel succes. Het syntax-highlighten van correcte html is niet zo moeilijk, dat is met reguliere expressies en wat parsing wel op te lossen, alleen highlighting tijdens het typen van de gebruiker, zonder zijn cursorpositie te vernaggellen en het ook nog op acceptabele snelheid te houden is vrij moeilijk. Het is mij (nog) niet gelukt.

Als je target-audience toevallig IE6 met dot.net framework heeft dan zou je een winforms dot.net applicatie kunnen embedden en gewoon een kant en klare dot.net editor kunnen kopen.

[Verwijderd]

Er bestaat zoiets als:
http://helene.muze.nl/demo/
Deze heeft alleen geen html syntax highlighting (tenminste niet in de demo)

[Michali]

Een gebruiker hier op het forum heeft zoiets erg mooi in elkaar geknutseld. Ik dacht dat hij onder de nick Jorgen hier rondzwerft. Hij heeft een demo waarnaar hij linkt in zijn signature.

Dit is em: http://www.jorgenhorstink.nl/development/

Mischien kun je hem er eens een vraagje over stellen?

[Verwijderd]

Deze code doet wat je wilt. Bij een enter zou je de tekst van je document weer kunnen herparsen .

Java voor syntaxhighlighting, 't is natuurlijk JavaScript.

Java:

// Eerst alle tags parsen en rood maken
defaultTag = /(<([\s\S]*?)>)/gi;
code = code.replace(defaultTag, "<font color='#FF0000'>$1</font>");

// Bepaalde elementen nog een aparte kleur geven...
var aItems = [['style','#00FF00'], ['script','#00FF00']];
for (var i = 0; i < aItems.length; i++) {
  var sTag = aItems[i][0];
  var re = new RegExp("(&lt;(" + sTag + "|\/" + sTag + ")(.*?)&gt;)", "gi");
  code = code.replace(re, "<font color=" + aItems[i][1] + ">$1</font>");
}
// attributen blauw maken
var reAttr = new RegExp("(=((\"|&quot;)(.*?)(\"|&quot;))( |\/|&gt;))", "gi");
code = code.replace(reAttr, "=<font color='#0000FF'>$2</font>$6");

[ Voor 46% gewijzigd door Verwijderd op 03-01-2005 19:26 ]

[Woudloper]

@ Quist: maar je gebruikt helaas wel de font-tag hiervoor...

[Verwijderd]

Uhmmm, het gaat gebruikt worden in een WYSIWYG editor waarbij de HTML van het edit venster toch nooit bekeken wordt. Zullen we daarom semantiek buiten beschouwing laten?

Als je liever hebt dat ik van font, span maak, dan wil ik dat wel voor je doen hoor

[ Voor 21% gewijzigd door Verwijderd op 03-01-2005 19:32 ]