Letzte Bearbeitung: 29. Januar 2024 um 13:46

Plugin Codemirror für Tinymce4

Ja, das ist richtig: ein Plugin für ein Plugin!

Worum geht es? Im Tinymce gibt es die Möglichkeit, statt im WYSIWYG-Modus den Seiteninhalt im Quelltext zu bearbeiten. Der von 'Haus aus' voreingestellte Qeuelltext-Editor ist recht primitiv (Text wird als nicht formatierter HTML-Text angezeigt).

Für diesen Quelltext-Editor gibt es eine Alternative: Codemirror

Vor einiger Zeit habe ich eine Website gefunden, auf der für mich verständlich beschrieben wird, wie ich dieses Plugin in Tinymce erfolgreich einbinde. Sie bezieht sich jedoch nicht auf die Variante TinyMCE_XH for CMSimple_XH!

Diese Website habe ich hier gefunden: https://www.prestashop.com/forums/topic/575856-tuturial-add-extended-codehtml-editor-to-tinymce/

Für den Fall das der Artikel offline gehen sollte habe ich einen Screenshot der Seite angefertigt (170 kB groß) und hier darunter steht eine Übersetzung des Textes.

Übersetzung des Artikels von rfourt auf https://www.prestashop.com/...-editor-to-tinymce/.

by rfourt
Verfasst am 6. Dezember 2016

Hallo Leute.

Dies ist ein einfacher 2-Schritt-Prozess, sehr schnell und einfach.

Ich habe nach einem Weg gesucht, um den Code mit dem TinyMCE-Editor besseren zu bearbeiten und beschlossen, aufs Ganze zu gehen und ein Code-Plugin für den TinyMCE-Editor zu installieren.

Nur getestet auf PS 1.6.x

Der TinyMCE Wysiwyg-Editor wird mit einem sehr einfachen HTML-Quelltext-Editor ausgeliefert, und dieses Plugin für TinyMCE macht die Bearbeitung von HTML-Quelltext zu einem angenehmeren Erlebnis. Es basiert auf dem hervorragenden CodeMirror Code-Editor, der von Marijn Haverbeke entwickelt wurde. Dieses Plugin bietet die folgenden Funktionen:

Syntaxhervorhebung von HTML-, Javascript- und PHP-Code
Zeilennummern
Hervorhebung der Zeile, die gerade bearbeitet wird
Automatische Einrückung
Viele Rückgängig/Wiederherstellen-Stufen
Suchen/Ersetzen-Funktionalität
etc. etc.

Also los geht's.

Schritt 1

Rufen Sie diesen Github-Link auf und laden Sie die neueste Version von resp.https://github.com/christiaan/tinymce-codemirror herunter.

1. Entpacken Sie den Inhalt in einen Ordner auf Ihrer Festplatte.

Sie sollten einige Ordner auf diese Weise haben:
+ plugins
   |+ codemirror
       | + codemirror-4.x (oder höher)
       | + langs

Gehen Sie in den Ordner "langs" und überprüfen Sie, ob Ihre Sprache dort enthalten ist. Wenn nicht, kopieren Sie einfach en.js und ändern Sie den Namen in Ihren Ländercode. (Wenn Sie übersetzen möchten, bearbeiten Sie diese Datei einfach).

2. Ändern Sie den Namen des Ordners "codemirror-4.x" in nur "codemirror".

3. Laden Sie den Inhalt des Plugins-Ordners in den TinyMce Plugins-Ordner auf Ihrem Server hoch. Dieser sollte sich hier befinden:
/js/tiny_mce/plugins/

4. Jetzt sollten Sie einen Ordner in Ihrem /js/tiny_mce/plugins/ Ordner haben, der einfach "codemirror" heißt.

Schritt 2

Nun ist es an der Zeit, die Einstellungsdatei Ihres tinyMCE-Editors zu bearbeiten. "tinymce.inc.js"

Bei mir befindet sich die Einstellungsdatei hier: /js/admin/tinymce.inc.js

1. Öffnen Sie diese Datei, und Sie sollten einen Code finden, der in etwa so aussieht:

default_config = { 
selector: ".rte" , 
plugins : "visualblocks, preview searchreplace print insertdatetime, hr charmap colorpicker anchor code link image paste pagebreak table contextmenu filemanager table code media autoresize textcolor emoticons improvedcode", 
toolbar2 : "newdocument,print,|,bold,italic,underline,|,strikethrough,superscript,subscript,|,forecolor,colorpicker,backcolor,|,bullist,numlist,outdent,indent", 
toolbar1 : "styleselect,|,formatselect,|,fontselect,|,fontsizeselect,", 
toolbar3 : "code,|,table,|,cut,copy,paste,searchreplace,|,blockquote,|,undo,redo,|,link,unlink,anchor,|,image,emoticons,media,|,inserttime,|,preview ", 
toolbar4 : "visualblocks,|,charmap,|,hr,|,improvedcode", 

Denken Sie daran, dass Ihre Datei davon abweichen kann, aber die Grundlagen sollten dieselben sein.

2. In dieser Datei sollten Sie nun in der Variable "plugins" das Wort "code" in "codemirror" ändern, das Sie zwischen "table" und "media" sehen sollten. Ändern Sie einfach das Wort "code" in "codemirror".
Ps: es gibt noch ein weiteres Wort "code" in den Toolbar-Variablen, ändern Sie nur das Wort "code" in der Zeile "plugins".

3. Fügen Sie direkt unter der Zeile "toolbar4" eine neue Zeile mit dem folgenden Code ein:

codemirror: {
            indentOnInit: true, // Whether or not to indent code on init.
            fullscreen: false,   // Default setting is false
            path: 'codemirror', // Path to CodeMirror distribution
            config: {           // CodeMirror config object
                mode: 'application/x-httpd-php',
                lineNumbers: true
            },
            width: 800,         // Default value is 800
            height: 600,        // Default value is 550
            jsFiles: [          // Additional JS files to load
                'mode/clike/clike.js',
                'mode/php/php.js'
            ]
        },

Stellen Sie sicher, dass Sie eine Sicherungskopie Ihrer Datei erstellen und diese dann speichern.

Gehen Sie in Ihre Adminoberfläche und bearbeiten Sie eine Seite im Quellcodemodus. Stellen Sie sicher, dass Sie Ihren Cache mit STRG+F5 leeren. Manchmal müssen Sie in die Einstellungen gehen und den Cache in Ihren Browsereinstellungen leeren, um die Änderungen sehen zu können.

Jetzt sollten Sie einen viel größeren Quelltext-Editor mit schönen Farben und Zeilen-Nummern haben.

Ich würde auch dringend empfehlen, VEIKAs Anleitung zur Erweiterung des Editors zu folgen, bevor Sie dieses Plugin hinzufügen. Auch der Kauf seines Plugins für noch mehr Erweiterungen wird empfohlen.

Erweitern Sie Ihren Editor kostenlos:
https://mypresta.eu/en/art/prestashop-16/extended-rich-text-editor.html

Ein großartiges und preiswertes Modul, um es noch weiter auszubauen.

https://mypresta.eu/modules/administration-tools/tinymce-pro-extended-rich-text-editor.html

Ich habe vor, dem Editor weitere Plugins hinzuzufügen, und denken Sie daran, alle Dateien, die Sie bearbeiten, zu sichern. Ich übernehme keine Verantwortung für Ihre Fehler.

Fröhliches Editieren. Ich weiß, dass mein Leben mit diesem Plugin sowieso ein wenig besser geworden ist.

Cheers.
/Rickard

Quelle des zu CMSimple passenden Codemirror-Plugins:
https://github.com/christiaan/tinymce-codemirror

Hier ist das Plugin eigentlich her: https://codemirror.net/index.html

Für das Plugin Tinymce4 für CMSimple sieht das aber etwas anders aus.

Damit der Quelltext-Editor Codemirror im Menü des Tinymce-Editors ausgewählt werden kann, muss das Menü / die Iconleiste des Tinymce angepasst werden. Siehe dazu auch diesen Artikel. Das Verzeichnis mit diesen Menü-Dateien liegt in diesem Pfad: ./plugins/tinymce4/inits/init_....js.

In der Tinymce4 – Konfiguration ./plugins/tinymce4/config/config.php unter dem ersten Punkt $plugin_cf['tinymce4']['init']="..." kann man die init_....js Datei auswählen, die das Aussehen des Editors festlegt (Dateinamen ohne »init_« am Anfang und ohne Dateierweiterung in der Konfigurationszeile eintragen).

Hier biete ich eine angepasste Version der init_fontawesome.js als zip-Archive zum Download an. Bei ihr steht in der 8. Zeile ...."charmap codemirror codesample".... und in der 44. - 51. Zeile:

codemirror:{
width: 1200,
height: 600,
fullscreen: false,
config:{
theme: 'elegant'
}
}

In der Tinymce4 – Konfiguration ./plugins/tinymce4/config/config.php muß dann unter dem ersten Punkt
$plugin_cf['tinymce4']['init']="fontawesome"
stehen.

Insgesamt sieht die Datei init_fontawesome.js so aus:

Dateiname: userfiles/downloads/tools-addons/init_fontawesome.js


{

  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 | blockquote toc",

  toolbar2: "visualchars | bold italic | underline strikethrough | subscript superscript | forecolor backcolor | searchreplace cut copy paste pastetext | alignleft aligncenter alignright alignjustify | table",

  toolbar3: "undo redo | link unlink anchor image media | bullist numlist outdent indent | hr nonbreaking removeformat visualblocks | insertdatetime emoticons charmap fontawesome | preview help ",

  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": ["%H:%M:%S", "%d.%m.%Y", "%I:%M:%S %p", "%D"],

  relative_urls: true,

  convert_urls: false,

  entity_encoding: "raw",

  noneditable_noneditable_class: 'fa',

  noneditable_noneditable_class: 'mceNonEditable',

  noneditable_leave_contenteditable : true,

  extended_valid_elements: 'span[*]',

  codemirror:{

    width: 1200,

    height: 600,

    fullscreen: false,

    config:{

      theme: 'elegant'

    }

  }

}

Im Plugin-Ordner von Tinymce4 gibt es schon den Ordner des Codemirror-Editors:
./plugins/tinymce4/tinymce/plugins/codemirror/

mit folgendem Inhalt:

|+ langs
|- plugin.js
|- plugin.min.js
|- source.html

Somit sollte hier keine Änderung erforderlich sein.

« vorige Seite | Seitenanfang | nächste Seite »