TinyMCE 属性のカスタマイズ

  • リリースバージョン: Washingtondc
  • 更新日 2024年02月01日
  • 読む9読むのに数分
  • TinyMCE ツールバーと HTML フィールドのデフォルトの高さを変更して、ジャーナルフィールドエクスペリエンスをカスタマイズします。

    デフォルトの TinyMCE ツールバーで TinyMCE 属性を追加または削除します。TinyMCE 属性は、プラットフォームとワークスペースの TinyMCE ツールバー、または レコード内の特定のプラグインまたはレコード内の特定のテーブルに適用されます。属性を適用して HTML フィールドの高さを増やし、エージェントが操作する HTML フィールドを拡大することもできます。

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

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

    始める前に

    必要なロール:管理者

    手順

    1. 移動先 すべて > システムプロパティ > UI プロパティ.
    2. [HTML フィールドの編集ツールバーを設定します (TinyMCE v5)] (glide.ui.html.editor.v5.toolbar) プロパティを更新して、ツールバーのボタンを追加または削除します。
      注:
      セクションセパレーターを追加するには、垂直バー ("|") を使用します。
      タイプ ボタン
      デフォルトのボタン bold italic underline undo redo | fontselect fontsizeselect table | forecolor backcolor link unlink | image media code | alignleft aligncenter alignright | bullist numlist fullscreen
      有効なボタン newdocument, bold, italic, underline, strikethrough, alignleft, aligncenter, alignright, alignjustify, formatselect, fontselect, fontsizeselect, table, cut, copy, paste, pastetext, searchreplace, bullist, numlist, outdent, indent, blockquote, undo, redo, link, unlink, code, forecolor, backcolor, removeformat, hr, visualblocks, subscript, superscript, charmap, image, media, fullscreen, anchor, toc, codesample, ltr, rtl, emoticons, insertdatetime, nonbreaking, pagebreak, print, visualblocks, visualchars, cut, copy
    3. [保存] を選択します。

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

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

    始める前に

    必要なロール:admin

    手順

    1. 変更する HTML タイプのフィールドがあるレコードに移動します。
      たとえば、インシデント、問題、またはナレッジレコードを選択します。
    2. フィールドラベル (記事の本文など) を右クリックし、[辞書を設定] を選択します。
    3. [関連リンク] セクションで [詳細ビュー] を選択します。
    4. [属性] フィールドに「editor.toolbar=」と入力し、その後に目的のツールバーボタンを入力します。
      例:editor.toolbar=formatselect|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.v5.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 toc codesample visualblocks visualchars compat3x autolink align_listitems,editor.toolbar= fontselect fontsizeselect | bold italic underline strikethrough forecolor backcolor pastetext removeformat | formatselect searchreplace undo redo | bullist numlist outdent indent alignleft aligncenter alignright | toc table link unlink image media codesample | code fullscreen
    5. [更新] を選択します。

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

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

    始める前に

    必要なロール:admin

    手順

    1. 変更する HTML タイプのフィールドがあるレコードに移動します。
      たとえば、インシデント、問題、またはナレッジレコードを選択します。
    2. フィールドラベル (記事の本文など) を右クリックし、[辞書を設定] を選択します。
    3. [関連リンク] セクションで [詳細ビュー] を選択します。
    4. [属性] フィールドに、「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 toc codesample visualblocks visualchars compat3x autolink align_listitems

      注:
      • 追加するツールバーアイテムだけでなく、表示するすべてのツールバーアイテムを含めます。
      • 関連する辞書レコードのフィールドの [属性] フィールドに対して行われた設定により、システムプロパティ glide.ui.html.editor.v5.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 toc 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 toc codesample visualblocks visualchars compat3x autolink align_listitems,editor.toolbar= fontselect fontsizeselect | bold italic underline strikethrough forecolor backcolor pastetext removeformat | formatselect searchreplace undo redo | bullist numlist outdent indent alignleft aligncenter alignright | toc table link unlink image media codesample | code fullscreen
    5. [更新] を選択します。

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

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

    始める前に

    必要なロール:admin

    このタスクについて

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

    手順

    1. 変更する HTML タイプのフィールドがあるレコードに移動します。
      たとえば、インシデント、問題、またはナレッジレコードを選択します。
    2. フィールドラベル (記事の本文など) を右クリックし、[辞書を設定] を選択します。
    3. [関連リンク] セクションで [詳細ビュー] を選択します。
    4. [属性] フィールドに「editor.height=X」と入力します (X は必要な高さです)。
      例: editor.height=250
      注:

      HTML フィールドの範囲は 72 から 2000 です。HTML フィールドはデフォルトで 64 です。

    5. [更新] を選択します。
    6. 特定の高さを指定するのではなく、テキスト行の増加に合わせてフォームフィールドの高さを動的に設定するには、次の手順を実行します。
      1. 移動先 すべて > システムプロパティ > すべてのプロパティ
      2. 検索バーに「glide.ui.html.editor.v5.enabled_plugins」と入力し、プロパティを選択します。
      3. 値フィールドに autoresize を追加します。
      4. [更新] を選択します。
        自動サイズ変更プラグインがアクティブになります。

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

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

    始める前に

    必要なロール:admin

    このタスクについて

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

    手順

    1. 変更する HTML タイプのフィールドがあるレコードに移動します。
      たとえば、インシデント、問題、またはナレッジレコードを選択します。
    2. フィールドラベル (記事の本文など) を右クリックし、[辞書を設定] を選択します。
    3. [デフォルト値 (Default Value)] タブを選択します。
    4. [デフォルト値] フィールドに、<p style="font-size:X;"></p> (デフォルト値 X) と入力します。
      例:
      • フォントを大きくするには、<p style="font-size:large;"></p> と入力します。
      • サイズを 10 に設定するには、<p style="font-size:10pt;"></p> と入力します。
    5. [更新] を選択します。