Syntax Highlighter Codepress dynamisch einbinden

[Flupdiwup]

Hallo Wissende,

ich möchte den Syntax Highlighter "codepress" dynamisch mit Javascript aufrufen. http://sourceforge.net/projects/codepress

Mit Codepress lässt sich der Quellcode diverser Beschreibungs- und Scriptsprachen in einem textarea Element über einem iFrame formatiert darstellen.

Mein Problem ist nun das ich das textarea Element über eine Funktion aufrufen und Codepress damit verknüpfen möchte.

Hier nun der Code der Javascript Datei von Codepress:

CodePress = function(obj) {  
 var self = document.createElement('iframe');  
 self.textarea = obj;  
 self.textarea.disabled = true;  
 self.textarea.style.overflow = 'hidden';  
 self.style.height = self.textarea.clientHeight +'px';  
 self.style.width = self.textarea.clientWidth +'px';  
 self.textarea.style.overflow = 'auto';  
 self.style.border = '1px solid gray';  
 self.frameBorder = 0; // remove IE internal iframe border  
 self.style.visibility = 'hidden';  
 self.style.position = 'absolute';  
 self.options = self.textarea.className;  
  
 self.initialize = function() {  
  self.editor = self.contentWindow.CodePress;  
  self.editor.body = self.contentWindow.document.getElementsByTagName('body')[0];  
  self.editor.setCode(self.textarea.value);  
  self.setOptions();  
  self.editor.syntaxHighlight('init');  
  self.textarea.style.display = 'none';  
  self.style.position = 'static';  
  self.style.visibility = 'visible';  
  self.style.display = 'inline';  
 }  
  
 // obj can by a textarea id or a string (code)  
 self.edit = function(obj,language) {  
  if(obj) self.textarea.value = document.getElementById(obj) ? document.getElementById(obj).value : obj;  
  if(!self.textarea.disabled) return;  
  self.language = language ? language : self.getLanguage();  
  self.src = CodePress.path+'codepress.html?language='+self.language+'&ts='+(new Date).getTime();  
  if(self.attachEvent) self.attachEvent('onload',self.initialize);  
  else self.addEventListener('load',self.initialize,false);  
 }  
  
 self.getLanguage = function() {  
  for (language in CodePress.languages)  
   if(self.options.match('\\b'+language+'\\b'))  
    return CodePress.languages[language] ? language : 'generic';  
 }  
  
 self.setOptions = function() {  
  if(self.options.match('autocomplete-off')) self.toggleAutoComplete();  
  if(self.options.match('readonly-on')) self.toggleReadOnly();  
  if(self.options.match('linenumbers-off')) self.toggleLineNumbers();  
 }  
  
 self.getCode = function() {  
  return self.textarea.disabled ? self.editor.getCode() : self.textarea.value;  
 }  
  
 self.setCode = function(code) {  
  self.textarea.disabled ? self.editor.setCode(code) : self.textarea.value = code;  
 }  
  
 self.toggleAutoComplete = function() {  
  self.editor.autocomplete = (self.editor.autocomplete) ? false : true;  
 }  
  
 self.toggleReadOnly = function() {  
  self.textarea.readOnly = (self.textarea.readOnly) ? false : true;  
  if(self.style.display != 'none') // prevent exception on FF + iframe with display:none  
   self.editor.readOnly(self.textarea.readOnly ? true : false);  
 }  
  
 self.toggleLineNumbers = function() {  
  var cn = self.editor.body.className;  
  self.editor.body.className = (cn==''||cn=='show-line-numbers') ? 'hide-line-numbers' : 'show-line-numbers';  
 }  
  
 self.toggleEditor = function() {  
  if(self.textarea.disabled) {  
   self.textarea.value = self.getCode();  
   self.textarea.disabled = false;  
   self.style.display = 'none';  
   self.textarea.style.display = 'inline';  
  }  
  else {  
   self.textarea.disabled = true;  
   self.setCode(self.textarea.value);  
   self.editor.syntaxHighlight('init');  
   self.style.display = 'inline';  
   self.textarea.style.display = 'none';  
  }  
 }  
  
 self.edit();  
 return self;  
}  
  
CodePress.languages = {  
 csharp : 'C#',  
 css : 'CSS',  
 generic : 'Generic',  
 html : 'HTML',  
 java : 'Java',  
 javascript : 'JavaScript',  
 perl : 'Perl',  
 ruby : 'Ruby',  
 php : 'PHP',  
 text : 'Text',  
 sql : 'SQL',  
 vbscript : 'VBScript'  
}  
  
  
CodePress.run = function() {  
 s = document.getElementsByTagName('script');  
 for(var i=0,n=s.length;i<n;i++) {  
  if(s[i].src.match('codepress.js')) {  
   CodePress.path = s[i].src.replace('codepress.js','');  
  }  
 }  
 t = document.getElementsByTagName('textarea');  
 for(var i=0,n=t.length;i<n;i++) {  
  if(t[i].className.match('codepress')) {  
   id = t[i].id;  
   t[i].id = id+'_cp';  
   eval(id+' = new CodePress(t[i])');  
   t[i].parentNode.insertBefore(eval(id), t[i]);  
  }  
 }  
}  
  
if(window.attachEvent) window.attachEvent('onload',CodePress.run);  
else window.addEventListener('DOMContentLoaded',CodePress.run,false);  

---------------------------------------------------------------
mein Versuch war folgender, der aber fehlschlug:

function structure()  {  
  document.write("<textarea id=\"cp1\" class=\"codepress php\" style=\"width:700px;height:500px;\" wrap=\"off\"></textarea>");  
  var Codepress;  
  Codepress = new Codepress;  
  CodePress.run;  
}

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

wobei dabei die 2 letzten Zeilen im ursprünglichen Code deaktiviert hatte...
Leider kenne ich mich mit objektorientierten Javascript nicht so gut aus, als das ich dieses Problem allein lösen kann. Das Textarea Element wird dargestellt, Codepress aber nicht aufgerufen (Konstruktor kann laut Firebug nicht aufgerufen werden) Das Textarea Element muss für dieses Problem so aufgerufen werden.

vielen Dank für jede mögliche Lösung
Flupdiwup

[Flupdiwup]

noch eine kleine Ergänzung, der orginale statische Aufruf von Codepress erfolgt in einer HTML Datei so:

<textarea id="cp1" class="codepress php" style="width:700px;height:300px;" wrap="off">  
</textarea>  
<script src="codepress.js" type="text/javascript"></script>  

das funktioniert auch
also danke für jedwede Verbesserung
Flupdiwup

[ChrisB]

Hi,

function structure()  {

document.write("<textarea id="cp1" class="codepress php" style="width:700px;height:500px;" wrap="off"></textarea>");
  var Codepress;
  Codepress = new Codepress;
  CodePress.run;
}

  
Es sollte sich doch langsam herumgesprochen haben, dass document.write, zu einem spaeteren Zeitpunkt als direkt waehrend des Ladens des Dokumentes, dieses ersetzt.  
  

> Das Textarea Element wird dargestellt, Codepress aber nicht aufgerufen (Konstruktor kann laut Firebug nicht aufgerufen werden)  
  
Ist ja auch kein Konstruktor mehr da, s.o.  
  

> Das Textarea Element muss für dieses Problem so aufgerufen werden.  
  
Das wage ich doch ernsthaft zu bezweifeln.  
Womit begruendest du das? (Ausser mit "ich kann's nicht anders")  
  
MfG ChrisB  
  

-- 
„This is the author's opinion, not necessarily that of Starbucks.“

[Flupdiwup]

Hallo ChrisB,

zur Erklärung. Dies ist nur ein vereinfachtes CodeBsp. .

Das dahinter stehende Projekt ist ein Dateimanager der mit Ajax/ PHP5 funktioniert. Mit diesem wird asynchron eine Verzeichnis- / Dateiliste geladen die bearbeitet werden kann (neu angelegt, umbenannt, gelöscht, gezippt,...). Diese Liste wird in einem DIV mit Ajax dynamisch dargestellt (ohne die Seite jeweils neu laden zu müssen). Die Funktion Datei Bearbeiten blendet diese Liste aus und lädt ein textarea Element mit dem Inhalt der Datei anstelle von diesem. Allerdings nicht über über document.write(), sondern über getElementById(), die Vorgehensweise ist aber ähnlich und für dieses Bsp. übersichtlicher.

Dieses textarea Element wollte ich nun mit Codepress verschönern, bekomme es aber nicht dynamisch hin. Das textarea existiert schon in dem DIV eingeblendet durch JS, ich wollte ein Button anlegen der Codepress "bei Bedarf" den Source formatiert.

Ist ja auch kein Konstruktor mehr da, s.o.

Und das ist mein Problem, derzeit wird Codepress aufgerufen wenn die JS Datei geladen wird. Ich möchte aber wenn möglich die Codepress- Funktionen in meine schon geladene JS Datei integrieren, kenne mich aber in JS nur soweit aus inwieweit meine C- Kenntnisse reichen.

also danke schonmal für die Hilfe
bye
Flupdiwup