Konfigurieren Sieing der TinyMCE-Symbolleiste über Wörterbuchattribute

Sie können den TinyMCE-HTML-Editor für eine bestimmte Tabelle konfigurieren, indem Sie die Wörterbuchattribute konfigurieren.

Informationen zum Konfigurieren der Symbolleiste finden Sie unter Ändern Sie die TinyMCE-Standardsymbolleiste. Informationen zum Konfigurieren bestimmter Plugins finden Sie unter Ändern Sie TinyMCE-Plugins für eine bestimmte Tabelle. Informationen zum Konfigurieren der Standardhöhe eines HTML-Felds finden Sie unter Ändern Sie die Standardhöhe eines HTML-Felds. Informationen zum Konfigurieren der Standardschriftgröße in einem HTML-Feld finden Sie unter Ändern Sie die Standardschriftgröße eines HTML-Felds. Informationen zum Konfigurieren der Menüleiste im TinyMCE-HTML-Editor finden Sie unter Konfigurieren Sie die Menüleiste im TinyMCE-HTML-Editor.

Zugehörige Konzepte

• Plugins für den TinyMCE-HTML-Editor konfigurieren

Zugehörige Tasks

• Konfigurieren Sie die HTML-Symbolleiste

Zugehörige Verweise

• Konfigurieren der Systemeigenschaften für den TinyMCE-HTML-Editor

Ändern Sie die TinyMCE-Standardsymbolleiste

Legen Sie die Symbolleistenelemente in Ihren Systemeigenschaften so fest, dass während Arbeitsbereichaktiviert oder deaktiviert wird.

Vorbereitungen

Erforderliche Rolle: admin

Prozedur

1. Navigieren zu Alle > Systemeigenschaften > UI-Eigenschaftenan.
2. Aktualisieren Sie die Eigenschaft Konfiguriert die Bearbeitungssymbolleiste für HTML-Felder (TinyMCE v6.8.3) (glide.ui.html.editor.toolbar), um Schaltflächen für die Symbolleiste hinzuzufügen oder zu entfernen.
   Hinweis:

   Verwenden Sie einen vertikalen Balken („|“), um ein Abschnittstrennzeichen hinzuzufügen.

   Typ	Schaltflächen
   Standardschaltflächen	bold italic underline undo redo | fontfamily fontsize table | forecolor backcolor link unlink | image media code | alignleft aligncenter alignright | bullist numlist fullscreen
   Gültige Schaltflächen	newdocument, bold, italic, underline, strikethrough, justifyleft, justifycenter, justifyright, justifyfull, blocks, fontfamily, fontsize, tablecontrols, cut, copy, paste, pastetext, pasteword, search, replace, bullist, numlist, outdent, indent, blockquote, undo, redo, link, unlink, image, cleanup, code, forecolor, backcolor, removeformat, hr, visualaid, sub, sup, charmap, media, preview, fullscreen, accordion

3. Wählen Sie Speichern.

Ändern Sie die TinyMCE-Symbolleiste für eine bestimmte Tabelle

Legen Sie die Attribute im TinyMCE-Wörterbuch fest, um zu bestimmen, welche TinyMCE-Attribute in einer bestimmten Tabelle angezeigt werden.

Vorbereitungen

Erforderliche Rolle: admin

Prozedur

1. Navigieren Sie zu einem Datensatz mit einem HTML-Feld, das Sie ändern möchten.
   Wählen Sie beispielsweise einen Incident, ein Problem oder einen Wissensdatensatz aus.
2. Klicken Sie mit der rechten Maustaste auf die Feldbezeichnung (z. B. Artikelhauptteil), und wählen Sie Dictionary konfigurierenaus.
3. Wählen Sie im Abschnitt „Zugehörige Links“ Erweiterte Ansichtaus.
4. Geben Sie im Feld Attribute die Eingabe „editor.toolbar=“ gefolgt von den gewünschten Symbolleistenschaltflächen ein.
   Beispiel: Editor.toolbar=blocks|fett kursiv unterstrichen durchgestrichen Blockquote subskript hochgestellt entfernenformat| Bullist Nummernliste Outdent Einrücken|Rückgängig machen/Wiederholen|Tabelle HR|Verknüpfung aufheben|Bild Mediencode|VisualBlocks-Vorschau im Vollbildmodus.

   Hinweis:

   • Schließen Sie alle Symbolleistenelemente ein, die angezeigt werden sollen, und nicht nur die Symbolleistenelemente, die Sie hinzufügen möchten.
   • Die Konfigurationen, die am Attributfeld eines Felds im zugehörigen Dictionary-Datensatz vorgenommen werden, überschreiben den Wert der Systemeigenschaft „glide.ui.html.editor.toolbar“.
   • Mehrere Attribute, z. B. Höhe, Symbolleistenschaltflächen und Symbolleisten-Plugins, können im Feld Attribute kombiniert werden. Beispiel: Editor.height = 300,editor.plugins = Tabelle Farbauswahl Textfarbe Link Bild Mediencode Spiegellisten Advlist VollbildCharmap Direktionalität Emotes hr insertdatetime ohne Umbruch Seitenumbruch drucken Sucheersetzen Wortanzahl AnkercodeBeispiel Visualblocks VisualChars Compat3x Autolink align_listitems,editor.toolbar= Schriftartfamilie Schriftgröße | fett kursiv unterstrichen durchgestrichen vorfarbe hinterfarbe einfügentext entfernenformat | blockiert SuchenErsetzen Rückgängig machen Wiederholen | bollist numlist outdent einrücken alignleft aligncenter alignright | tableofcontents Tabellenlink Aufheben der Verknüpfung eines BildmediencodesBeispiel | Code im Vollbildmodus.
5. Wählen Sie Aktualisieren.

Ändern Sie TinyMCE-Plugins für eine bestimmte Tabelle

Legen Sie die Attribute im TinyMCE-Wörterbuch fest, um Plugins in einem bestimmten HTML-Feld zu aktivieren oder zu deaktivieren.

Vorbereitungen

Erforderliche Rolle: admin

Prozedur

1. Navigieren Sie zu einem Datensatz mit einem HTML-Feld, das Sie ändern möchten.
   Wählen Sie beispielsweise einen Incident, ein Problem oder einen Wissensdatensatz aus.
2. Klicken Sie mit der rechten Maustaste auf die Feldbezeichnung (z. B. Artikelhauptteil), und wählen Sie Dictionary konfigurierenaus.
3. Wählen Sie im Abschnitt „Zugehörige Links“ Erweiterte Ansichtaus.
4. Geben Sie im Feld Attribute den Wert „editor.plugins=“ gefolgt von den gewünschten Plugins ein, getrennt durch ein Leerzeichen.

   Beispiel: Editor.Plugins=Tabelle Farbauswahl Textfarbe Link Bild Medien CodeSpiegel Listen Advlist VollbildCharmap Direktionalität Emotes Std. einfügen Datum Zeit nicht umbrechen Seitenumbruch drucken Suche ersetzen Wortanzahl Anker Inhaltstabelle Codebeispiel Visualblocks Visualchars kompatibel 3x Autolink align_listitems.

   Hinweis:

   • Schließen Sie alle Symbolleistenelemente ein, die angezeigt werden sollen, und nicht nur die Symbolleistenelemente, die Sie hinzufügen möchten.
   • Die Konfigurationen, die am Attributfeld eines Felds im zugehörigen Dictionary-Datensatz vorgenommen werden, überschreiben den Wert der Systemeigenschaft „glide.ui.html.editor.toolbar“.
   • Zulässige Plugins sind: advlist align_listitems Anker autolink autoresize bbcodeCharmap CodeSpiegelcodeBeispiel Farbauswahl Direktionalität Emotes Vollbild HR Bild insertdatetime Linklisten Medien ohne Umbruch Seitenumbruch Vorschau drucken schreibgeschütztKein Rahmen SucheTabelle ersetzen Textfarbe Inhaltsverzeichnis visualblocks visualchars Wortanzahl
   • Mehrere Attribute, z. B. Höhe, Symbolleistenschaltflächen und Symbolleisten-Plugins, können im Feld Attribute kombiniert werden. Beispiel: Editor.height = 300,editor.plugins = Tabelle Farbauswahl Textfarbe Link Bild Mediencode Spiegellisten Advlist VollbildCharmap Direktionalität Emotes hr insertdatetime ohne Umbruch Seitenumbruch drucken Sucheersetzen Wortanzahl AnkercodeBeispiel Visualblocks VisualChars Compat3x Autolink align_listitems,editor.toolbar= Schriftartfamilie Schriftgröße | fett kursiv unterstrichen durchgestrichen vorfarbe hinterfarbe einfügentext entfernenformat | blockiert SuchenErsetzen Rückgängig machen Wiederholen | bollist numlist outdent einrücken alignleft aligncenter alignright | tableofcontents Tabellenlink Aufheben der Verknüpfung eines BildmediencodesBeispiel | Code im Vollbildmodus.
5. Wählen Sie Aktualisieren.

Ändern Sie die Standardhöhe eines HTML-Felds

Ändern Sie die Standardhöhe eines bestimmten HTML-Felds, um die Größe eines Journalfelds zu erweitern.

Vorbereitungen

Erforderliche Rolle: admin

Warum und wann dieser Vorgang ausgeführt wird

Die HTML-Feldhöhe wird pro HTML-Feld konfiguriert.

Prozedur

1. Navigieren Sie zu einem Datensatz mit einem HTML-Feld, das Sie ändern möchten.
   Wählen Sie beispielsweise einen Incident, ein Problem oder einen Wissensdatensatz aus.
2. Klicken Sie mit der rechten Maustaste auf die Feldbezeichnung (z. B. Artikelhauptteil), und wählen Sie Dictionary konfigurierenaus.
3. Wählen Sie im Abschnitt „Zugehörige Links“ Erweiterte Ansichtaus.
4. Geben Sie im Feld Attribute den Wert Editor.Height=Xein, wobei X für die gewünschte Höhe steht.
   Beispiel: Editor.Height=250

   Hinweis:

   HTML-Felder können zwischen 72 und 2000 liegen. HTML-Felder sind standardmäßig 64.

5. Wählen Sie Aktualisieren.
6. Führen Sie die folgenden Schritte aus, um die Höhe von Formularfeldern dynamisch zu konfigurieren, wenn die Textzeile zunimmt, anstatt eine bestimmte Höhe anzugeben:
   1. Navigieren zu Alle > Systemeigenschaften > Alle Eigenschaften
   2. Geben Sie in der Suchleiste glide.ui.html.editor.enabled_plugins ein, und wählen Sie die Eigenschaft aus.
   3. Fügen Sie im Feld „Wert “ Größenanpassunghinzu.
   4. Wählen Sie Aktualisieren.
      Das Plugin „Autoresize“ ist aktiv.

Ändern Sie die Standardschriftgröße eines HTML-Felds

Ändern Sie die Standardschriftgröße eines bestimmten HTML-Felds, um eine formularübergreifende Standardschriftgröße zu verwenden.

Vorbereitungen

Erforderliche Rolle: admin

Warum und wann dieser Vorgang ausgeführt wird

Die HTML-Schriftgröße wird pro HTML-Feld konfiguriert.

Prozedur

1. Navigieren Sie zu einem Datensatz mit einem HTML-Feld, das Sie ändern möchten.
   Wählen Sie beispielsweise einen Incident, ein Problem oder einen Wissensdatensatz aus.
2. Klicken Sie mit der rechten Maustaste auf die Feldbezeichnung (z. B. Artikelhauptteil), und wählen Sie Dictionary konfigurierenaus.
3. Wählen Sie die Registerkarte Standardwert aus.
4. Geben Sie im Feld Standardwert<p style="font-size:X;"></p>ein, wobei X der Standardwert ist.
   Beispiel:

   • Um die Schrift auf groß festzulegen, geben Sie ein <p style="font-size:large;"></p>
   • Um die Größe auf 10 festzulegen, geben Sie ein <p style="font-size:10pt;"></p>
5. Wählen Sie Aktualisieren.

Konfigurieren Sie TinyMCE, um veraltete Tags zuzulassen

Sie können ein Wörterbuchattribut für ein TinyMCE-Feld festlegen, um die Verwendung veralteter HTML-Tags wie <b> und <i>zuzulassen. Standardmäßig verwendet TinyMCE die Tags <strong> und <em> für die Formatierung Fett und Kursiv.

Vorbereitungen

Erforderliche Rolle: personalize_dictionary or admin

Warum und wann dieser Vorgang ausgeführt wird

Nachdem Sie das Wörterbuchattribut festgelegt haben, verwenden Sie die Codeansicht, um veraltete Tags manuell einzugeben. Der Editor validiert keine manuell eingegebenen Tags (z. B. durch Eingabe eines falschen Zeichens).

Prozedur

1. Navigieren Sie zu dem Formular mit einem HTML-Feld, das TinyMCE verwendet.
2. Klicken Sie mit der rechten Maustaste auf die HTML-Feldbezeichnung, und wählen Sie Dictionary konfigurierenaus.

   

3. Geben Sie im Feld Attribute den Wert Tinymce_allow_all=trueein, getrennt bei Bedarf durch ein Komma.

   Wörterbucheintragsattribute können nur hinzugefügt werden, wenn sich das Wörterbucheintragsformular in der erweiterten Ansicht befindet, da sie in der Standardansicht nicht angezeigt werden.

   

   Wenn bereits andere Attribute aufgeführt sind, verwenden Sie ein Komma als Trennzeichen.

4. Wählen Sie Aktualisieren.

Konfigurieren Sie TinyMCE, um JavaScript in URLs zuzulassen

Sie können ein Wörterbuchattribut für ein TinyMCE-Feld festlegen, um die Verwendung von JavaScript in einer URL zuzulassen.

Vorbereitungen

Erforderliche Rolle: personalize_dictionary or admin

Prozedur

1. Navigieren Sie zu dem Formular mit einem HTML-Feld, das TinyMCE verwendet.
2. Klicken Sie mit der rechten Maustaste auf die HTML-Feldbezeichnung, und wählen Sie Dictionary konfigurierenaus.

   

3. Geben Sie im Feld Attribute den Wert Tinymce_allow_script_urls=trueein, getrennt bei Bedarf durch ein Komma.

   Wörterbucheintragsattribute können nur hinzugefügt werden, wenn sich das Wörterbucheintragsformular in der erweiterten Ansicht befindet, da sie in der Standardansicht nicht angezeigt werden.

   

   Wenn bereits andere Attribute aufgeführt sind, verwenden Sie ein Komma als Trennzeichen.

4. Wählen Sie Aktualisieren.

Konfigurieren Sie die Menüleiste im TinyMCE-HTML-Editor

Sie können die Menüleiste im TinyMCE-HTML-Editor sowohl in der CoreUI als auch in Arbeitsbereichen aktivieren. Wenn diese Option aktiviert ist, wird die Menüleiste oben im HTML-Editor angezeigt, der zum Erstellen, Bearbeiten und Formatieren von Inhalten verwendet werden kann. Standardmäßig ist die Menüleiste inaktiv. Sie können es für eine bestimmte Tabelle über die Konfiguration des Wörterbuchattributs aktivieren.

Vorbereitungen

Erforderliche Rolle: admin

Prozedur

1. Navigieren Sie zu einem Datensatz mit einem HTML-Feld, das Sie ändern möchten.
   Wählen Sie beispielsweise einen Incident, ein Problem oder einen Wissensdatensatz aus.
2. Klicken Sie mit der rechten Maustaste auf die Feldbezeichnung, und wählen Sie Dictionary konfigurieren.

   

3. Wählen Sie im Abschnitt „Zugehörige Links“ Erweiterte Ansicht.
4. Geben Sie im Feld Attribute die Eingabe „editor.config=new TinymceConfigScript().getConfiguration()“ ein.

   

   Dieses Attribut „editor.config“ verweist auf ein Skript: TinymceConfigScript().

5. Greifen Sie auf TinyMCEConfigScript zu.
   1. Navigieren zu Alle > Systemdefinition > Skripteinbindungenan.
   2. Geben Sie TinymceConfigScriptin die Suchleiste oben im Formular ein, und drücken Sie die Eingabetaste oder die Eingabetaste.
   3. Wählen Sie TinymceConfigScript aus.

      Das folgende Skript wird standardmäßig angezeigt.

      

      var TinymceConfigScript = Class.create();
      TinymceConfigScript.prototype = {
          initialize: function() {
          },
          setTinymceConfig: function() {
          var tinyConfig = {
              menubar: 'edit format',
              menu: {
                  file: { title: 'File', items: 'importword exportpdf exportword | print | deleteallconversations' },
                  edit: { title: 'Edit', items: 'undo redo | cut copy paste pastetext | selectall | searchreplace' },
                  view: { title: 'View', items: 'code revisionhistory | visualaid visualchars visualblocks | spellchecker | preview fullscreen | showcomments' }
              },
              style_formats: [
                  { title: 'Headings', items: [
                      { title: 'Heading 1', format: 'h1' },
                      { title: 'Heading 2', format: 'h2' },
                      { title: 'Heading 3', format: 'h3' },
                      { title: 'Heading 4', format: 'h4' },
                      { title: 'Heading 5', format: 'h5' },
                      { title: 'Heading 6', format: 'h6' }
                  ]},
                  { title: 'Inline', items: [
                      { title: 'Bold', format: 'bold' },
                      { title: 'Italic', format: 'italic' },
                      { title: 'Underline', format: 'underline' },
                      { title: 'Strikethrough', format: 'strikethrough' },
                      { title: 'Superscript', format: 'superscript' },
                      { title: 'Subscript', format: 'subscript' },
                      { title: 'Code', format: 'code' }
                  ]},
                  { title: 'Blocks', items: [
                      { title: 'Paragraph', format: 'p' },
                      { title: 'Blockquote', format: 'blockquote' },
                      { title: 'Div', format: 'div' },
                      { title: 'Pre', format: 'pre' }
                  ]},
                  { title: 'Align', items: [
                      { title: 'Left', format: 'alignleft' },
                      { title: 'Center', format: 'aligncenter' },
                      { title: 'Right', format: 'alignright' },
                      { title: 'Justify', format: 'alignjustify' }
                  ]}
              ]
          };
          return tinyConfig;
      },
      getConfiguration: function() {
          var config = this.setTinymceConfig();
          answer = JSON.parse(JSON.stringify(config));
      },
      
          type: 'TinymceConfigScript'
      };

   4. Legen Sie das Menüleistenattribut im Skript auf „ true “ fest, um die Menüleiste zu aktivieren.
      Dadurch werden alle Optionen „Datei“, „Bearbeiten“, „Anzeigen“, „Einfügen“, „Formatieren“ „Tabelle“ in der Menüleiste aktiviert.
   5. Wenn Sie die Menüleiste deaktivieren möchten, legen Sie das Menüleistenattribut auf falsefest.
   6. Wenn Sie nur bestimmte Optionen in der Menüleiste aktivieren möchten, können Sie das Skript ändern, indem Sie diese spezifischen Optionen in der Menüleiste auflisten.

      Beispiel: Menüleiste: „Dateibearbeitungsformat“, sodass nur diese 3 Optionen in der Menüleiste angezeigt werden.

   7. Sie können auch die Schaltflächen konfigurieren, die in einem Menü angezeigt werden, indem Sie das Skript ändern.

      tinymce.init({
          selector: 'textarea', // change this value according to your HTML
          menu:{
              file: { title: 'File', items: 'newdocument restordraft | preview | importword exportpdf exportword | print | deleteallconversations' },
              edit: { title: 'Edit', items: 'undo redo | cut copy paste pastetext | selectall | searchreplace' },
              view: { title: 'View', items: 'code revision history | visualaid visualchars visualblocks | spellchecker | preview fullscreen | showcomments' },
              insert: { title: 'Insert', items: 'image link media addcomment pageembed codesample inserttable | math | charmap emoticons hr | pagebreak nonbreaking anchor tableofcontents | insertdatetime' },
              format: { title: 'Format', items: 'bold italic underline strikethrough superscript subscript codeformat | styles blocks fontfamily fontsize align lineheight | forecolor backcolor | language | removeformat' },
              tools: { title: 'Tools', items: 'spellchecker spellcheckerlanguage | a11ycheck code wordcount' },
              table: { title: 'Table', items: 'inserttable | cell row column | advtablesort | tableprops deletetable' },
              help: { title: 'Help', items: 'help' }
          }
      });

6. Konfigurieren Sie anwenderdefinierte Stilformatoptionen im TinyMCEConfigScript, indem Sie die CSS im Abschnitt „style_formats“ anfügen.

   Beispiel für den Abschnitt „style_formats“ von TinyMCEConfigScript:

   style_formats: [
     { title: 'Headings', items: [
       { title: 'Heading 1', format: 'h1' },
       { title: 'Heading 2', format: 'h2' },
       { title: 'Heading 3', format: 'h3' },
       { title: 'Heading 4', format: 'h4' },
       { title: 'Heading 5', format: 'h5' },
       { title: 'Heading 6', format: 'h6' }
     ]},
     { title: 'Inline', items: [
       { title: 'Bold', format: 'bold' },
       { title: 'Italic', format: 'italic' },
       { title: 'Underline', format: 'underline' },
       { title: 'Strikethrough', format: 'strikethrough' },
       { title: 'Superscript', format: 'superscript' },
       { title: 'Subscript', format: 'subscript' },
       { title: 'Code', format: 'code' }
     ]},
     { title: 'Blocks', items: [
       { title: 'Paragraph', format: 'p' },
       { title: 'Blockquote', format: 'blockquote' },
       { title: 'Div', format: 'div' },
       { title: 'Pre', format: 'pre' }
     ]},
     { title: 'Align', items: [
       { title: 'Left', format: 'alignleft' },
       { title: 'Center', format: 'aligncenter' },
       { title: 'Right', format: 'alignright' },
       { title: 'Justify', format: 'alignjustify' }
     ]}
   ]

   Beispiel mit drei neuen hinzugefügten Stilformaten (Fetttext, Roter Text, My-inline):

   tinymce.init({
     selector: 'textarea',  // change this value according to your HTML
     style_formats: [
       { title: 'Bold text', inline: 'b' },
       { title: 'Red text', inline: 'span', styles: { color: '#ff0000' } },
       { name: 'my-inline', title: 'My inline', inline: 'span', classes: [ 'my-inline' ] }
     ],
     // The following option is used to append style formats rather than overwrite the default style formats.
     style_formats_merge: true
   });

   Greifen Sie auf den HTML-Editor zu, und im Formatabschnitt der Menüleiste werden die neuen anwenderdefinierten Formate (Fetttext, Roter Text, My-inline) angezeigt.