Konfiguration ING Die TinyMCE-Symbolleiste über Wörterbuchattribute

Ändern Sie die TinyMCE-Standardsymbolleiste

Legen Sie die Symbolleistenelemente in Ihren Systemeigenschaften so fest, dass sie überall 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.Toolbar=Blöcke|Fett kursiv unterstrichen strichenes Blockquotenabonnement hochgestelltes RemoveFormat| Bullistennummliste ausgerückt Einrücken|Wiederholen|Tabelle HR|Link aufheben|Bild-Mediencode|Visualblöcke-Vorschau im Vollbildmodus .
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 Textfarblink Bild MediencodeSpiegellisten Advlist Vollbild-Charmap-Direktionalitätsemoticons HR-EinfügedateTime Break drucken Suche Wortanzahl ersetzen Anker Codebeispielvisualblöcke visualchars compat3x autolink align_listitems,Editor.Toolbar= fontfamily fontsize | fett kursiv unterstreichen forecolor backcolor .
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 Mediencodespiegel Listen Advantlist Vollbild-Charmap-Direktionalitätsemoticons HR insertdatetime Non Breaking pagebreak drucken suchen Wortanzahl Ankertableofcontent Codebeispielvisualchars 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 sind: Advantlist align_listitems Anker autolink Automatische Größenänderung bbcode-Charmap Codespiegeln Codebeispiel-Farbauswahl-Direktionalitätsemoticons Vollbild-HR-Bild inserdatetime Link Listen Medien bruchbrechende Seitenreak-Vorschau drucken lesennicht Grenzensuchtabelle Textfarbtabellen visualblöcke 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=table Farbauswahl Textfarblink Bild MediencodeSpiegellisten Advlist Vollbild-Charmap-Direktionalitätsemoticons HR-EinfügedateTime Break drucken Suche Wortanzahl ersetzen Anker Codebeispielvisualblöcke visualchars compat3x autolink align_listitems,Editor.Toolbar= fontfamily fontsize | fett kursiv unterstreichen forecolor backcolor .
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 „Automatische 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 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 die Registerkarte Standardwert aus.
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 zum Formular mit einem HTML-Feld, 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 zum Formular mit einem HTML-Feld, 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.
Wählen Sie beispielsweise einen Incident-, Problem- oder Wissensdatensatz aus.
Klicken Sie mit der rechten Maustaste auf die Feldbezeichnung, und wählen Sie Dictionary konfigurieren.
Wählen Sie im Abschnitt zugehörige Links die Option Erweiterte Ansicht aus.
Geben Sie im Feld Attribute ein Editor.config=New TinymceConfigScript().getConfiguration() .

Dies Editor.Konfig Attribut verweist auf ein Skript: TinymceConfigScript() .

Greifen Sie auf zu TinymceConfigScript .

Navigieren zu Alle > Systemdefinition > Skripteinbindungenan.
Geben Sie Ein TinymceConfigScript Wählen Sie in der Suchleiste oben im Formular aus Geben Sie ein 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 alle Optionen „Datei“, „Bearbeiten“, „Ansicht“, „Einfügen“, „Format“, „Tabelle“ in der Menüleiste aktiviert.
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“ anhängen.

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 Formaten hinzugefügt (Fettdruck, 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.