Autor Thema: Javascript Editor einbinden  (Gelesen 41505 mal)

Offline hexenmeister

  • Developer
  • Hero Member
  • ****
  • Beiträge: 3325
    • tech_LogBuch
Antw:Javascript Editor einbinden
« Antwort #15 am: 19 Februar 2014, 15:17:55 »
Schön wäre, wenn das Ganze auch noch abschaltbar bleibt. Denkt an die "Mobile Devices" und die Bandbreite ;)
Cubietruck, HM (HMLAN/HM-CFG-USB/HM-LC-Bl1PBU-FM/HM-LC-Sw1PBU-FM/HM-LC-Dim1TPBU-FM/HM-LC-SW1-PL2/HM-SEC-RHS/HM-PB-2-WM55/HM-PB-6-WM55/HM-Sen-MDIR-O/HM-CC-RT-DN/HM-TC-IT-WM-W-EU/HB-UW-Sen-THPL-I/...), 1wire, Firmata, MySensors,..

Offline betateilchen

  • Developer
  • Hero Member
  • ****
  • Beiträge: 12775
  • Probleme sind auch keine Lösung.
Antw:Javascript Editor einbinden
« Antwort #16 am: 19 Februar 2014, 15:56:38 »
Der Editor kann Autocompletion. Damit könnte man doch bestimmt die FHEM-Funktionen

mach nur... stell die entsprechende Datei zusammen und sie muss nur noch eingebunden werden.

Schön wäre, wenn das Ganze auch noch abschaltbar bleibt.

Das ist das kleinste Problem. Da ich die Einbindung des Editors inzwischen schon als Funktion gekapselt habe, muss ich den Funktionsaufruf einfach nur mit einem (neu zu schaffenden) Attribut "externalEditor:1,0" verknüpfen.

Kopfzerbrechen macht mir aber noch die Einbindung beim DEF-Editor. Da kommen sich zwei Javascripte ins Gehege, eines von fhem und eines vom codemirror, die beide die gleiche Elementeigenschaft bearbeiten wollen, die zum Ein-/Ausblenden des Editorfensters vorgesehen ist.


Und überhaupt... wieso mache ICH das eigentlich alles? 8)
Aus technischen Gründen befindet sich die Signatur auf der Rückseite dieses Beitrages.

Offline justme1968

  • Developer
  • Hero Member
  • ****
  • Beiträge: 15741
Antw:Javascript Editor einbinden
« Antwort #17 am: 19 Februar 2014, 16:05:13 »
weil du schneller warst als ich :)

ich hatte gestern probiert und wollte es heute hoch laden.

gruss
  andre
FHEM5.4,DS1512+,2xCULv3,DS9490R,HMLAN,2xRasPi
CUL_HM:HM-LC-Bl1PBU-FM,HM-LC-Sw1PBU-FM,HM-SEC-MDIR,HM-SEC-RHS
HUEBridge,HUEDevice:LCT001,LLC001,LLC006,LWL001
OWDevice:DS1420,DS18B20,DS2406,DS2423
FS20:fs20as4,fs20bs,fs20di
AKCP:THS01,WS15
CUL_WS:S300TH

Offline betateilchen

  • Developer
  • Hero Member
  • ****
  • Beiträge: 12775
  • Probleme sind auch keine Lösung.
Antw:Javascript Editor einbinden
« Antwort #18 am: 19 Februar 2014, 16:09:37 »
Hallo Andre,

hast Du eine Lösung für das Toggle-Problem bei DEF gefunden?

Es klemmt massiv in der sub FW_makeEdit($$$)


sub
FW_makeEdit($$$)
{
  my ($name, $n, $val) = @_;

  # Toggle Edit-Window visibility script.
  my $pgm = "Javascript:" .
             "s=document.getElementById('edit').style;".
             "s.display = s.display=='none' ? 'block' : 'none';".
             "s=document.getElementById('disp').style;".
             "s.display = s.display=='none' ? 'block' : 'none';";
  FW_pO "<td>";
  FW_pO "<a onClick=\"$pgm\">$n</a>";
  FW_pO "</td>";

  $val =~ s,\\\n,\n,g;
  my $eval = $val;
  $eval = "<pre>$eval</pre>" if($eval =~ m/\n/);
  FW_pO "<td>";
  FW_pO   "<div class=\"dval\" id=\"disp\">$eval</div>";
  FW_pO  "</td>";

  FW_pO  "</tr><tr><td colspan=\"2\">";
  FW_pO   "<div id=\"edit\" style=\"display:none\">";
  FW_pO   "<form method=\"$FW_formmethod\">";
  FW_pO       FW_hidden("detail", $name);
  my $cmd = "modify";
  my $ncols = $FW_ss ? 30 : 60;
  FW_pO      "<textarea id=\"editor\" name=\"val.${cmd}$name\" ".
                "cols=\"$ncols\" rows=\"10\">$val</textarea>";
  FW_pO     "<br>" . FW_submit("cmd.${cmd}$name", "$cmd $name");
  FW_pO   "</form>";
  FW_pO "</div>";
#  FW_linkCodemirror('editor');
  FW_pO  "</td>";
}


weil das mit der Umschalterei der "display:none" etc nicht korrekt funktioniert. Ich bekomme zwar ein Editorfenster, das den TExt enthält, aber der TExt wird erst bei der nächsten Eingabe, und sei es auch nur ein Leerzeichen sichtbar.
Aus technischen Gründen befindet sich die Signatur auf der Rückseite dieses Beitrages.

Offline justme1968

  • Developer
  • Hero Member
  • ****
  • Beiträge: 15741
Antw:Javascript Editor einbinden
« Antwort #19 am: 19 Februar 2014, 17:16:25 »
ja. ich habe das CodeMirror.fromTextArea ans ende des Toggle Edit-Window visibility script am anfang von FW_makeEdit gehängt.

wenn man DEF klickt wird zuerst der textarea sichtbar gemacht und dann erst der editor erzeugt.

  my $pgm = "Javascript:" .                                                                                           
             "s=document.getElementById('edit').style;".                                                             
             "s.display = s.display=='none' ? 'block' : 'none';".                                                     
             "s=document.getElementById('disp').style;".                                                             
             "s.display = s.display=='none' ? 'block' : 'none';".                                                     
             "s=document.getElementById('editarea');".                                                               
             "s.editor ? s.editor: s.editor = CodeMirror.fromTextArea(s, {lineNumbers: true,matchBrackets: true});";
noch nicht elegant aber damit geht es dann problemlos.

der texterea hat natürlich die id editarea bekommen.

gruss
  andre

edit: ich hatte auf pgm2 ebene ein codemiror verzeichnis angelegt und dort die relevanten teile rein getan.
        beim colorpicker war rudi das so lieber.
       
        ins edit files auch noch eingebaut das je nach extension das passende mode .js geladen wird.
« Letzte Änderung: 19 Februar 2014, 17:24:43 von justme1968 »
FHEM5.4,DS1512+,2xCULv3,DS9490R,HMLAN,2xRasPi
CUL_HM:HM-LC-Bl1PBU-FM,HM-LC-Sw1PBU-FM,HM-SEC-MDIR,HM-SEC-RHS
HUEBridge,HUEDevice:LCT001,LLC001,LLC006,LWL001
OWDevice:DS1420,DS18B20,DS2406,DS2423
FS20:fs20as4,fs20bs,fs20di
AKCP:THS01,WS15
CUL_WS:S300TH

Offline betateilchen

  • Developer
  • Hero Member
  • ****
  • Beiträge: 12775
  • Probleme sind auch keine Lösung.
Antw:Javascript Editor einbinden
« Antwort #20 am: 19 Februar 2014, 18:34:39 »
        ins edit files auch noch eingebaut das je nach extension das passende mode .js geladen wird.

ach... Du hast schon eine .js für die RSS-Layouts? 8) Dann brauch ich mir ja die Arbeit nicht machen...
Aus technischen Gründen befindet sich die Signatur auf der Rückseite dieses Beitrages.

Offline betateilchen

  • Developer
  • Hero Member
  • ****
  • Beiträge: 12775
  • Probleme sind auch keine Lösung.
Antw:Javascript Editor einbinden
« Antwort #21 am: 19 Februar 2014, 18:36:21 »
in der Darstellung des DEF-Edit-Fensters ist ohnehin auch im Original noch nicht alles rund. Eigentlich sollten die rows der Tabelle ja unterschiedlich gefärbt sein, aber das funktioniert nicht wirklich anhand der Entscheidung odd:even, die Zeile mit der textarea und die nachfolgende Zeile erscheinen mir immer gleich gefärbt.
Aus technischen Gründen befindet sich die Signatur auf der Rückseite dieses Beitrages.

Offline AHA1805

  • Full Member
  • ***
  • Beiträge: 499
Antw:Javascript Editor einbinden
« Antwort #22 am: 19 Februar 2014, 18:54:37 »
Wie cool ist das den :-)
kann ich diese Erweiterung bei mir auch einbinden?



Gruß und Dank
Hannes

Gesendet von Unterwegs mit Tapatalk 4
RIP 29.08.2016 --> RUHE IN FRIEDEN
In Gedanken Bei dir HANNES
Dein Bruder Gerd (Inputsammler) Vermisst dich Hannes (AHA1805)

Offline betateilchen

  • Developer
  • Hero Member
  • ****
  • Beiträge: 12775
  • Probleme sind auch keine Lösung.
Antw:Javascript Editor einbinden
« Antwort #23 am: 19 Februar 2014, 18:58:27 »
Ich denke, das wird über kurz oder lang per update kommen, nur Geduld.

@andre: das mit dem Einbinden in das toggle-Skript funktioniert prima.

Wir sollten das aber so gestalten, dass wir den codemirror-Teil nur dann an $pgm anhängen, wenn das bereits erwähnte Attribut gesetzt ist. Ich bin da grade dran, das zu testen.
Aus technischen Gründen befindet sich die Signatur auf der Rückseite dieses Beitrages.

Offline justme1968

  • Developer
  • Hero Member
  • ****
  • Beiträge: 15741
Antw:Javascript Editor einbinden
« Antwort #24 am: 19 Februar 2014, 19:18:13 »
rss gibt es einfach zum runterladen.

was ich noch nicht geschafft habe ist die zusammengepackte und komprimierte version zu verwenden.

mit der bekomme ich mit safari js fehler und der editor bekommt keinen keyboard focus.
FHEM5.4,DS1512+,2xCULv3,DS9490R,HMLAN,2xRasPi
CUL_HM:HM-LC-Bl1PBU-FM,HM-LC-Sw1PBU-FM,HM-SEC-MDIR,HM-SEC-RHS
HUEBridge,HUEDevice:LCT001,LLC001,LLC006,LWL001
OWDevice:DS1420,DS18B20,DS2406,DS2423
FS20:fs20as4,fs20bs,fs20di
AKCP:THS01,WS15
CUL_WS:S300TH

Offline betateilchen

  • Developer
  • Hero Member
  • ****
  • Beiträge: 12775
  • Probleme sind auch keine Lösung.
Antw:Javascript Editor einbinden
« Antwort #25 am: 19 Februar 2014, 19:23:03 »
rss gibts zum runterladen, das ist aber nicht das, was ich meinte. Ich meinte eine komplette Definionsdatei für die LAYOUT Dateien der fhem-RSS ;) (nicht so wichtig, werd ich irgendwann mal basteln)

Bei mir sieht das attributabhängig jetzt so aus:

  my $pgm = "Javascript:" .
             "s=document.getElementById('edit').style;".
             "s.display = s.display=='none' ? 'block' : 'none';".
             "s=document.getElementById('disp').style;".
             "s.display = s.display=='none' ? 'block' : 'none';";
    $pgm .= "s=document.getElementById('editarea');".
             "s.editor ? s.editor: s.editor = CodeMirror.fromTextArea(s, {lineNumbers: true,matchBrackets: true});"
         if AttrVal($FW_wname,'externalEditor',0);
Aus technischen Gründen befindet sich die Signatur auf der Rückseite dieses Beitrages.

Offline betateilchen

  • Developer
  • Hero Member
  • ****
  • Beiträge: 12775
  • Probleme sind auch keine Lösung.
Antw:Javascript Editor einbinden
« Antwort #26 am: 19 Februar 2014, 19:25:42 »
was ich noch nicht geschafft habe ist die zusammengepackte und komprimierte version zu verwenden.
mit der bekomme ich mit safari js fehler und der editor bekommt keinen keyboard focus.

Ich verstehe Dein Problem grade nicht, ich kann das hier problemlos auch in Safari nutzen - gerade getestet.
Aus technischen Gründen befindet sich die Signatur auf der Rückseite dieses Beitrages.

Offline justme1968

  • Developer
  • Hero Member
  • ****
  • Beiträge: 15741
Antw:Javascript Editor einbinden
« Antwort #27 am: 19 Februar 2014, 19:29:32 »
ich hatte mit rss schon das definitionsfile gemeint um die fhem css files richtig zu highligten. nicht das codemirror.css. oder meinst du mit definitionsdatei etwas anderes und wie reden aneinander vorbei?

ich probiere es noch mal sobald mein Internet wieder geht.
FHEM5.4,DS1512+,2xCULv3,DS9490R,HMLAN,2xRasPi
CUL_HM:HM-LC-Bl1PBU-FM,HM-LC-Sw1PBU-FM,HM-SEC-MDIR,HM-SEC-RHS
HUEBridge,HUEDevice:LCT001,LLC001,LLC006,LWL001
OWDevice:DS1420,DS18B20,DS2406,DS2423
FS20:fs20as4,fs20bs,fs20di
AKCP:THS01,WS15
CUL_WS:S300TH

Offline betateilchen

  • Developer
  • Hero Member
  • ****
  • Beiträge: 12775
  • Probleme sind auch keine Lösung.
Antw:Javascript Editor einbinden
« Antwort #28 am: 19 Februar 2014, 19:46:01 »
wir reden aneinander vorbei, was das Thema RSS angeht  8)
Aus technischen Gründen befindet sich die Signatur auf der Rückseite dieses Beitrages.

Offline betateilchen

  • Developer
  • Hero Member
  • ****
  • Beiträge: 12775
  • Probleme sind auch keine Lösung.
Antw:Javascript Editor einbinden
« Antwort #29 am: 19 Februar 2014, 20:14:35 »
So... bei mir läuft die 01_FHEMWEB jetzt sauber und (per Attribut steuerbar) wahlweise mit externem Editor oder mit dem Standard-Textfeld für die Eingabe.
Integriert für das DEF und für den Bereich "edit files".

(http://up.picr.de/17416023hk.png)

(http://up.picr.de/17416004ah.png)

Offen ist derzeit noch die Frage, wie man die Themes auswählbar machen will. Ich arbeite aus Kontrastgründen generell mit blackboard.


Index: 01_FHEMWEB.pm
===================================================================
--- 01_FHEMWEB.pm (Revision 4990)
+++ 01_FHEMWEB.pm (Arbeitskopie)
@@ -21,6 +21,7 @@
 sub FW_fileList($);
 sub FW_parseColumns();
 sub FW_htmlEscape($);
+sub FW_linkCodemirror;
 sub FW_logWrapper($);
 sub FW_makeEdit($$$);
 sub FW_makeImage(@);
@@ -128,6 +129,7 @@
     defaultRoom
     endPlotNow:1,0
     endPlotToday:1,0
+    externalEditor:1,0
     fwcompress:0,1
     hiddengroup
     hiddenroom
@@ -1571,9 +1573,15 @@
     FW_pO     FW_textfieldv("saveName", 30, "saveName", $fileName);
     FW_pO     "<br><br>";
     FW_pO     FW_hidden("cmd", "style save $fileName");
-    FW_pO     "<textarea name=\"data\" cols=\"$ncols\" rows=\"30\">" .
+    FW_pO     "<textarea id=\"data\" name=\"data\" cols=\"$ncols\" rows=\"30\">" .
                 "$data</textarea>";
     FW_pO "</form>";
+
+    FW_linkCodemirror if AttrVal($FW_wname,'externalEditor',0);
+    FW_pO "<script>var editor = CodeMirror.fromTextArea(document.getElementById(\"data\"), ".
+          "{theme: \"blackboard\", perl: true, lineNumbers: true, matchBrackets: true, closeBrackets: true});</script>"
+      if AttrVal($FW_wname,'externalEditor',0);
+
     FW_pO "</div>";
 
   } elsif($a[1] eq "save") {
@@ -1981,6 +1989,11 @@
              "s.display = s.display=='none' ? 'block' : 'none';".
              "s=document.getElementById('disp').style;".
              "s.display = s.display=='none' ? 'block' : 'none';";
+    $pgm .= "s=document.getElementById('editarea');".
+             "s.editor ? s.editor: s.editor = CodeMirror.fromTextArea(s, ".
+             "{theme: 'blackboard', perl: true, lineNumbers: true, matchBrackets: true, closeBrackets: true});"
+         if AttrVal($FW_wname,'externalEditor',0);
+
   FW_pO "<td>";
   FW_pO "<a onClick=\"$pgm\">$n</a>";
   FW_pO "</td>";
@@ -1998,13 +2011,23 @@
   FW_pO       FW_hidden("detail", $name);
   my $cmd = "modify";
   my $ncols = $FW_ss ? 30 : 60;
-  FW_pO      "<textarea name=\"val.${cmd}$name\" ".
+  FW_pO      "<textarea id=\"editarea\" name=\"val.${cmd}$name\" ".
                 "cols=\"$ncols\" rows=\"10\">$val</textarea>";
   FW_pO     "<br>" . FW_submit("cmd.${cmd}$name", "$cmd $name");
   FW_pO   "</form></div>";
+  FW_linkCodemirror if AttrVal($FW_wname,'externalEditor',0);
   FW_pO  "</td>";
 }
 
+sub FW_linkCodemirror{
+  FW_pO "<link rel=\"stylesheet\" href=\"$FW_ME/codemirror/lib/codemirror.css\">";
+  FW_pO "<script type=\"text/javascript\" src=\"$FW_ME/codemirror/lib/codemirror.js\"></script>";
+  FW_pO "<link rel=\"stylesheet\" href=\"$FW_ME/codemirror/theme/blackboard.css\">";
+  FW_pO "<script type=\"text/javascript\" src=\"$FW_ME/codemirror/addon/edit/closebrackets.js\"></script>";
+  FW_pO "<script type=\"text/javascript\" src=\"$FW_ME/codemirror/addon/edit/matchbrackets.js\"></script>";
+  FW_pO "<script type=\"text/javascript\" src=\"$FW_ME/codemirror/mode/perl/perl.js\"></script>";
+  return;
+}
 
 sub
 FW_roomStatesForInform($)

« Letzte Änderung: 19 Februar 2014, 20:52:17 von betateilchen »
Aus technischen Gründen befindet sich die Signatur auf der Rückseite dieses Beitrages.

 

decade-submarginal