TinyMCE Codebeispiele bearbeiten

Wszene · 9. April 2024

Hallo Zusammen,

Ich suche eine Möglichkeit im TinyMCE die "Codebeispiel einfügen/bearbeiten" Liste zu bearbeiten

Ich würde da gern z.B. "bash" mit reinhaben

Kann man das irgendwo angeben?

Danke im Voraus

Gruß

Marcel

Indigo66 · 9. April 2024

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/

Wszene · 9. April 2024

Das wäre schön

kannst du mir evtl. sagen in welcher Datei ich das im Joomla 5 machen müsste?

Wszene · 13. April 2024

Kann mir da keiner Helfen?

Das wäre sehr schade

Indigo66 · 15. April 2024

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.

firstlady · 15. April 2024

chatGPT weiss was, vielleicht nützt dir das:

Spoiler anzeigen

Adding Bash syntax highlighting to the TinyMCE editor in Joomla involves modifying the TinyMCE plugin settings within the Joomla administration panel, and ensuring that the necessary PrismJS components are available. Here’s how you can go about it:

Step 1: Check Joomla TinyMCE Plugin Settings

Log in to the Joomla Admin Panel.
Navigate to Extensions > Plugins.
Search for "Editor - TinyMCE" and click on it to open the plugin settings.

Step 2: Modify TinyMCE to Include PrismJS (if not included)

If Joomla's TinyMCE setup does not already include PrismJS, you might need to manually add it.

Download PrismJS: Go to the PrismJS website and download a custom build that includes Bash (listed as bash or shell on the website). Make sure to include the "Minified" version for better performance.
Upload the PrismJS files: Place the downloaded prism.js and prism.css files into your Joomla site’s media directory (usually media/system/js/ and media/system/css/ respectively).
Include PrismJS in Your Template: Edit the HTML header of your Joomla template to include the PrismJS stylesheet and script. You can do this by editing the template files directly, often found under Extensions > Templates > Templates. Add the following lines within the <head> tag of your template's index.php file:

Code

html

Code

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

Step 3: Add Bash to TinyMCE’s Code Sample Plugin

Within the TinyMCE plugin settings in Joomla, you can specify the languages you want to appear in the code sample tool.

Find the Custom Configuration: In the TinyMCE plugin settings, there's usually a field for custom configuration or initialization. This field allows you to add extra JSON configuration to the TinyMCE initialization.
Add Bash to the Initialization:

Code

json

Code

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'}
]

Place this JSON snippet into the appropriate configuration field.

Step 4: Test the Configuration

Save the Plugin Settings: After modifying the settings, save them and clear any caches that Joomla or your browser might be using.
Test in an Article: Open an article or a custom HTML module in Joomla and try inserting a code sample. Check if Bash appears in the dropdown and test by inserting some Bash code.

Troubleshooting

PrismJS Not Working: Ensure that the paths to the prism.js and prism.css files are correct in your template and that they are loading correctly in the browser (you can check this via the browser's developer tools).
Changes Not Reflecting: Clear Joomla’s cache from System > Clear Cache, and also clear your browser’s cache.

By following these steps, you should be able to add Bash syntax highlighting to the TinyMCE editor used in Joomla, enhancing the functionality of the content creation process.

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?

Wszene · 16. April 2024

Zitat von firstlady

Find the Custom Configuration: In the TinyMCE plugin settings, there's usually a field for custom configuration or initialization. This field allows you to add extra JSON configuration to the TinyMCE initialization.

Genau die Datei suche ich wo ich das eintragen kann

firstlady · 16. April 2024

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

Sieger66 · 16. April 2024

Schaue in

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

die Zeilen 2243 bis 2285 an:

Code

    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'
        }
      ];

Alles anzeigen

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

Wszene · 18. April 2024

vielen Dank Sieger66

Es hat funktioniert wenn ich die Änderungen in der media/vendor/tinymce/plugins/codesample/plugin.min.js vornehme

Zitat von Sieger66

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

JS-Overrides für /media/vendor Dateien

Leider hat das mit dem Override nicht so funktioniert

Ich bin wie folgt vorgegangen

- in meiner joomla.asset.json in meinem Template habe ich folgenden Code eingefügt

Code

{
            "name": "tinymce.codesample",
            "description": "Diese JS überschreiben wir die CodeSample für den Editor TinyMCE - ab Zeile 2246",
            "type": "script",
            "uri": "tinymce/codesample.plugin.js"
        },

- in der index.php habe ich folgendes eingefügt

Code

$wa->useScript('tinymce.codesample');

leider war das ohne Erfolg

muss ich das im Admin-Template auch einfügen?

Danke im Voraus

drmenzelit · 18. April 2024

Der Override muss im Admin Template gemacht werden

Wszene · 19. April 2024

Zitat von drmenzelit

Der Override muss im Admin Template gemacht werden

Leider hat das auch nicht funktioniert

Wenn ich die Änderungen direkt in der Datei gemacht werden funktioniert es aber leider nicht mit dem Override

Sieger66 · 20. April 2024

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:

Code

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...