Javascript Editor einbinden

[Jens_B]

.. mit Safari (aktuelle Version 7.0.5) unter Mavericks bekomme ich es einfach nicht mehr hin das der codemirror in fhem geht. Ich habe keine Ahnung wieso aber es geht nicht.
Starte ich Opera oder Firefox geht es....


Gruß
Jens

[justme1968]

safari  hat aktuell das problem das das codemirror fenster nicht automatisch den focus bekommt und man erst mit tab hin springen muss. danach geht aber alles.

gruss
  andre

[Jens_B]

safari  hat aktuell das problem das das codemirror fenster nicht automatisch den focus bekommt und man erst mit tab hin springen muss. danach geht aber alles.

Das geht bei mir definitiv nicht, habe es eben selber erneut probiert. Ich weiß, das es schon mal funktioniert hat, weiß nur nicht seit wann es nicht mehr geht.

[hauwech]

Das Syntax highlighting ist wirklich hilfreich.
Aber anscheinend funktioniert dann die Suchfunktion im Browser (Chrome,Firefox) nicht mehr richtig.
Wenn ich z.B. die fhem.cfg bearbeite und suche mit Ctrl-F einen String (z.B. "readingsGroup"), dann kommen 0 Fundstellen. Wenn der gesuchte string gerade zufällig im sichtbaren Bereich ist, wird er gefunden.

Kennt jemand diesen Effekt? Gibt's vielleicht einen Trick?

Gruß Roland

[marvin78]

Das hier habe ich mir dafür eingebaut:

http://codemirror.net/demo/search.html

[hauwech]

Sorry, ich bin da nicht so firm...
Muß der Code in die codemirror.js? Wenn ja: wohin?

Gruß Roland

[marvin78]

Hm. Warum liest heute eigentlich niemand mehr selbst?

Die entsprechenden Dateien müssen ins Codemirror-Verzeichnis und dann in der fhem_codemirror.js einbinden:

Code Auswählen Erweitern


  loadScript("codemirror/search.js",    function(){cm_loaded++;cm_wait()});
  loadScript("codemirror/match-highlighter.js",    function(){cm_loaded++;cm_wait()});
  loadScript("codemirror/searchcursor.js",    function(){cm_loaded++;cm_wait()});

Vorsicht bei Updates. Die fhem_codemirror.js kann bei Updates von fhem überschrieben werden. Deshalb ist eine Kopie sinnvoll.

[rudolfkoenig]

Ich wuerde diese Dateien auch im codemirror Verzeichnis speichern, aber fhem_codemirror.js nicht anfassen, und stattdessen das JavaScripts Attribut des WEB-Servers mit den erwaehnten .js Dateien erweitern. Damit geht bei einem Update nichts verloren.

[marvin78]

Gute Idee, funktioniert allerdings nicht. Ich nehme an, weil sie auf diese Weise nicht als Plugin des Codemirror-Editors erkannt werden.

[rudolfkoenig]

Hast du die zusaetzlichen Dateien vor oder nach fhem_codemirror.js im Attribut spezifiziert?

[marvin78]

Es geht beides nicht. Was ist denn aus deiner Sicht best practice? Aus meiner Sicht gehören sie dahinter. Ich bin mir schon sehr bewusst, was ich tue.. Das FHEMWEB-Attribut zu nutzen, war das erste, was ich probiert habe. Erst danach habe ich die fhem_codemirror.js editiert. Um noch tiefer einzusteigen und zu schauen, warum, das Attrinbut nicht funktioniert, fehlte mir aber leider die Zeit.

Ich habe hier aber auch kein Problem. So, wie ich es mache, funktioniert es ja und das Problem mit dem Update kann ich handeln.

[Billy]

Das hier habe ich mir dafür eingebaut:

http://codemirror.net/demo/search.html

Habe das mal bei mir wie von dir vorgeschlagen eingebaut.
Klappt hervorragend! Danke für den Typ

Auch die Befehle:
Ctrl-F / Cmd-F --> Start searching
Ctrl-G / Cmd-G --> Find next
Shift-Ctrl-G / Shift-Cmd-G --> Find previous
Shift-Ctrl-F / Cmd-Option-F --> Replace
Shift-Ctrl-R / Shift-Cmd-Option-F --> Replace all

Billy

[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 Erweitern

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;

    if($(els[0]).closest("div#edit").css("display")=="none") { // DEF special
      $("table.internals a").each(function(){
        var oc = $(this).attr("onclick");
        if(oc) {
          $(this).attr("onclick", oc+
          's=document.getElementById("edit").getElementsByTagName("textarea");'+
          'if(!s[0].editor) s[0].editor=AddCodeMirror(s[0]);');
        }
      });
    } else {
      AddCodeMirror(els[0]);
    }
  });
});

function
AddCodeMirror(e)
{
  cm_editor = e;
  loadLink("codemirror/codemirror.css");
  loadLink("codemirror/show-hint.css");
  loadScript("codemirror/codemirror.js",   function(){cm_loaded++;} );
  loadScript("codemirror/closebrackets.js",function(){cm_loaded++;} );
  loadScript("codemirror/matchbrackets.js",function(){cm_loaded++;} );
  loadScript("codemirror/show-hint.js",    function(){cm_loaded++;cm_wait()});
  loadScript("codemirror/search.js",    function(){cm_loaded++;cm_wait()});
  loadScript("codemirror/match-highlighter.js",    function(){cm_loaded++;cm_wait()});
  loadScript("codemirror/searchcursor.js",    function(){cm_loaded++;cm_wait()});
}

function
cm_wait()
{
  if(cm_loaded != 4) {
    setTimeout(cm_wait, 10);
    return;
  }

  var ltype,type="fhem";    // get the type from the hidden filename extension
  $("input[name=save]").each(function(){
    ltype = $(this).attr("value");
    ltype = ltype.substr(ltype.lastIndexOf(".")+1);
    if(ltype=="css") type = "css";
    if(ltype=="svg") type = "xml";
  });
  var attr = {
    theme: "blackboard",
    lineNumbers: true,
    matchBrackets: true,
    autoCloseBrackets: true,
    extraKeys:{'Ctrl-Space':'autocomplete'}
  };
  var userAttr = scriptAttribute("fhem_codemirror.js");
  for(var a in userAttr)
    attr[a] = userAttr[a];

  loadLink("codemirror/"+attr.theme+".css");
  $("head").append(
    '<style type="text/css">'+
      (ltype ?
      '.CodeMirror {height: ' + (window.innerHeight - 150) + 'px;}':
      '.CodeMirror {width:  ' + (window.innerWidth  - 300) + 'px;}')+
    '</style>');

  loadScript("codemirror/"+type+".js", function(){
    log("Calling CodeMirror");
    CodeMirror.fromTextArea(cm_editor, attr);
  });
}


Die Suche geht aber trotzdem nicht. fhem/Browser restart ändert auch nix.
Wenn ich auf der codemirror Demo Seite http://codemirror.net/demo/search.html ctrl-f drücke, kommt der Suchdialog im Editor. Wenn ich auf der fhem Seite ctrl-f drücke, kommt der Suchdialog des Browsers - auch wenn der cursor im Editorfenster ist.
Ich habe zusätzlich noch die dialog.js runtergeladen und ins codemirror Verzeichnis kopiert, das bringt aber auch nix.
Gibt es ein relevantes logfile?
Muß ich noch etwas aktivieren/kopieren/ändern/ergänzen, was einem Entwickler selbstverständlich erscheint, mir aber nicht?

Gruß Roland

[marvin78]

Eigentlich ist alles korrekt. Welchen Browser verwendest du denn? Hab es mit dem IE nicht getestet. Der kann sehr vieles nicht. Für FHEM am besten einen vernünftigen Browser verwenden.

Lösche mal den Cache deines Browsers. Hattest du den Fokus im Edit-Bereich, als du STRG-F gedrückt hast?

[franky08]

Hallo, bei mir funktioniert das soweit auch, doch auf dem MAC mit Safari oder mit Firefox bekomme ich bei der Suche kein Suchergebnis. Es werden 0 Treffer angezeigt, scrolle ich zu dem Auschnitt mit dem gesuchten Ausdruck werden die Treffer auch gefunden/angezeigt.

VG
Frank