Konfiguration ING Die TinyMCE-Symbolleiste über Wörterbuchattribute

Ändern Sie die TinyMCE-Standardsymbolleiste

Legen Sie die Symbolleistenelemente in Ihren Systemeigenschaften so fest, dass sie durchgehend aktiviert oder deaktiviert werden Arbeitsbereich.

Vorbereitungen

Erforderliche Rolle: Administrator

Prozedur

Navigieren zu Alle > Systemeigenschaften > UI-Eigenschaftenan.

Aktualisieren Sie Konfiguriert die Bearbeitungssymbolleiste für HTML-Felder (TinyMCE v6.8.2) Eigenschaft (Glide.ui.html.Editor.Symbolleiste) zum Hinzufügen oder Entfernen von Schaltflächen für die Symbolleiste.

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
Verfügbare 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

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: Administrator

Prozedur

Navigieren Sie zu einem Datensatz mit einem HTML-Feld, das Sie ändern möchten.
Wählen Sie beispielsweise einen Incident-, Problem- oder Wissensdatensatz aus.
Klicken Sie mit der rechten Maustaste auf die Feldbezeichnung (z. B. Artikeltext), und wählen Sie aus Konfigurieren Sie Wörterbuch .
Wählen Sie im Abschnitt zugehörige Links die Option aus Erweiterte Ansicht .
In Attribute Feld, Eingabe Editor.Symbolleiste= Gefolgt von den gewünschten Symbolleistenschaltflächen.
Beispiel: Editor.Symbolleiste=Blöcke|fett kursiv unterstrichen strichenes Blockquote-Abonnement – hochformatiges Entfernungsformat| Aufzählungsliste – Ausrücken|Wiederholen rückgängig machen|Tabelle HR|Link aufheben|Bild-Mediencode|Visualblöcke – Vorschau auf Vollbild .
Hinweis:
- Schließen Sie alle Symbolleistenelemente ein, die angezeigt werden sollen, nicht nur die Symbolleistenelemente, die Sie hinzufügen möchten.
- Die Konfigurationen, die am Attributfeld eines Felds im zugehörigen Wörterbuchdatensatz vorgenommen werden, überschreiben den Wert der Systemeigenschaft „Glide.ui.html.Editor.Symbolleiste“.
- Mehrere Attribute, z. B. Höhe, Symbolleistenschaltflächen und Symbolleisten-Plugins, können im Feld „Attribute“ kombiniert werden. Beispiel: Editor.height=300,editor.plugins=table-Farbauswahl-Textfarbe-Link-Bild-MediencodeMirror-Listen Advlist Vollbild-Charmap-Direktionalitäts-Emoticons HR insertdatetime Non-Break-Druck-Suche Wortanzahl-Anker-Codebeispielvisualblöcke visualchars compat3x autolink align_listitems,Editor.Toolbar= fontsize | fett kursiv unterstrichen durchgestrichen forecolor backcolor-Link pastetext Removeformat | Blöcke .
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: Administrator

Prozedur

Navigieren Sie zu einem Datensatz mit einem HTML-Feld, das Sie ändern möchten.
Wählen Sie beispielsweise einen Incident-, Problem- oder Wissensdatensatz aus.
Klicken Sie mit der rechten Maustaste auf die Feldbezeichnung (z. B. Artikeltext), und wählen Sie aus Konfigurieren Sie Wörterbuch .
Wählen Sie im Abschnitt zugehörige Links die Option aus Erweiterte Ansicht .
In Attribute Feld, Eingabe editor.plugins= Gefolgt von den gewünschten Plugins, getrennt durch ein Leerzeichen.
Beispiel: editor.plugins=table Farbauswahl Textfarblink Bild Medien Codespiegel Listen Advlist Vollbild Charmap Direktionalitätsemoticons HR insertdatetime Non Break Print searchreplace Wordcount Ankertableofcontent Codesample visualchars compat3x autolink align_listitems .
Hinweis:
- Schließen Sie alle Symbolleistenelemente ein, die angezeigt werden sollen, nicht nur die Symbolleistenelemente, die Sie hinzufügen möchten.
- Die Konfigurationen, die am Attributfeld eines Felds im zugehörigen Wörterbuchdatensatz vorgenommen werden, überschreiben den Wert der Systemeigenschaft „Glide.ui.html.Editor.Symbolleiste“.
- Zulässige Plugins: Advantlist align_listitems Anker autolink automatische Größenänderung bbcode-Zeichencodespiegel Codebeispiel-Farbauswahl-Direktionalitätsemoticons Vollbild-HR-Bild insertdatetime Link listet Medien nicht brechende Seitenreak-Vorschau drucken readonborder searchreplace Tabellentextcolor tableofcontent visualchars Wordcount
- Mehrere Attribute, z. B. Höhe, Symbolleistenschaltflächen und Symbolleisten-Plugins, können im Feld „Attribute“ kombiniert werden. Beispiel: Editor.height=300,editor.plugins=table-Farbauswahl-Textfarbe-Link-Bild-MediencodeMirror-Listen Advlist Vollbild-Charmap-Direktionalitäts-Emoticons HR insertdatetime Non-Break-Druck-Suche Wortanzahl-Anker-Codebeispielvisualblöcke visualchars compat3x autolink align_listitems,Editor.Toolbar= fontsize | fett kursiv unterstrichen durchgestrichen forecolor backcolor-Link pastetext Removeformat | Blöcke .
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: Administrator

Warum und wann dieser Vorgang ausgeführt wird

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

Prozedur

Navigieren Sie zu einem Datensatz mit einem HTML-Feld, das Sie ändern möchten.
Wählen Sie beispielsweise einen Incident-, Problem- oder Wissensdatensatz aus.
Klicken Sie mit der rechten Maustaste auf die Feldbezeichnung (z. B. Artikeltext), und wählen Sie aus Konfigurieren Sie Wörterbuch .
Wählen Sie im Abschnitt zugehörige Links die Option aus Erweiterte Ansicht .
In Attribute Feld eingeben Editor.height=X , Wobei X die gewünschte Höhe ist.
Beispiel: Editor.height=250
Hinweis:
HTML-Felder können zwischen 72 und 2000 liegen. HTML-Felder sind standardmäßig 64.
Wählen Sie Aktualisieren.
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 ein Glide.ui.html.Editor.enabled_Plugins Und wählen Sie die Eigenschaft aus.
3. Fügen Sie im Feld Wert hinzu Automatische Größenänderung .
4. Wählen Sie Aktualisieren.
  Das Plugin zur automatischen Größenänderung ist aktiv.

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

Ändern Sie die Standardschriftgröße eines bestimmten HTML-Felds, um eine Standardschriftgröße für alle Formulare zu verwenden.

Vorbereitungen

Erforderliche Rolle: Administrator

Warum und wann dieser Vorgang ausgeführt wird

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

Prozedur

Navigieren Sie zu einem Datensatz mit einem HTML-Feld, das Sie ändern möchten.
Wählen Sie beispielsweise einen Incident-, Problem- oder Wissensdatensatz aus.
Klicken Sie mit der rechten Maustaste auf die Feldbezeichnung (z. B. Artikeltext), und wählen Sie aus Konfigurieren Sie Wörterbuch .
Wählen Sie aus Standardwert Registerkarte.
In Standardwert Feld eingeben , Wobei X der Standardwert ist.
Zum Beispiel:
- Um die Schriftart auf „groß“ festzulegen, geben Sie ein 
- Um die Größe auf 10 festzulegen, geben Sie ein 
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 zu ermöglichen, z. B. Und . Standardmäßig verwendet TinyMCE Und Tags für fett- und kursiv-Formatierung.

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 Tags, die Sie manuell eingeben, z. B. wenn Sie ein falsches Zeichen eingeben.

Prozedur

Navigieren Sie mit einem HTML-Feld zum Formular, das TinyMCE verwendet.
Klicken Sie mit der rechten Maustaste auf die HTML-Feldbezeichnung, und wählen Sie aus Konfigurieren Sie Wörterbuch .
In Attribute Feld eingeben tinymce_allow_all=wahr , Bei Bedarf durch Komma getrennt.

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.
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 zu ermöglichen.

Vorbereitungen

Erforderliche Rolle: personalize_dictionary or admin

Prozedur

Navigieren Sie mit einem HTML-Feld zum Formular, das TinyMCE verwendet.
Klicken Sie mit der rechten Maustaste auf die HTML-Feldbezeichnung, und wählen Sie aus Konfigurieren Sie Wörterbuch .
In Attribute Feld eingeben tinymce_allow_script_urls=wahr , Bei Bedarf durch Komma getrennt.

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.
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 CoreUI als auch in Arbeitsbereichen aktivieren. Wenn diese Option aktiviert ist, wird die Menüleiste oben im HTML-Editor angezeigt, die 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: Administrator

Prozedur

Navigieren Sie zu einem Datensatz mit einem HTML-Feld, das Sie ändern möchten.
Klicken Sie mit der rechten Maustaste auf die Feldbezeichnung, und wählen Sie aus Konfigurieren Sie Wörterbuch .
Wählen Sie im Abschnitt zugehörige Links die Option Erweiterte Ansicht aus.
Geben Sie im Feld Attribute ein Editor.config=New TinymceConfigScript().getConfiguration() .

Dieses Editor.config-Attribut verweist auf ein Skript: TinymceConfigScript().

Greifen Sie auf zu TinymceConfigScript .

Navigieren zu Alle > Systemdefinition > Skripteinbindungenan.
Eingabetaste TinymceConfigScript Wählen Sie in der Suchleiste oben im Formular aus Eingabetaste Oder Zurück .

Wählen Sie Aus TinymceConfigScript .

Standardmäßig wird das folgende Skript 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'
};

Legen Sie das Menüleistenattribut auf fest Wahr Im Skript zum Aktivieren der Menüleiste.
Dadurch werden diese Optionen in der Menüleiste aktiviert: Datei, Bearbeiten, Ansicht, Einfügen, Format, und Tabelle.
Wenn Sie die Menüleiste deaktivieren möchten, legen Sie das Menüleistenattribut auf fest Falsch .
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: „Dateiformat bearbeiten“, sodass nur diese 3 Optionen in der Menüleiste angezeigt werden.

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

Konfigurieren Sie anwenderdefinierte Formatoptionen in TinyMCEConfigScript, indem Sie die CSS im Abschnitt „style_Formats“ anfügen.

Beispiel für den Abschnitt „style_Formats“ des 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 Stilformaten hinzugefügt (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 Sie sehen, dass die neuen anwenderdefinierten Stilformate (Fetttext, roter Text, My-Inline) im Abschnitt „Formate“ der Menüleiste angezeigt werden.