Javascript Editor einbinden

[rudolfkoenig]

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

Nein, es liegt daran, dass die Skripte geladen werden, bevor fhem_codemirror.js mit dem Laden der benoetigten jquery.min.js und codemirror.js fertig ist.

Mit dem Attribut geht es trotzdem:

Code Auswählen Erweitern

attr WEB JavaScripts pgm2/jquery.min.js codemirror/codemirror.js codemirror/search.js codemirror/fhem_codemirror.js
auch wenn das etwas langsamer ist, wegen doppeltes Parsen von jquery & codemirror.

[P.A.Trick]

Also ich bin dafür auch zu blöd. Ich wollte gleich den Wiki Artikel dazu schreiben, ich bekomme es aber nicht hin.
Was mache ich falsch Rudi?

Code Auswählen Erweitern

Wer im Codemirror Editor auch die eingebaute Suche verwenden will, muss zusätzlich die folgenden drei Dateien aus dem GIT [https://github.com/marijnh/CodeMirror/tree/master/addon/search] Repository herunterladen
und im Ordner ././fhem/www/codemirror kopieren. Danach noch die beiden Dialog Dateien unter [https://github.com/marijnh/CodeMirror/tree/master/addon/dialog] herunterladen und in den Codemirror Ordner kopieren.
Eventuell müssen noch die Rechte (unter Linux mit dem Befehl <code>chmod 755 *.js</code> im Codemirror Verzeichnis) angepasst werden.
Nun müssen die zusätzlichen Dateien noch der Webinstanz WEB bekannt gemacht werden. Dies geschieht mit dem folgenden Aufruf:

<code>attr WEB JavaScripts pgm2/jquery.min.js codemirror/codemirror.js codemirror/search.js codemirror/dialog.js codemirror/fhem_codemirror.js</code>

Weitere Informationen sind hier [http://codemirror.net/demo/search.html] zu finden.

[rudolfkoenig]

Ich wollte gleich den Wiki Artikel dazu schreiben, ich bekomme es aber nicht hin.
Was mache ich falsch Rudi?

Weiss nicht, ich bin kein Wiki-Experte

[P.A.Trick]

Weiss nicht, ich bin kein Wiki-Experte

Nein ich meine den Inhalt der nicht funktioniert!

[franky08]

Tröste dich, bei mir funktioniert es auch nur mit attr WEB JavaScrips codemirror/fhem_codemirror, wenn ich die anderen Scrips mittels attr einbinde, geht gar nicht´s mehr! So bekomme ich auf der Console nur den folgenden Fehler, obwohl alles funktioniert.
An der Stelle $(document): Siehe Screenshot

Code Auswählen Erweitern


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

[rudolfkoenig]

Und du bist der Meinung, dass ich aus "ich bekomme es aber nicht hin" die genaue Fehlerursache feststellen kann?

dialog.js kenne ich nicht, und ich habe nur die Suchfunktion mit fhem.cfg.demo getestet, nachdem ich das Attribut wie vorher beschrieben gesetzt habe. Mit Firefox und Chrome. Steht was bei dir in der JavaScript-Console?

[FHEMAN]

Der Editor ist sehr praktisch. Eine Frage dazu:
Kann man alle Themes (http://codemirror.net/demo/theme.html) hinterlegen?
Leider hat es bei mir mit 3024-day nicht funktioniert:

Code Auswählen Erweitern

attr WEB codemirrorParam { "theme":"3024-day", "lineNumbers":true }
Ich hätte gerne den hellen Style..
Habe die Antwort hier gefunden: http://forum.fhem.de/index.php/topic,20444.msg169104/topicseen.html#msg169104

[frank]

beim editieren von attributen gibt es probleme mit codemirror.

wenn ich das im widget angezeigte attribut nicht ändern möchte und mit cancel abbreche, kann ich kein weiteres attribut editieren, da die attribute nicht mehr im widget angezeigt werden. das widget öffnet sich, aber bleibt vollkommen leer. erst nach einem refresh der browserseite kann wieder editiert werden.

eventuell hat ein codemirror-experte eine idee. hier geht es zum problem-thread: http://forum.fhem.de/index.php/topic,34011.msg266848.html#msg266848

gruss frank

[rapster]

Für die Notepad++ User, habe die extraKeys bei mir noch erweitert damit das Einrücken, Auskommentieren und hoch/runterscrollen im integrierten Editor Notepad++ like ist.

Dazu die extraKeys in der fhem_codemirror.js anpassen:

Code Auswählen Erweitern


...
  var attr = {
    extraKeys:{
        'Tab': function(cm) {
            if (cm.somethingSelected()) {
                var sel = cm.getSelection("\n");
                // Indent only if there are multiple lines selected, or if the selection spans a full line
                if (sel.length > 0 && (sel.indexOf("\n") > -1 || sel.length === cm.getLine(cm.getCursor().line).length)) {
                    cm.indentSelection("add");
                    return;
                }
            }
            cm.getOption("indentWithTabs") ? cm.execCommand("insertTab") : cm.execCommand("insertSoftTab");
        },
        'Shift-Tab': function(cm) {
            cm.indentSelection("subtract");
        },
        'Ctrl-Q': function(cm) {   // Needs comment.js
            cm.toggleComment({ indent: false, lineComment: "#" });
        },
        'Ctrl-Up': function(cm) {
            var info = cm.getScrollInfo();
            if (!cm.somethingSelected()) {
                var visibleBottomLine = cm.lineAtHeight(info.top + info.clientHeight, "local");
                if (cm.getCursor().line >= visibleBottomLine)
                    cm.execCommand("goLineUp");
            }
            cm.scrollTo(null, info.top - cm.defaultTextHeight());
        },
        'Ctrl-Down': function(cm) {
            var info = cm.getScrollInfo();
            if (!cm.somethingSelected()) {
                var visibleTopLine = cm.lineAtHeight(info.top, "local")+1;
                if (cm.getCursor().line <= visibleTopLine)
                    cm.execCommand("goLineDown");
            }
            cm.scrollTo(null, info.top + cm.defaultTextHeight());
        }
    }
  };
...

Die Einrücktiefe, und ob mit Leerzeichen oder Tabulator eingerückt werden soll kann über

attr WEB codemirrorParam { "indentUnit":4, "indentWithTabs":false }

gesteuert werden.

Um mit STRG+Q Zeilen auszukommentieren oder die Kommentare zu entfernen muss noch die comment.js eingebunden werden und die codemirror.js sowie codemirror.css aktualisiert werden.
_______________________

BTW: Hat einer einen Tipp wie ich die extraKeys am besten in ein separates File auslagere, damit das nicht bei einem update überschrieben wird?


Gruß
  Claudiu

[rudolfkoenig]

Ich vermute, dafuer gibt es kein Hook.
Hilft nur fhem_codemirror.js aus update auszuschliessen.

[rapster]

Rudi, macht es Sinn die standard .js files von codemirror als optimierte (minified) Version über fhem bereitzustellen?

Hab sie mal durch den google closure-compiler gejagt, und dabei pro file etwas über 50% einsparen können.
Bei allen .js Files aus meinem codemirror/ macht das immerhin 232kB zu 576kB (auch wenn natürlich nicht alle geladen werden)

[rudolfkoenig]

Das musst du betateilchen Fragen, laut MAINTAINER ist er zustaendig

[rapster]

Habe codemirror und die module im SVN auf Verison 5.8 aktualisiert.
desweiteren ist nun search & replace standardmäßig aktiviert, sowie sind die extraKeys aus obigem Post auch gleich mit drin.

Um codemirror mit search & replace, blackboard-theme  usw. zu aktivieren reicht es jetzt

Code Auswählen Erweitern

attr fhemweb JavaScripts codemirror/fhem_codemirror.js
zu setzen.

Das sollte nun auch ein paar Probleme lösen, wie z.B. ein schwarzes Editorfenster beim zweiten Öffnen eines Attributes usw.

Hier ein Auszug aus CHANGED:

- feature: codemirror modules now loaded by default: search.js, comment.js
                 dialog.js, autorefresh.js, searchcursor.js, dialog.css
             codemirror search & replace is now activated by default.
                 to use this feature now you must only load in fhemweb
                 attribute 'JavaScripts' the codemirror/fhem_codemirror.js file
             new extraKeys for 'TAB', 'Shift+Tab', 'STRG+Q', 'STRG+UP',
                 and 'STRG+DOWN' are added.
             codemirror default parameters are now:
                 indentUnit:4, indentWithTabs:false, autoCloseBrackets:false,
                 matchBrackets:true, autofocus:true, theme:"blackboard",
                 lineNumbers:true, autoRefresh:true
               this can be overwritten with fhemweb attribute 'codemirrorParam'
  - updated: codemirror version to 5.8
             the default codemirror javascript files are now minified

Gruß
  Claudiu

[igami]

Hi,

ich nutze schon länger den Editor, was mir noch fehlt ist die Möglichkeit des Text Folding. Könnte man das noch einbauen?

Grüße
igami

[rapster]

Hi,

eigtl. sollte code folding schon möglich sein einzubauen, hatte das vor kurzem auch mal probiert, allerdings hat es bei meinem Versuch einfach ohne irgend einen Fehler zu werfen nicht funktioniert

Wollte da dann nicht zuviel Zeit investieren und hab es erstmal sein gelassen.

Hier findet sich ein Demo mit den zusätzlich zu ladenen codemirror-modulen https://codemirror.net/demo/folding.html wenn man mal Lust und Zeit zum basteln/ausprobieren hat

Gruß
  Claudiu