Syntax Highlighting Online Editor - javarea.de Forum powered by javarea.de

Archivlink: javarea.de Forum > JavaScript > Syntax Highlighting Online Editor

Vollständigen Link anzeigen: javarea.de Forum > JavaScript > Syntax Highlighting Online Editor

Pages: [1]

geschrieben von Danny am 03.03.2006 - 16:39

Hallo Javarea Gemeinde,
bin nun seit einiger Zeit auf der Suche nach einem Online Syntax Highlighter, sprich einem Textfeld welches beim eingeben bestimmte Wörter farbig/fett schreibt.
Meine Internetsuche ergab eigentlich nur den Editor Helene ( http://helene.muze.nl/ ), leider scheint der (noch) etwas buggy zu sein und About:Edit ( http://demo.aboutedit.com/ ), was aber erstens für meine Zwecke zu teuer ist und vollkommen überladen,da ich nur die Syntax Highlightsache benötige...

Was ich mir auch noch überlegt habe:

1. designMode Iframe

	HTML-Quelltext
1:	feld.document.designMode = 'On';

bzw. für den Mozilla

	HTML-Quelltext
1:	document.getElementById('feld').contentWindow.document.designMode = "on";

lassen sich beispielsweise IFrames in einen editierbaren Modus schalten (Wysiwyg Editor), das Problem was sich auftut ist das zumindest Mozilla Browser, IE weis ich jetzt nicht genau, kein Eventhandling mehr für den Frame zulassen, sprich ich kann nicht mehr abfragen ob eine Taste gedrückt wurde.
Ich hab mir auch überlegt, das über einen Counter zu regeln der jede 2 Sekunden (vollkommen ausreichend) die Syntax Highlight Funktion aufruft. Das funktioniert auch soweit nur das er den Cursor anschließend an den Anfang des Textes setzt. Nach meinen Internetrecheren darüber, kam auch nur heraus das es nicht möglich sei den Cursor in einem designMode IFrame zu "manipulieren"..

2. contenteditable <div>
Der IE kann ja auch ein <div> editierbar machen, nur halt leider der Mozilla nicht, deshalb fällt das weg..

3. Textarea mit <div>
Meide dritte Überlegung war es nun ein <div> über eine Textbox zu legen:

HTML-Quelltext

1: 
2: 
3: 
4:

<div>
<textarea name="Input" id="Input" style="font-family:verdana;font-size:10px;color:white;position:absolute;left:50px;top:50px;border:1px black solid;width:600px;height:300px;overflow:auto" onkeyup="SyntaxHighlite();" onchange="SyntaxHighlite();" rows="20" cols="50"></textarea>
</div>
 <div id="Output" style="font-family:verdana;font-size:10px;position:absolute;left:50px;top:50px;border:1px #0000FF solid;width:600px;height:300px" onclick="PositionCursor()"> </div>

HTML-Quelltext

1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 
19: 
20: 
21: 
22: 
23: 
24: 
25: 
26: 
27: 
28:

function SyntaxHighlite()
 {	
     var CodeN = ''; 
     var Code = document.getElementById('Input').value;      
     var taRows = Code.split("\n");
     
     for(var z=0;z<taRows.length;z++)
	  {
	      var LO = taRows[z].split(" "); 
	       
	      for(var i=0;i< LO.length;i++) 
	      { 
	           if (ArraySearch(LO[i])) 
	           { 
	                LO[i] = '<span style="font-weight:bold;color:#004080">'+ LO[i] +'</span>'; 
	           } 
	           else 
	           {  
	           		LO[i] = '<span style="font-weight:normal;color:#000000">'+ LO[i] +'</span>'; 
	           } 
	           CodeN = CodeN + ' ' + LO[i]; 
	      }
	  	  CodeN += '<br />'; 
	  } 

      document.getElementById('Output').innerHTML = CodeN;
     
 }

funktioniert auch nicht schlecht NUR

http://www.team-jena-attax.de/upload/syntaxh.jpg

Wie man sieht kommt dadurch das der Text im div teilweise fett ist eine Verschiebung zustande, sprich der Cursor hängt ein Stück nach, desweiteren kann man den Text nichtmehr markieren und löschen..

------------------------------

Was ich nun suche:
Eine Möglichkeit Text online einzugeben, welcher gleichzeitig mit der Eingabe farbig markiert wird (bestimmte Wörter)...

Desweiteren sollte es FF / IE kompatibel und wenn möglich auch weitere Konsorten (NN,OP,etc..)

Wenn ihr mir helfen könntet wäre ich euch sehr verbunden...

Danny

geschrieben von okley am 05.03.2006 - 16:06

Möglich wäre z.B. , dass du deine Hervorhebung nicht zusätzlich mit font-weight machst ;). Dann verschiebt sich der Cursor zumindest nicht. Das Problem mit dem Selektieren bleibt aber. Auch gab es bei mir Probleme wenn ich mehr Text einfügte als ohne scrollbars in der textarea platz haben.

Leider kann ich dir keinen konstruktieveren Ansatz geben ... Aber wieso nimmst du keinen vorhandenen Editor (z.B. FCKEdit) auseinander und schaust wie die dieses Problem lösen?

geschrieben von weisnix am 05.03.2006 - 16:17

Nur mal so ein Gedanke, wenn du eine Systemschrift nimmst.

Wie z.B. Courier, da müsste sich der Cursor doch dann an die richtige Stelle setzen.