TinyMCE Codebeispiele bearbeiten

Vielleicht kannst Du den Code-Language selbst hinzufügen?
https://www.tiny.cloud/docs-4x/plugins/codesample/
https://www.tiny.cloud/docs/plugins/opensource/codesample/

Zitat von Wszene

Kann mir da keiner Helfen?

Kann durchaus passieren. Ist ja auch sehr speziell. Ich glaube nicht, dass Dir das hier jemand auf dem Tablett servieren kann.

Ich würde an Deiner Stelle die verlinkten Seiten mit dem Dateisystem des TinyMCE Plugin in Joomla vergleichen und versuchen die Änderungen dort vorzunehmen. Notfalls lokal mit der Suche im Codeeditor.

chatGPT weiss was, vielleicht nützt dir das:

html

<link rel="stylesheet" href="/media/system/css/prism.css">
<script src="/media/system/js/prism.js"></script>

json

codesample_languages: [    {text: 'HTML/XML', value: 'markup'},    {text: 'JavaScript', value: 'javascript'},    {text: 'CSS', value: 'css'},    {text: 'Python', value: 'python'},    {text: 'Java', value: 'java'},    {text: 'Bash', value: 'bash'}
]

Eine Möglichkeit wäre, den wunsch als issue bei joomla anzuregen. Hier https://github.com/joomla/joomla-cms/issues oder auf https://issues.joomla.org. Ob das aber im allgemeinen Interesse ist?

media/vendor/tinymce/plugin.js ..vermute ich

Schaue in

media/vendor/tinymce/plugins/codesample/plugin.js

die Zeilen 2243 bis 2285 an:

    const getLanguages = editor => {
      const defaultLanguages = [
        {
          text: 'HTML/XML',
          value: 'markup'
        },
        {
          text: 'JavaScript',
          value: 'javascript'
        },
        {
          text: 'CSS',
          value: 'css'
        },
        {
          text: 'PHP',
          value: 'php'
        },
        {
          text: 'Ruby',
          value: 'ruby'
        },
        {
          text: 'Python',
          value: 'python'
        },
        {
          text: 'Java',
          value: 'java'
        },
        {
          text: 'C',
          value: 'c'
        },
        {
          text: 'C#',
          value: 'csharp'
        },
        {
          text: 'C++',
          value: 'cpp'
        }
      ];

ebenso natürlich auch in media/vendor/tinymce/plugins/codesample/plugin.min.js enthalten!

Und wie man solche Core-js-Dateien updatesicher überschreiben kann siehe z.B.:

JS-Overrides für /media/vendor Dateien

Der Override muss im Admin Template gemacht werden

Ich bin nur ein Laie und habe mir das jetzt einmal etwas genauer angeschaut.

Wenn ich mich nicht täusche wird das codesample-Plugin-Script ja wohl vom TinyMCE-Editor geladen

und kommt nicht per Web Asset Manager.

Da ich mich in Javascript nur wenig auskenne würde ich es wohl so lösen wenn kein besserer Vorschlag kommt:

Lösung 1:

Template-Override bei dem die beiden Core-Dateien einfach jedesmal überschrieben werden mit meiner Datei mit dem gewünschten Code sobald das Editor-Formular geöffnet wird z.B. per:

chdir('media/vendor/tinymce/plugins/codesample/');
copy ('meincodesample.plugin.js','plugin.min.js');
copy ('meincodesample.plugin.js','plugin.js');

fürs Frontend mit Cassiopeia müßte man obigen Code dort entsprechend in einem Template-Override ergänzen:

‎/templates/cassiopeia/html/com_content/form/edit.php

Die Datei meincodesample.plugin.js mit dem geänderten Code müßte dazu dann dort sein:

/media/vendor/tinymce/plugins/codesample/meincodesample.plugin.js

Alternativ Lösung 2 :

Erstelle einen Dateiordner für ein "eigenes TinyMCE-Plugin":

z.B. /media/vendor/tinymce/plugins/meincodesample

Kopiere dort hinein die identischen Dateien wie im Dateiodner

media/vendor/tinymce/plugins/codesample/

Ergänze darin die Dateien plugin.min.js und plugin.js mit deinem Code.

Lösche darin plugin.min.js.gz wenn du keine entsprechende diesbezügliche komprimierte Datei erstellst.

Gehe ins Backend zu

System -> Plugins -> Editor – TinyMCE

Trage bei im Feld bei 'Eigene Plugins' folgendes ein:

meincodesample

Trage im Feld bei 'Eigene Buttons' folgendes ein:

meincodesample

Wichtig ist das beide Einträge identisch wie der neue Dateiordner bennant werden!

Speichern und testen.

Es wird dadurch nun zusätzlich auch dein eigenes TinyMCE-Plugin geladen und gewinnt wohl

weil es erst nach dem TinyMCE-Core-Plugin geladen wird...

Zitat von Wszene

Ich habe deine Lösung 2 ausprobiert

Die Frage die ich mir stelle wie ich dann den Button im Editor reinbekomme

Ist weiterhin der selbe Button wie schon von dir in #1 genannt und abgebildet.

Zitat von Wszene

Bei deiner Lösung 1 hätte ich die Frage

Wo muss ich den Code einfügen damit die Dateien überschrieben werden

Der konkrekte Dateiordner hängt von deinem Template ab welches bisher von dir nicht genannt und verlinkt wurde!

Fürs Frontend mit Cassiopeia habe ich dir ja den genauen Dateipfad bereits angegeben.

Geht es um die Verwendung des TinyMCE-Editors im Frontend oder Backend?

Eventuell nützlich:

joomla-cms/components/com_content/tmpl/form/edit.php at 5.1.0 · joomla/joomla-cms

Home of the Joomla! Content Management System. Contribute to joomla/joomla-cms development by creating an account on GitHub.

github.com

Der Code in #13 sollte man aber ergänzen damit eine möglicherweise durch ein Joomla-Update wieder vorhandene plugin.min.js.gz in media/vendor/tinymce/plugins/codesample/ auch gelöscht wird...

In den Plugin-Eistellungen

Keine Externe Plugin URL´s eintragen.(Zeile komplett löschen)

Deine

/media/vendor/tinymce/plugins/ws_codesample/plugin.min.js

scheint fehlerhaft zu sein, weil sie auch bei mir nach einbau nicht funktioniert, möglicherweise Datei-Codierung fehlerhaft.

Daher am besten den Inhalt der geänderten plugin.js z.B. mit einem Online-Minimierer(Minifizierer) neu minimieren und z.B. in eine leere oder neue Datei

/media/vendor/tinymce/plugins/ws_codesample/plugin.min.js

einfügen.

Browser und Joomla-Cache danach natürlich löschen.

Wenn es dann immer noch nicht geht lösche:

https://wszene.de/media/vendor/tinymce/plugins/codesample/plugin.min.js.gz

und schaue ob der Button im Editor weiterhin zur Verfügung steht und ob er nun die gewünschte Funktionalität besitzt.