ディクショナリ属性を使用した TinyMCE ツールバーの構成

TinyMCE のデフォルトツールバーを変更する

ワークスペース全体で有効または無効になるように、システムプロパティのツールバー項目を設定します。

始める前に

必要なロール：admin

手順

移動先すべて > システムプロパティ > UI プロパティ.

[HTML フィールドの編集ツールバーを設定します (TinyMCE v6.8.3)] (glide.ui.html.editor.toolbar) プロパティを更新して、ツールバーのボタンを追加または削除します。

注:

セクションセパレーターを追加するには、垂直バー ("|") を使用します。


タイプ	ボタン
デフォルトのボタン	bold italic underline undo redo \| fontfamily fontsize table \| forecolor backcolor link unlink \| image media code \| alignleft aligncenter alignright \| bullist numlist fullscreen
有効なボタン	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

[保存] を選択します。

特定のテーブルの TinyMCE ツールバーを変更する

TinyMCE ディクショナリで属性を設定して、特定のテーブルに表示する TinyMCE 属性を決定します。

始める前に

必要なロール：admin

手順

変更する HTML タイプのフィールドがあるレコードに移動します。
たとえば、インシデント、問題、またはナレッジレコードを選択します。
フィールドラベル (記事の本文など) を右クリックし、[辞書を設定] を選択します。
[関連リンク] セクションで [詳細ビュー] を選択します。
[属性] フィールドに「editor.toolbar=」と入力し、その後に目的のツールバーボタンを入力します。
例：editor.toolbar=blocks|bold italic underline strikethrough blockquote subscript superscript removeformat| bullist numlist outdent indent|undo redo|table hr|link unlink|image media code|visualblocks preview fullscreen。
注:
- 追加するツールバーアイテムだけでなく、表示するすべてのツールバーアイテムを含めます。
- 関連する辞書レコードのフィールドの [属性] フィールドに対して行われた設定により、システムプロパティ glide.ui.html.editor.toolbar の値が上書きされます。
- [属性] フィールド内では複数の属性 (高さ、ツールバーボタン、ツールバープラグインなど) を組み合わせることができます。例：editor.height=300,editor.plugins=table colorpicker textcolor link image media codemirror lists advlist fullscreen charmap directionality emoticons hr insertdatetime nonbreaking pagebreak print searchreplace wordcount anchor codesample visualblocks visualchars compat3x autolink align_listitems,editor.toolbar= fontfamily fontsize | bold italic underline strikethrough forecolor backcolor pastetext removeformat | blocks searchreplace undo redo | bullist numlist outdent indent alignleft aligncenter alignright | tableofcontents table link unlink image media codesample | code fullscreen。
[更新] を選択します。

特定のテーブルの TinyMCE プラグインを変更する

TinyMCE ディクショナリで属性を設定し、特定の HTML フィールドでプラグインを有効または無効にします。

始める前に

必要なロール：admin

手順

変更する HTML タイプのフィールドがあるレコードに移動します。
たとえば、インシデント、問題、またはナレッジレコードを選択します。
フィールドラベル (記事の本文など) を右クリックし、[辞書を設定] を選択します。
[関連リンク] セクションで [詳細ビュー] を選択します。
[属性] フィールドに、「editor.plugins=」と入力し、その後に必要なプラグインをスペースで区切って入力します。
例：editor.plugins=table colorpicker textcolor link image media codemirror lists advlist fullscreen charmap directionality emoticons hr insertdatetime nonbreaking pagebreak print searchreplace wordcount anchor tableofcontents codesample visualblocks visualchars compat3x autolink align_listitems。
注:
- 追加するツールバーアイテムだけでなく、表示するすべてのツールバーアイテムを含めます。
- 関連する辞書レコードのフィールドの [属性] フィールドに対して行われた設定により、システムプロパティ glide.ui.html.editor.toolbar の値が上書きされます。
- 許可されたプラグインには次のものがあります：advlist align_listitems anchor autolink autoresize bbcode charmap codemirror codesample colorpicker directionality emoticons fullscreen hr image insertdatetime link lists media nonbreaking pagebreak preview print readonlynoborder searchreplace table textcolor tableofcontents visualblocks visualchars wordcount
- [属性] フィールド内では複数の属性 (高さ、ツールバーボタン、ツールバープラグインなど) を組み合わせることができます。例：editor.height=300,editor.plugins=table colorpicker textcolor link image media codemirror lists advlist fullscreen charmap directionality emoticons hr insertdatetime nonbreaking pagebreak print searchreplace wordcount anchor codesample visualblocks visualchars compat3x autolink align_listitems,editor.toolbar= fontfamily fontsize | bold italic underline strikethrough forecolor backcolor pastetext removeformat | blocks searchreplace undo redo | bullist numlist outdent indent alignleft aligncenter alignright | tableofcontents table link unlink image media codesample | code fullscreen。
[更新] を選択します。

HTML フィールドのデフォルトの高さを変更する

特定の HTML フィールドのデフォルトの高さを変更して、ジャーナルフィールドのサイズを拡張します。

始める前に

必要なロール：admin

このタスクについて

HTML フィールドの高さは、HTML フィールドごとに構成されます。

手順

変更する HTML タイプのフィールドがあるレコードに移動します。
たとえば、インシデント、問題、またはナレッジレコードを選択します。
フィールドラベル (記事の本文など) を右クリックし、[辞書を設定] を選択します。
[関連リンク] セクションで [詳細ビュー] を選択します。
[属性] フィールドに「editor.height=X」と入力します (X は必要な高さです)。
例： editor.height=250
注:
HTML フィールドの範囲は 72 から 2000 です。HTML フィールドはデフォルトで 64 です。
[更新] を選択します。
特定の高さを指定するのではなく、テキスト行の増加に合わせてフォームフィールドの高さを動的に設定するには、次の手順を実行します。
1. 移動先すべて > システムプロパティ > すべてのプロパティ
2. 検索バーに「glide.ui.html.editor.enabled_plugins」と入力し、プロパティを選択します。
3. 値フィールドに autoresize を追加します。
4. [更新] を選択します。
  自動サイズ変更プラグインがアクティブになります。

HTML フィールドのデフォルトのフォントサイズを変更する

特定の HTML フィールドのデフォルトのフォントサイズを、フォーム全体で標準のフォントサイズを使用するように変更します。

始める前に

必要なロール：admin

このタスクについて

HTML フィールドのフォントサイズは、HTML フィールドごとに構成されます。

手順

変更する HTML タイプのフィールドがあるレコードに移動します。
たとえば、インシデント、問題、またはナレッジレコードを選択します。
フィールドラベル (記事の本文など) を右クリックし、[辞書を設定] を選択します。
[デフォルト値 (Default Value)] タブを選択します。
[デフォルト値] フィールドに、 (デフォルト値 X) と入力します。
例：
- フォントを大きくするには、 と入力します。
- サイズを 10 に設定するには、 と入力します。
[更新] を選択します。

廃止されたタグを許可するように TinyMCE を構成する

TinyMCE フィールドに辞書属性を設定して、 や などの廃止された HTML タグの使用を許可することができます。デフォルトでは、TinyMCE は太字および斜体の書式設定に タグと タグを使用します。

始める前に

必要なロール：personalize_dictionary または admin

このタスクについて

辞書属性を設定した後、コードビューを使用して、廃止されたタグを手動で入力します。たとえば、間違った文字を入力した場合など、手動で入力したタグはエディターによって検証されません。

手順

TinyMCE を使用する HTML フィールドのあるフォームに移動します。
HTML フィールドラベルを右クリックし、[ディクショナリを設定] を選択します。
[属性] フィールドに、必要に応じてカンマで区切って、「tinymce_allow_all=true」と入力します。

辞書エントリ属性は、デフォルトビューには表示されないため、辞書エントリフォームが詳細ビューにある場合にのみ追加できます。

他の属性が既に表示されている場合は、カンマをセパレーターとして使用します。
[Update (更新)] をクリックします。

URL で JavaScript を許可するように TinyMCE を構成する

TinyMCE フィールドに辞書属性を設定して、URL での JavaScript の使用を許可することができます。

始める前に

必要なロール：personalize_dictionary または admin

手順

TinyMCE を使用する HTML フィールドのあるフォームに移動します。
HTML フィールドラベルを右クリックし、[ディクショナリを設定] を選択します。
[属性] フィールドに、必要に応じてカンマで区切って、「tinymce_allow_script_urls=true」と入力します。

辞書エントリ属性は、デフォルトビューには表示されないため、辞書エントリフォームが詳細ビューにある場合にのみ追加できます。

他の属性が既に表示されている場合は、カンマをセパレーターとして使用します。
[Update (更新)] をクリックします。

TinyMCE HTML エディターでメニューバーを構成する

TinyMCE HTML エディターのメニューバーは、CoreUI とワークスペースの両方で有効にできます。有効にすると、メニューバーが HTML エディターの上部に表示され、コンテンツの作成、編集、書式設定に使用できます。デフォルトでは、メニューバーは非アクティブです。辞書の属性構成を使用して、特定のテーブルに対して有効にすることができます。

始める前に

必要なロール：admin

手順

変更する HTML タイプのフィールドがあるレコードに移動します。
たとえば、インシデント、問題、またはナレッジレコードを選択します。
フィールドラベルを右クリックし、[ディクショナリを構成] を選択します。
[関連リンク] セクションで [詳細ビュー] を選択します。
[属性] フィールドに「editor.config=new TinymceConfigScript().getConfiguration()」と入力します。

この editor.config 属性は、スクリプト TinymceConfigScript() を指します。

TinymceConfigScript にアクセスします。

移動先すべて > システム定義 > スクリプトインクルード.
フォームの上部付近にある検索バーに「TinymceConfigScript」と入力し、 Enter キーまたは Return キーを選択します。

「TinymceConfigScript」を選択します。

デフォルトでは、次のスクリプトが表示されます。

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

スクリプトでメニューバー属性を true に設定して、メニューバーを有効にします。
これにより、メニューバーのすべてのオプション「ファイル」、「編集」、「表示」、「挿入」、「フォーマット」、「テーブル」が有効になります。
メニューバーを無効にする場合は、メニューバー属性を false に設定します。
メニューバーの特定のオプションのみを有効にする場合は、メニューバーにそれらの特定のオプションをリスト化することでスクリプトを変更できます。

たとえば、「menu bar: 'file edit format'」とすると、メニューバーにこれら 3 つのオプションのみが表示されます。

スクリプトを変更して、メニュー内に表示されるボタンを設定することもできます。

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

style_formats セクションに CSS を追加して、TinyMCEConfigScript のカスタムスタイル形式オプションを設定します。

TinyMCEConfigScript の style_formats セクションの例：

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' }
  ]}
]

3 つの新しいスタイル形式 (Bold text、Red 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
});

HTML エディターにアクセスすると、新しいカスタムスタイル形式 (Bold text、Red text、My-inline) がメニューバーの [形式] セクションに表示されます。