TinyMCE Quelltext Syntax Highlighting

Ein CMSimple Support Forum für deutsch sprechende Nutzer und Entwickler
Caravaner
Posts: 112
Joined: Sat Oct 05, 2019 5:20 pm
Location: Wadgassen (Saarland)
Contact:

Re: TinyMCE Quelltext Syntax Highlighting

Post by Caravaner » Fri Nov 15, 2019 9:12 pm

Ja, so habe ich das bemacht. Das Fenster des Quelltexteditors bleibt aber leer.
Ich bin > 69 und lerne fast jeden Tag was Neues. Dafür vergesse ich was Anderes.
Der Trick ist, sich nicht darüber aufzuregen und morgen zu lernen, was man vorgestern vergessen hat. ;)
https://lembach-cmsimple.de

lck
Posts: 2963
Joined: Wed Mar 23, 2011 11:43 am
Contact:

Re: TinyMCE Quelltext Syntax Highlighting

Post by lck » Fri Nov 15, 2019 9:21 pm

Und den Ordner codemirror unter ./plugins/tinymce4/tinymce/plugins/ ?
Codeeditor unter ./plugins/.
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“   👉 Ludwig's XH-Templates for MultiPage & OnePage

Caravaner
Posts: 112
Joined: Sat Oct 05, 2019 5:20 pm
Location: Wadgassen (Saarland)
Contact:

Re: TinyMCE Quelltext Syntax Highlighting

Post by Caravaner » Fri Nov 15, 2019 9:37 pm

Sorry, da hat der Copyjob Fehler gemacht. Jetzt nachgeholt, Server neu gestartet, Browser gewechselt (leerer Cache) und mächtig gefreut!!!!
Danke für die Hilfe!

Frage
Ich hab das Template fhs-basic adaptiert -> http://template.lembach-kr.de/?Home (edit: korrektur des Link)
und würde etwas ähnliches gerne mit simpleblue tun. Auf der Website des Templates steht, dass ein Anbieten zum Download von anderen Websites nicht erlaubt ist (vermutlich wegen der Updates). Wenn meine Bastelei erfolgreich verläuft, wo kann ich das Ergebnis den Usern zur Verfügung stellen? Oder hast Du was dagegen, wenn ich an Deiner Arbeit "rum mache"? Würdest Du, vorausgesetz, es gefällt Dir, was ich vor habe, das Ergebnis auf deiner Seite einstellen?
Last edited by Caravaner on Mon Nov 18, 2019 6:44 pm, edited 1 time in total.
Ich bin > 69 und lerne fast jeden Tag was Neues. Dafür vergesse ich was Anderes.
Der Trick ist, sich nicht darüber aufzuregen und morgen zu lernen, was man vorgestern vergessen hat. ;)
https://lembach-cmsimple.de

lck
Posts: 2963
Joined: Wed Mar 23, 2011 11:43 am
Contact:

Re: TinyMCE Quelltext Syntax Highlighting

Post by lck » Sat Nov 16, 2019 4:21 pm

Caravaner wrote:
Fri Nov 15, 2019 9:37 pm
Sorry, da hat der Copyjob Fehler gemacht.
:)
Caravaner wrote:
Fri Nov 15, 2019 9:37 pm
Ich hab das Template fhs-basic adaptiert -> template.lembach-kr.de
Falsche Verlinkung, bitte korrigieren.
Caravaner wrote:
Fri Nov 15, 2019 9:37 pm
... und würde etwas ähnliches gerne mit simpleblue tun. Auf der Website des Templates steht, dass ein Anbieten zum Download von anderen Websites nicht erlaubt ist (vermutlich wegen der Updates). Wenn meine Bastelei erfolgreich verläuft, wo kann ich das Ergebnis den Usern zur Verfügung stellen?
Das hat seinen Sinn und bezieht sich auf das Original-Template, in diesem Fall also SimpleBlue. Wenn das an mehreren Stellen zum Download angeboten würde, wüsste keiner wo die aktuellste Version zu finden ist.
Du kannst es gerne adaptieren und selber zum Download anbieten, mit dem Präfix simpleblue-....
Das Template ist von 2015 und wurde von mir auch für XH 1.7.x angepasst, aber eine Auffrischung könnte es gut vertragen. Angefangen von der Schriftart bis hin zur mobilen Navigation usw..
Bin gespannt. Viel Spaß!
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“   👉 Ludwig's XH-Templates for MultiPage & OnePage

manu
Posts: 1086
Joined: Wed Jun 04, 2008 12:05 pm
Location: St. Gallen - Schweiz
Contact:

Re: TinyMCE Quelltext Syntax Highlighting

Post by manu » Mon Nov 18, 2019 9:39 am

frase wrote:
Fri Nov 15, 2019 4:26 pm
Kurz-Feedback nach Schnelltest:
funzt!
Und so schön schmal!
manu wrote:
Fri Nov 15, 2019 3:36 pm
Diese Version könnte ich mir für den core vorstellen.
Hm, dann müsste Codeeditor_XH ebenfalls in den Core - womit ich auch einverstanden wäre.

Ideal wäre:
Deine Dateien mit dem Codeeditor-Plugin zusammen ausliefern, ist sowieso davon abhängig.
In der Plugin-Konfiguration müsste nur der Hilfetext: "Ob Codeeditor_XH für die Bearbeitung von Templates und Stylsheets aktiviert ist." geändert bzw. erweitert werden in:
"Ob Codeeditor_XH für die Bearbeitung von Templates, Stylsheets und Inhalten aktiviert ist."
Und man müsste es eben dort auch für den Tiny ausschalten können. ???
...
Ich finde, das Codeeditor Plugin gehört nicht in den Core. Es ist ja jedermann Geschmackssache, ob er diesen in der Installation haben will. Das Plugin kann ja einfach geladen werden. Ein Hinweis in der Hilfe Datei wie es geht, wäre dann hilfreich.
frase wrote:
Fri Nov 15, 2019 4:26 pm
Die Themes wirken bei der Content-Bearbeitung nicht - oder?
Hier noch ein kleiner Update zu ./tinymce/plugins/codemirror/source.html. Damit kann das theme in der init datei gewählt werden:

Code: Select all

  codemirror:{
    config: {
      theme: 'zenburn'
    }
  }
Die Einstellung direkt aus der codeeditor.config zu holen, bedingt Anpassungen am tinymce plugin selber. Beim tinymce4 mag ich keine Modifikationen mehr machen. Bei beständiger Nachfrage beim tinymce5 kann ich mir es überlegen.
You do not have the required permissions to view the files attached to this post.

frase
Posts: 5085
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Re: TinyMCE Quelltext Syntax Highlighting

Post by frase » Mon Nov 18, 2019 11:01 am

So, ich habe jetzt ziemlich lange rumfummeln müssen, bis ich begriff, dass man beides tun muss:
Die source.html ersetzen UND die Änderung in der init-Datei durchführen (mit Komma!). Sonst gibt es wieder ein leeres Fenster.
manu wrote:
Mon Nov 18, 2019 9:39 am
Ich finde, das Codeeditor Plugin gehört nicht in den Core.
Ja, das versuchte ich mit dem "Hm ..." auszudrücken.

Du möchtest also das Tiny-codemirror-Plugin und die init-Datei standardmäßig mit dem TinyMCE ausliefern.
Dann müsste es eben für das Tiny-Plugin eine Hilfe-Datei geben, in der das Vorgehen bzw. das nötige Codeeditor_XH beschrieben wird.
manu wrote:
Mon Nov 18, 2019 9:39 am
Die Einstellung direkt aus der codeeditor.config zu holen, bedingt Anpassungen am tinymce plugin selber. Beim tinymce4 mag ich keine Modifikationen mehr machen. Bei beständiger Nachfrage beim tinymce5 kann ich mir es überlegen.
Verstehe ich. Für Tiny4 ist das nicht nötig.

Caravaner
Posts: 112
Joined: Sat Oct 05, 2019 5:20 pm
Location: Wadgassen (Saarland)
Contact:

Re: TinyMCE Quelltext Syntax Highlighting

Post by Caravaner » Mon Nov 18, 2019 7:47 pm

lck wrote:
Sat Nov 16, 2019 4:21 pm
Das Template ist von 2015 und wurde von mir auch für XH 1.7.x angepasst, aber eine Auffrischung könnte es gut vertragen. Angefangen von der Schriftart bis hin zur mobilen Navigation usw..
Bin gespannt. Viel Spaß!
Danke, den Link habe ich gefixt. Da sich viel kompetentere Leute als ich es bin dem Maintenance-Mode angenommen haben, wird das Template mein nächstes Projekt. Allerdings ohne mobile Navigation. Das geht weit über mein Wissen hinaus. Z. Zt. bin ich gerade an der Version 2 von fhs-basic-all. Ergebnis dann wieder auf http://template.lembach-kr.de/?Home.
Ich habe (für mich) im TinyMCE das Plugin TOC aktiviert und ein minimales CSS dafür geschrieben. Dieses Plugin gibt das Inhaltsverzeichnis der aktuellen Seite aus (h1,h2,h3 ...). Frage: mit welchem Funktionsaufruf im Template kann ich so eine Inhaltsliste ausgeben? Diese Liste hatte ich eigentlich im Bilck, als ich in der fhs-basic-all rechts oberhalb der Newsboxen das Inhaltverzeichnis der Folgeseiten eingebaut habe.
init_fontawesome-krl.js:

Code: Select all

{
  selector: "%SELECTOR%",
  theme: "modern",
  skin: "lightgray",
  toolbar_items_size: "small",
  menubar: true,
  plugins: [
    "advlist anchor autolink autosave charmap codemirror codesample colorpicker contextmenu emoticons fontawesome fullscreen",
    "help hr image imagetools importcss insertdatetime link lists media nonbreaking noneditable paste preview",
    "save searchreplace table textcolor toc visualblocks visualchars wordcount"
  ],
  external_plugins: {
    "fontawesome": "%CMSIMPLE_ROOT%plugins/fa/editors/tinymce4/fontawesome/plugin.min.js"
  },
  menu: [
    {"title":"Edit", "items":"undo redo | cut copy paste pastetext | selectall | searchreplace"},
    {"title":"Insert", "items":"media link image | charmap hr anchor pagebreak insertdatetime nonbreaking template"},
    {"title":"View", "items":"visualchars visualblocks visualaid | preview fullscreen | code"},
    {"title":"Format", "items":"bold italic underline strikethrough superscript subscript | formats | removeformat"},
    {"title":"Table", "items":"inserttable tableprops | cell row column"}
  ],
  toolbar1: "save | fullscreen code | fontselect fontsizeselect formatselect styleselect | bullist numlist | toc",
  toolbar2: "bold italic | underline strikethrough | subscript superscript | forecolor backcolor | searchreplace cut copy paste pastetext | alignleft aligncenter alignright alignjustify | outdent indent | table",
  toolbar3: "undo redo | link unlink anchor | image media | hr nonbreaking removeformat visualchars | charmap emoticons fontawesome | blockquote visualblocks insertdatetime | help | preview",
  toolbar4: "",
  image_advtab: true,
  image_title: true,
  file_browser_callback: "%FILEBROWSER_CALLBACK%",
  content_css: "%STYLESHEET%,%CMSIMPLE_ROOT%plugins/fa/css/font-awesome.min.css",
  importcss_append:true,
  style_formats_autohide: true,
  importcss_selector_filter: /(?:([a-z0-9\-_]+))(\.[a-z0-9_\-\.]+)$/i,
  %LANGUAGE%
  element_format: "%ELEMENT_FORMAT%",
  block_formats: "%HEADERS%;p=p;div=div;code=code;pre=pre;dt=dt;dd=dd",
  "insertdatetime_formats": ["%d.%m.%Y", "%H:%M:%S", "%I:%M:%S %p", "%D"],
  relative_urls: true,
  convert_urls: false,
  entity_encoding: "raw",
  noneditable_noneditable_class: 'fa',
  extended_valid_elements: 'span[*]'
}
Ergänzung im stylesheet des Templates

Code: Select all

/* Inhaltsverzeichnis */
.mce-toc {
/*	    	border-radius: 5px;*/
		box-shadow: 0.5em 0.5em 0.8em -0.3em silver;
		margin-right: 0.8em;
		margin-bottom: 0.8em
		padding: 0.4em;
	    background-color: #f3f3f3; 
    	border: 1px solid #ddd; 
		font-family: 'Open Sans', sans-serif;
        color: #555;
		var(--fontcolor);
		float: left;
		width: -moz-fit-content;
		/* Firefox */
		width: -webkit-fit-content;
		/* Chrome */
		width: fit-content;
}
.mce-toc h2, .mce-toc h2:hover {
        font-weight: 600;
        margin: 0em 0 0 0;
        line-height: normal;
        font-size: 1.5em;
		border: 0px hidden;
}
.mce-toc a {
        color: #555;
		color: var(--fontcolor);
        text-decoration: none;
		border: 0px;
		padding: 0 0.3em 0 0.3em;
}
.mce-toc a:hover {
/*		font-weight: bold;	*/
		box-shadow: 5px 5px 10px silver;
		border-radius: 3px;
}
.mce-toc ul {
        list-style: none inside;
        margin: 0 0 0.75em 0.75em;
		padding: 0.2em;
}
.mce-toc ul li {
        font-weight: 600;
        font-size: 1.20em;
}
.mce-toc ul ul li {
        font-weight: 500;
        font-size: 1.0em;
}
.mce-toc ul ul ul li {
        font-weight: 400;
        font-size: 0.8em;
}
Ich bin > 69 und lerne fast jeden Tag was Neues. Dafür vergesse ich was Anderes.
Der Trick ist, sich nicht darüber aufzuregen und morgen zu lernen, was man vorgestern vergessen hat. ;)
https://lembach-cmsimple.de

manu
Posts: 1086
Joined: Wed Jun 04, 2008 12:05 pm
Location: St. Gallen - Schweiz
Contact:

Re: TinyMCE Quelltext Syntax Highlighting

Post by manu » Tue Nov 19, 2019 8:07 am

Caravaner wrote:
Mon Nov 18, 2019 7:47 pm
...
Ich habe (für mich) im TinyMCE das Plugin TOC aktiviert und ein minimales CSS dafür geschrieben. Dieses Plugin gibt das Inhaltsverzeichnis der aktuellen Seite aus (h1,h2,h3 ...). Frage: mit welchem Funktionsaufruf im Template kann ich so eine Inhaltsliste ausgeben? Diese Liste hatte ich eigentlich im Bilck, als ich in der fhs-basic-all rechts oberhalb der Newsboxen das Inhaltverzeichnis der Folgeseiten eingebaut habe.
...

Hast Du Dir schon mal Franks Anchorific Pure angeschaut? Das macht das so nebenbei.
Ist hier wohl etwas off-topic. Mach doch einen neuen Tret auf.

manu
Posts: 1086
Joined: Wed Jun 04, 2008 12:05 pm
Location: St. Gallen - Schweiz
Contact:

Re: TinyMCE Quelltext Syntax Highlighting

Post by manu » Thu Nov 21, 2019 11:14 am

Ich habe noch einen Fehler entdeckt. Passiert, wenn in der init_ Datei keine codemirror.config definiert ist. Ist hier behoben.

Post Reply