TinyMCE5 - Konfiguration & Optionen

In der Toolbar (Iconliste) gibt es bei der unten zu sehenden Beispielkonfiguration ein Problem.

Unter dem Punkt von ›styleselect‹ gibt es das Untermenü »Blöcke« mit den Punkten Absatz, Blockquote, Div und Pre. Der Eintrag Absatz wird von dem Zeichen ″überlagert. Keine Ahnung woher das kommt und wie man das los werden könnte.

  "plugins": ["lists advlist"],

Mit dieser Option können Sie bestimmte Markierungen für ungeordnete Listenelemente in das Standard-Symbolleisten-Steuerelement von bullist aufnehmen.

Typ: String

Standardwert: "default,circle,disc,square"

Mögliche Werte:

    default: der Standardstil Ihres Browsers
    circle: ein hohler Kreis
    disc: ein gefüllter Kreis
    square: ein gefülltes Quadrat

  "advlist_bullet_styles": "circle,disc,square",

Mit dieser Option können Sie bestimmte Markierungen für geordnete Listenelemente in das Standard-Symbolleistensteuerelement für Nummernlisten aufnehmen.

Typ: String

Standardwert: "default,lower-alpha,upper-alpha,lower-roman,upper-roman,lower-greek"

Mögliche Werte:

    default: der Standardstil Ihres Browsers
    upper-alpha: ASCII-Großbuchstaben, z. B. A, B, C, ... Z
    lower-alpha: ASCII-Kleinbuchstaben, z.B. a, b, c, ... z
    lower-roman: klein geschriebene römische Ziffern, z. B. i, ii, iii, iv, v ...
    upper-roman: große römische Ziffern, z. B. I, II, III, IV, V ...
    lower-greek: Kleinbuchstaben aus dem klassischen Griechisch (Alpha, Beta, Gamma), z. B. α, β, γ ...

  "advlist_number_styles": "lower-alpha,upper-alpha,lower-roman,upper-roman,lower-greek",

Siehe tiny docs ...

Dieses Plugin fügt der Symbolleiste eine Anker-/Lesezeichen-Schaltfläche hinzu, die einen Anker an der Einfügemarke des Editors einfügt. Es fügt auch den Menüpunkt Anker unter dem Menü Einfügen hinzu.
Wenn ein Benutzer auf die Ankerschaltfläche oder den Menüpunkt klickt, wird er in einem Dialogfeld aufgefordert, eine Zeichenfolge einzugeben. Die Zeichenkette wird an der Stelle, an der sich der Cursor befindet, als Anker-ID in den HTML-Code eingefügt. Ein Beispiel: Ein Benutzer setzt den Cursor an den Anfang von "Hello World", klickt auf die Anker-Schaltfläche und gibt "start" in das Dialogfeld ein. Der resultierende HTML-Code hat die Form von <p><a id="start"></a>Hallo, Welt!</p>.

 "plugins": ["anchor"],

 "toolbar": "anchor",

 "menubar": "insert",

-

Das Autosave-Plugin gibt dem Benutzer eine Warnung, wenn er ungespeicherte Änderungen im Editor hat und entweder:

• versucht, das Browserfenster oder die Registerkarte zu schließen, oder
• versucht, von der aktuellen Seite weg zu navigieren.

Das Autosave-Plugin fügt hinzu:

• einen Menüpunkt "Letzten Entwurf wiederherstellen" unter dem Menü "Datei" und
• eine optionale Schaltfläche in der Symbolleiste.

 "plugins": ["autosave"],

 "toolbar": "restoredraft",

Diese Einstellungen beeinflussen die Ausführung des Autosave-Plugins. Die hier beschriebenen Einstellungen wirken sich auf das Intervall, die Dauer und das Verhalten der lokal gespeicherten Entwürfe der aktuellen Editorinstanz aus.

Mit dieser Option können Sie festlegen, ob der Editor den Benutzer darauf hinweisen soll, dass er ungespeicherte Änderungen hat, wenn er versucht, das aktuelle Fenster zu schließen. Standardmäßig ist diese Option aktiviert; ein Beispiel für die Deaktivierung dieser Einstellung finden Sie weiter unten.

Typ: Boolean

Standardwert: true

Mögliche Werte: true, false

  "autosave_ask_before_unload": false,

Mit dieser Option können Sie die Zeit angeben, die der Editor zwischen dem Erstellen von Schnappschüssen des aktuellen Inhalts und deren Speicherung im lokalen Speicher warten soll. Die Syntax besteht darin, den Buchstaben s an das Ende eines Zahlenwerts anzuhängen. Zum Beispiel: "30s" für 30 Sekunden.

Typ: Zeichenfolge

Standardwert: "30s"

  "autosave_interval": "120s",

Dieses Plugin fügt dem Editor einen Dialog mit einer Karte der Unicode-Sonderzeichen hinzu, die nicht direkt über die Tastatur eingegeben werden können. Der Dialog kann über eine Schaltfläche in der Symbolleiste - charmap - oder über einen speziellen Menüpunkt mit der Bezeichnung Einfügen > Sonderzeichen aufgerufen werden.

 "plugins": ["charmap"],

 "toolbar": "charmap",

 "menubar": "insert",

Die voreingestellte Zuordnung von Unicode-Zeichen kann durch die nachstehenden Optionen außer Kraft gesetzt oder erweitert werden.

Intern ist die Zeichentabelle durch ein Array von Arrays definiert, wobei jedes Sub-Array ein einzelnes Zeichen darstellt. Das erste Element im Unterarray ist der Zeichencode. Das zweite Element ist ein Titel, der angezeigt wird, wenn der Mauszeiger über das angegebene Zeichen in der Karte bewegt wird. Der Zeichencode kann entweder dezimal, oktal oder hexadezimal sein (im Falle des oktalen oder hexadezimalen Formats sollte der Code mit 0 und 0x vorangestellt werden). Es wird erwartet, dass die Optionen im gleichen Format angegeben werden.

[
  ["160", "no-break space"],
  ["173", "soft hyphen"],
  ["34", "quotation mark"],
  ...
  ["8205", "zero width joiner"],
  ["8206", "left-to-right mark"],
  ["8207", "right-to-left mark"]
];

Mit dieser Option ist es möglich, die standardmäßige Zeichentabelle vollständig außer Kraft zu setzen. Dies kann ein Array oder eine Funktion sein, die ein Array im oben genannten Format zurückgibt.

Type: Array, Function

"charmap": [
  ["160", "no-break space"],
  ["173", "soft hyphen"],
  ["34", "quotation mark"],
  ...
  ["8205", "zero width joiner"],
  ["8206", "left-to-right mark"],
  ["8207", "right-to-left mark"]
  ["9749", "morning coffee"]
],

Diese Option bietet eine Möglichkeit, einige zusätzliche Zeichen an die Standard-Zeichentabelle anzuhängen. Dies kann ein Array oder eine Funktion sein, die ein Array im oben erwähnten Format zurückgibt.

Type: Array, Function

"charmap_append": [["0x2615", "morning coffee"]],

Dieses Plugin fügt eine Schaltfläche in der Symbolleiste hinzu, die es dem Benutzer ermöglicht, den von der WYSIWYG-Ansicht verborgenen HTML-Code zu bearbeiten. Es fügt auch den Menüpunkt Quellcode unter dem Menü Extras hinzu.

  "plugins": ["code"],

  "toolbar": "code",

  "menubar": "tools",

Dieses Plugin fügt eine Schaltfläche in der Symbolleiste hinzu, die es dem Benutzer ermöglicht, den von der WYSIWYG-Ansicht verborgenen HTML-Code zu bearbeiten. Es fügt auch den Menüpunkt Quellcode unter dem Menü Extras hinzu.

  "plugins": ["codesample"],

  "toolbar": "codesample",

  "menubar": "codesample",

Codesample verwendet standardmäßig http://prismjs.com/, um die Codebeispiele in den Editor einzubetten, und funktioniert sofort nach dem Auspacken. Das heißt, wenn ein Benutzer eine gültige Codesyntax in den bearbeitbaren Bereich kopiert, wird der Code automatisch gemäß den Standard-CSS-Regeln von Prism formatiert.

Hinweis: Prism.js und prism.css müssen zu einer Seite hinzugefügt werden, damit die Syntaxhervorhebung funktioniert. Wie das geht, erfahren Sie in den nachstehenden Anweisungen.

Verwendung von Prism.js auf Ihrer Webseite

Sie müssen prism.js und prism.css zu Ihrer Seite hinzufügen, um die syntaxhervorgehobenen Codebeispiele auf Ihrer Webseite zu erhalten (wie vom Code Sample Plugin erstellt). Das Code Sample Plugin verwendet die folgenden Sprachen: markup, javascript, css, php, ruby, python, java, c, csharp und cpp. Sie können die Dateien prism.js und prism.css auf der Download-Seite auf der Prism-Website generieren.

<link rel="stylesheet" type="text/css" href="prism.css">
<script src="prism.js"></script>
<pre class="language-markup"><code>...</code></pre>

Hinweis: Diese Funktion ist nur für TinyMCE 5.2 und höher verfügbar.

Mit dieser Konfigurationsoption kann eine globale Prism.js-Version verwendet werden, wenn Codebeispielblöcke hervorgehoben werden, anstatt die im Codesample-Plugin gebündelte Prism.js-Version zu verwenden. Dadurch kann eine benutzerdefinierte Version von Prism.js, einschließlich zusätzlicher Sprachen, verwendet werden.

Wenn Sie diese Option verwenden, stellen Sie sicher, dass Prism.js und alle Sprach-Add-ons zusammen mit dem TinyMCE-Skript auf der Website geladen sind:

<script src="prism.js" data-manual></script>
<script src="tinymce.js"></script>

Type: Boolean

Default value: false

Possible values: true, false

  "codesample_global_prismjs": true,

Mit dieser Konfigurationsoption können Sie eine Liste von Sprachen festlegen, die in der Dropdown-Liste der Sprachen angezeigt werden sollen.

  codesample_languages: [
    { text: "HTML/XML", value: "markup" },
    { text: "CSS", value: "css" },
  ],

Prism download Prism ist ein leichtgewichtiger, erweiterbarer Syntax-Highlighter, der mit Blick auf moderne Webstandards entwickelt wurde. Er wird in Millionen von Websites verwendet, darunter auch einige, die Sie täglich besuchen.

Dieses Plugin fügt dem Editor einen Dialog hinzu, mit dem Benutzer Emoticons in den Editor-Bereich von TinyMCE einfügen können. Der Dialog kann über eine Schaltfläche in der Symbolleiste - Emoticons - oder einen speziellen Menüpunkt wie Einfügen > Emoticons aufgerufen werden.

Das Emoticons-Plugin bietet einen Autovervollständiger zum Hinzufügen von Emoji, ohne die Schaltfläche in der Symbolleiste oder den Menüpunkt zu verwenden. Durch Hinzufügen eines Doppelpunkts :, gefolgt von mindestens zwei Zeichen, wird die Emoticons-Auswahl mit den passenden Emoticons geöffnet.

Hinweis: Das Emoticons-Plugin wandelt Text-Emoticons nicht automatisch in grafische Emoji um.

  "plugins": ["emoticons"],

  "toolbar": "emoticons",

Browser-Emoji-Unterstützung
Standardmäßig fügt das Emoticon-Plugin Unicode-Zeichencodes ein, wie z. B. \ud83d\ude03 für das Smiley-Emoji. Wie Emoji gerendert werden, hängt vom Webbrowser und dem Betriebssystem des Nutzers ab. Infolgedessen werden einige Emoji möglicherweise in Schwarz-Weiß oder gar nicht dargestellt. Um sicherzustellen, dass Emoji in allen Browsern und Betriebssystemen einheitlich dargestellt werden, empfiehlt Tiny, mit content_css eine emoji-kompatible Web-Schriftart zur Standard-Schriftfamilie hinzuzufügen.

Die Standard-Emoji-Datenbank kann mit den unten stehenden Optionen überschrieben oder erweitert werden.

Intern werden Emoticons durch ein Objekt definiert, das Emoticon-Namen auf zusätzliche Details abbildet, wobei jeder Eintrag ein einzelnes Emoji darstellt. Die zusätzlichen Details sollten ein Unicode-Zeichen enthalten, das das Emoji repräsentiert, alle Schlüsselwörter, die für die Suche nach dem Emoji verwendet werden können, und eine Kategorie, in die das Emoji eingeordnet wird. Es wird erwartet, dass die Optionen im gleichen Format angegeben werden.

{
  robot: {
    keywords: ["computer", "machine", "bot"],
    char: "🤖",
    category: "people"
  },
  dog: {
    keywords: ["animal", "friend", "nature", "woof", "puppy", "pet", "faithful"],
    char: "🐶",
    category: "animals_and_nature"
  }
}

Diese Option bietet die Möglichkeit, einige zusätzliche Emoji an die Standard-Emoji-Datenbank anzuhängen. Dies sollte ein Objekt im oben genannten Format sein.

Type: Object

  emoticons_append: {
    custom_mind_explode: {
      keywords: ["brain", "mind", "explode", "blown"],
      char: "🤯"
    }
  }

Hinweis: Diese Funktion ist nur für TinyMCE 5.6 und höher verfügbar.

Mit dieser Option können Sie festlegen, welche integrierte Emoji-Datenbank beim Rendern von Emojis im Editor verwendet werden soll. Die folgenden eingebauten Emoji-Datenbanken sind verfügbar:

emojis - Diese Datenbank verwendet Unicode-Zeichen zur Darstellung von Emoji im Editorinhalt.
emojiimages - Diese Datenbank verwendet Bilder, die vom Twitter Emoji (twemoji) Projekt zur Verfügung gestellt werden, um Emoji im Inhalt des Editors darzustellen.
Wichtig: Die Datenbank emojiimages, die von Tiny Technologies, Inc. bereitgestellt wird, verwendet Twitter Emoji (twemoji) Grafiken unter der CC-BY 4.0 Lizenzvereinbarung.

Type: String

Default: emojis

  "emoticons_database": "emojis",

Diese Option gibt den Standardort an, von dem die Emoji-Datenbank geladen werden soll. Die Datenbank sollte eine externe JavaScript-Datei sein, die eine tinymce.plugins.emoticons-Ressource registriert.

Type: String

Default: ${pluginUrl}/js/emojis.js

  "emoticons_database_url": "/emojis.js",

Hinweis: Diese Funktion ist nur für TinyMCE 5.6 und höher verfügbar.

Diese Option legt die Basis-URL für die Bilder fest, die zur Darstellung von Emojis verwendet werden, wenn die emojiimages-Datenbank verwendet wird.

Standardmäßig lädt diese Option die erforderlichen Bild-Assets aus dem Twemoji CDN. Um selbst gehostete Emoji-Bilder zu verwenden, laden Sie die Bild-Assets aus dem Twitter Emoji (twemoji) GitHub-Repository herunter.

Typ: String

Standard: https://twemoji.maxcdn.com/v/13.0.1/72x72/

  "emoticons_images_url": "http://my.server/images/emoticons/",

Dieses Plugin erweitert TinyMCE um die Möglichkeit der Vollbildbearbeitung. Wenn die Schaltfläche in der Symbolleiste gedrückt wird, füllt der bearbeitbare Bereich das Ansichtsfenster des Browsers aus. Das Plugin fügt eine Symbolleisten-Schaltfläche und einen Menüpunkt Vollbild unter dem Menü Ansicht hinzu.

Der Vollbildmodus kann mit den folgenden Tastaturkürzeln umgeschaltet werden:

• macOS: Befehl+Umschalt+F
• Die meisten anderen Betriebssysteme (z. B. Windows oder Linux): Strg+Umschalt+F
  
  

  "plugins": ["fullscreen"],

  "menubar": "view",

  "toolbar": "fullscreen",

Die folgenden Konfigurationsoptionen beeinflussen das Verhalten des Vollbild-Plugins.

Hinweis: Diese Funktion ist nur für TinyMCE 5.5 und höher verfügbar.

Hinweis: Die Option fullscreen_native erfordert das Fullscreen-Plugin.

Die Option fullscreen_native ermöglicht es dem Editor, den Vollbildmodus des Browsers zu nutzen, anstatt nur das Browserfenster zu füllen, wenn der Vollbildmodus aktiviert ist. Diese Funktionalität ist die gleiche wie der Vollbildmodus für Online-Videos.

Typ: Boolean

Standardwert: false

Mögliche Werte: true, false

  "fullscreen_native": true,

Beschränkungen der Option fullscreen_native

Die Option fullscreen_native hat die folgenden Einschränkungen. Wenn fullscreen_native aktiviert ist:

• Die Escape-Tastaturtaste (Esc) beendet den Vollbildmodus. Das Standard-Editorverhalten der Esc-Taste wird vom Browser überschrieben und die Esc-Taste beendet den Vollbildmodus, anstatt Dialoge und Menüs zu schließen oder den Fokus von der Editor-Benutzeroberfläche auf den Editorinhalt zu verschieben. Dies kann zu Problemen mit der Barrierefreiheit führen.
• Firefox-Benutzer - Das Tastaturkürzel für den Vollbildmodus (Strg+Umschalt+F) kann nicht verwendet werden, um den browsernativen Vollbildmodus wiederholt ein- und auszuschalten, ohne zwischen den Umschaltvorgängen mit dem Editor zu interagieren. Wenn der Benutzer zwischen dem Ein- und Ausschalten nicht mit dem Editor interagiert, füllt das Plugin wieder das Browserfenster aus.
• Benutzer von Microsoft Internet Explorer 11 - Das Tastaturkürzel für den Vollbildmodus (Strg+Umschalt+F) aktiviert nicht den browsereigenen Vollbildmodus. Wenn das Vollbild-Tastenkürzel verwendet wird, füllt das Plugin wieder das Browserfenster aus.
• Wenn der Editor innerhalb eines iframe-Elements initialisiert wird, füllt der Vollbildmodus nur den iframe in Firefox und Microsoft Internet Explorer 11.
  
  

https://www.tiny.cloud/docs/configure/editor-appearance/#toolbar_mode

"toolbar_mode": "floating",
"toolbar_mode": "slidung",
"toolbar_mode": "scrolling",
"toolbar_mode": "wrap",

floating =

Wenn der toolbar_mode auf floating konfiguriert ist, erscheint die Symbolleiste unter dem Symbolleistenüberlaufsymbol in einem schwebenden Regalformat, wenn das Symbolleistenüberlaufsymbol  angeklickt wird.

sliding =

Wenn der toolbar_mode auf sliding konfiguriert ist, erscheint die Symbolleiste als feste Symbolleiste unter der ersten Symbolleiste, wenn das Symbolleisten-Überlaufsymbol  angeklickt wird.

scrolling = 

Der Bildlaufmodus der Symbolleiste ist für Touchscreen-Geräte gedacht.

Wenn der Modus toolbar_mode auf Scrollen konfiguriert ist, bleiben die Schaltflächen der Überlauf-Symbolleiste auf der Symbolleiste, sind aber nicht sichtbar. Um auf die Schaltflächen der Overflow-Symbolleiste zuzugreifen, rollen Sie die Symbolleiste. Um die Symbolleiste auf einem Touchscreen zu scrollen, verwenden Sie einen Wischvorgang. Um auf einem Desktop-Gerät zu scrollen, halten Sie die Umschalttaste gedrückt und scrollen Sie mit der Maus.

Auf Desktop-Geräten und Hybridgeräten im Desktop-Modus wird eine Bildlaufleiste in der Symbolleiste angezeigt.

wrap =

Wenn der toolbar_mode auf wrap konfiguriert ist, werden die Schaltflächen der Überlauf-Symbolleiste auf einer oder mehreren Symbolleisten unterhalb der primären Symbolleiste angezeigt.

https://www.tiny.cloud/docs/plugins/opensource/help/