Javascript Editor einbinden

[hauwech]

Hallo Marvin,

zur Zeit ist Chrome (Version 35.0.1916.153 m) mein Standardbrowser. Ich pendle meist zwischen Firefox und Chrome, den IE verwende ich zum Test, wenn was mit den beiden anderen nicht geht, so auch hier. Firefox ist Version 30.0.

Hattest du den Fokus im Edit-Bereich, als du STRG-F gedrückt hast?

Ja:

Wenn ich auf der fhem Seite ctrl-f drücke, kommt der Suchdialog des Browsers - auch wenn der cursor im Editorfenster ist.

Zwischendurch hatte ich auch mal den Effekt, daß nach Drücken von Ctrl-F drei Editorfenster untereinander angezeigt wurden, das oberste farbig, die beiden anderen einfarbig. Dieser Effekt trat unabhängig voneinander auch bei meinem Kollegen auf. Er betreibt sein fhem auf einem Raspi, ich auf einem Ubuntu 12.04 LTS.

Gruß Roland

[marvin78]

Was sagt denn die Konsole in Chrome oder Firefox (Entwicklertools)? Gibt es da beim öffnen des Editors Fehlermeldungen?

[hauwech]

Ahhh, der Hinweis war gut, das hatte ich gesucht...:

Code Auswählen Erweitern

Loading /fhem/codemirror/search.js fhemweb.js:14
Loading /fhem/codemirror/match-highlighter.js fhemweb.js:14
Loading /fhem/codemirror/searchcursor.js fhemweb.js:14
Loading /fhem/codemirror/blackboard.css fhemweb.js:14
Loading /fhem/codemirror/fhem.js fhemweb.js:14
Uncaught SyntaxError: Unexpected token < search.js:6
Uncaught SyntaxError: Unexpected token < match-highlighter.js:6
Uncaught SyntaxError: Unexpected token < searchcursor.js:6
Calling CodeMirror fhemweb.js:14

Gruß Roland

[marvin78]

Hast du vielleicht alle 3 Dateien zusätzlich noch im JavaScripts-Attribut deiner FHEMWEB Instanz eingetragen?

[hauwech]

... ich brauch' mal ein paar Minuten... die search.js hat einen komplett anderen Inhalt als das github file... wahrscheinlich ist beim download ein html draus geworden.
Melde mich gleich wieder.

[hauwech]

Jetzt geht's. Danke für den Tip mit den Entwicklertools, ich habe in die *.js files nicht reingekuckt. Ich habe jetzt schnell mal den Code von github mit copy+paste kopiert. Vorher hatte ich die files von github mit "Link speichern unter" geholt, da ist ein html draus geworden.
Boah, so ein billiger Fehler....

Gruß Roland

[franky08]

Hallo, ich bin genau so vorgegangen, wie hier im Thread beschrieben. Die 3 Dateien von git.hub mittels copy&paste ins fhem/codemirror Verzeichnis kopiert, Besitzer/Gruppe angepasst, Rechte angepasst. Den zusätzlichen Code ans Ende der fhem_codemirror.js eingefügt.
Leider funktioniert die Suche nur in dem Bereich der gerade auf dem Screen ist.

Die Fehlerconsole liefert:

Code Auswählen Erweitern

[Warning] Invalid CSS property declaration at: * (dashboard_darkstyle.css, line 110)
[Log] Loading /fhem/pgm2/jquery.min.js (fhemweb.js, line 14)
[Error] ReferenceError: Can't find variable: $
(anonyme Funktion) (fhem_codemirror.js, line 78)
loadScript (fhemweb.js, line 309)
[Log] Loading /fhem/codemirror/codemirror.css (fhemweb.js, line 14)
[Log] Loading /fhem/codemirror/show-hint.css (fhemweb.js, line 14)
[Log] Loading /fhem/codemirror/codemirror.js (fhemweb.js, line 14)
[Log] Loading /fhem/codemirror/closebrackets.js (fhemweb.js, line 14)
[Log] Loading /fhem/codemirror/matchbrackets.js (fhemweb.js, line 14)
[Log] Loading /fhem/codemirror/show-hint.js (fhemweb.js, line 14)
[Log] Loading /fhem/codemirror/search.js (fhemweb.js, line 14)
[Log] Loading /fhem/codemirror/match-highlighter.js (fhemweb.js, line 14)
[Log] Loading /fhem/codemirror/searchcursor.js (fhemweb.js, line 14)
[Warning] Invalid CSS property declaration at: * (codemirror.css, line 178)
[Warning] Invalid CSS property declaration at: * (codemirror.css, line 179)
[Warning] Invalid CSS property declaration at: * (codemirror.css, line 258)
[Log] Loading /fhem/codemirror/blackboard.css (fhemweb.js, line 14)
[Log] Loading /fhem/codemirror/fhem.js (fhemweb.js, line 14)
[Log] Calling CodeMirror (fhemweb.js, line 14)
[Log] Longpoll:  (fhemweb.js, line 14)

VG
Frank

[franky08]

Wie kann ich folgenden Fehler beheben:

[Error] ReferenceError: Can't find variable: $
   (anonyme Funktion) (fhem_codemirror.js, line 78)
   loadScript (fhemweb.js, line 309)

Ich denke das desshalb die Suche auf den aktuellen Screen beschränkt bleibt.

VG
Frank

[marvin78]

Dazu kann ich nichts sagen. Da müsste man sich ggf. an den codemirror-Support wenden.

[franky08]

Die beschriebene Codezeile ist folgende:

Code Auswählen Erweitern

loadScript("pgm2/jquery.min.js", function(){
  $(document).ready(function(){

Die beschriebene Zeile stammt aus dem zusätzlichen Code, der hier im Thread beschrieben wurde (eingefügt in die orginale fhem_codemirror.js)

[frank]

was ist denn mit der offenen klammer nach ready.

[franky08]

Hallo frank, die offene Klammer kommt vom copy&paste. Der komplette Codeauschnitt siehe oben im Post im Screenshot.
Wo finde ich die Erweiterung, die in die fhem_codemirror.js muss? Vielleicht ist da beim copy was falsch gelaufen. Habe die hier aus dem Thread genommen.
Antwort 327 von hauwech:

Hallo Marvin,
auch auf die Gefahr hin, daß ich mich als Dummy outen muß...
Ich habe
- die drei files nach /opt/fhem/www/codemirror kopiert
- owner/group auf fhem/dialout gesetzt (wie die anderen *.js files in diesem Verzeichnis)
- die Rechte auf 644 gesetzt (wie die anderen *.js files in diesem Verzeichnis)

- die fhem_codemirror.js erweitert:
Code: [Auswählen]
var cm_loaded = 0, cm_editor;

loadScript("pgm2/jquery.min.js", function(){
  $(document).ready(function(){
    var els = document.getElementsByTagName("textarea");
    if(els.length == 0)
      return;
...
   

VG
Frank

[franky08]

OK, wenn der Cursor im Editor Fenster steht, geht die Suche über den gesamten Code. Trotzdem hab ich auf der Console die oben beschriebene Meldung.

Code Auswählen Erweitern

[Error] ReferenceError: Can't find variable: $
   (anonyme Funktion) (fhem_codemirror.js, line 78)
   loadScript (fhemweb.js, line 309)

VG
Frank

[frank]

hallo frank,

ich glaube du hast da zu viel copy und paste gemacht. du hast jetzt bestimmt die normale js plus die veränderte js in einer datei. also fast alles doppelt.

gruss frank

[franky08]

Eigentlich nicht, ich habe, wie beschrieben, die fhem_codemirror.js nur mit dem hier angegebenen Code erweitert.
Sehe am WE nochmal danach, bin dann erstmal arbeiten.

VG
Frank