Der seit TYPO3 8 verwendete RTE CKEditor kann sehr gut auf die eigenen Bedürfnisse konfiguriert werden. Unter ckeditor.com stehen zudem weitere Add-Ons zur Verfügung, mit denen sich der RTE bequem erweitern lässt. 

Ich habe mir das Beispiel Code-Snippet herausgegriffen. Hiermit kann ich - z.B. in diesem Beitrag - den Code bequem bereitstellen. 

In meinem SitePackage unter Configuration/Yaml/Rte/Plugins/codesnippet.yaml

 

editor:
  config:
    codeSnippet_theme: 'obsidian'
    codeSnippet_languages:
      bash: 'Bash'
      html: 'HTML'
      json: 'Json'
      diff: 'Diff'
      dockerfile: 'Dockerfile'
      javascript: 'JavaScript'
      php: 'PHP'
      css: 'CSS'
      scss: 'Scss'
      typoscript: 'TypoScript'
      yaml: 'Yaml'

 

die dann in der Konfigurationsdatei des RTE eingebunden wird. Diese liegt bei mir ebenfalls im SitePackage und dort unter Configuration/Yaml/Rte/Default.yaml:

 

imports:
  - { resource: "EXT:rte_ckeditor/Configuration/RTE/Processing.yaml" }
  - { resource: "EXT:rte_ckeditor/Configuration/RTE/Editor/Base.yaml" }
  - { resource: "EXT:rte_ckeditor/Configuration/RTE/Editor/Plugins.yaml" }
  - { resource: "EXT:sitepackage/Configuration/Yaml/Rte/Plugins/codesnippet.yaml" }

editor:
  config:
    contentsCss: ["EXT:rte_ckeditor/Resources/Public/Css/contents.css", "EXT:sitepackage/Resources/Public/Frontend/StyleSheet/rte.css"]
    stylesSet:
      - { name: 'Button Stil 1', element: 'a', attributes: { 'class': 'btn' } }
      - { name: 'Button Stil 2', element: 'a', attributes: { 'class': 'btn outline' } }
      - { name: 'Button Stil 3', element: 'a', attributes: { 'class': 'btn icon' } }
      - { name: 'Button Stil 4', element: 'a', attributes: { 'class': 'btn icon outline' } }
      - { name: 'Button Stil 5', element: 'a', attributes: { 'class': 'btn color-2' } }
      - { name: 'Button Stil 6', element: 'a', attributes: { 'class': 'btn color-2 outline' } }
      - { name: 'Button Stil 7', element: 'a', attributes: { 'class': 'btn color-2 icon' } }
      - { name: 'Button Stil 8', element: 'a', attributes: { 'class': 'btn color-2 icon outline' } }
      - { name: 'Schrift Stil 1', element: ['h1','h2','h3','h4','h5','h6','p'], attributes: { 'class': 'text-1' } }
      - { name: 'Schrift Stil 2', element: ['h1','h2','h3','h4','h5','h6','p'], attributes: { 'class': 'text-2' } }
      - { name: 'Schrift Stil 3', element: ['h1','h2','h3','h4','h5','h6','p'], attributes: { 'class': 'text-3' } }
      - { name: 'Schrift Stil 4', element: ['h1','h2','h3','h4','h5','h6','p'], attributes: { 'class': 'text-4' } }
      - { name: 'Schrift Stil 5', element: ['h1','h2','h3','h4','h5','h6','p'], attributes: { 'class': 'text-5' } }
      - { name: 'Schrift Stil 6', element: ['h1','h2','h3','h4','h5','h6','p'], attributes: { 'class': 'text-6' } }
      - { name: 'Schrift Stil 7', element: ['h1','h2','h3','h4','h5','h6','p'], attributes: { 'class': 'text-7' } }


    format_tags: 'p;h1;h2;h3;h4;h5;h6'

    toolbarGroups:
      - { name: clipboard, groups: [clipboard, undo] }
      - { name: insert, groups: [ insert ] }
      - { name: tools, groups: [ tools ] }
      - { name: document, groups: [ mode ] }
      - '/'
      - { name: basicstyles, groups: [ basicstyles, cleanup] }
      - { name: paragraph, groups: [ list, align ] }
      - { name: links }
      - '/'
      - { name: styles}
      - { name: codesnippet}

    justifyClasses:
      - text-left
      - text-center
      - text-right
      - text-justify

    extraPlugins:
      - justify
      - wordcount
      - autolink
      - codesnippet

    removeButtons:
      - Anchor
      - Underline
      - Strike
      - Image
      - Table
      - HorizontalRule

 

wobei die gewünschte Konfiguration natürlich vom Projekt und dem persönlichen Geschmack abhängt.

Damit ist im RTE backend-seitig die Arbeit schon getan; im RTE gibt es nun einen Code-Highlight-Button, der die verschiedenen Formate kennt. Im Frontend sieht das bislang noch etwas trist aus; aber nur noch kurz! 

PrismJS ist ein flexibler Syntax Highlighter und kann sehr einfach eingebunden werden. Unter https://prismjs.com steht eine leistungsfähige und konfigurierbare Bibliothek zur Verfügung, die z.B. per Node oder anderen Bundlern (oder auch "zu Fuß") eingebunden werden kann und auch verschiedene Templates mitbringt, wovon eines wohl auch Deinen Geschmack treffen wird.

Es werden zahlreiche Sprachen unterstützt, neben den gängigen Formaten auch kleine Kostbarkeiten wie Brainfuck. 

Kommentare (0)

Keine Kommentare gefunden!

Neuen Kommentar schreiben