--- sourceDocument: Xanadu Now Platform の管理 sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/ja-JP/xanadu/platform-administration Release : - xanadu ft:locale : - ja-JP ft:publication_title : - Xanadu Now Platform の管理 ft:clusterId : - platadm bundleId : - platadm workflow : - Platform --- # ディクショナリ属性を使用した TinyMCE ツールバーの構成 # ディクショナリ属性を使用した TinyMCE ツールバーの構成 {#ariaid-title1} * リリースバージョン: Xanadu * * 更新日 2024年08月01日 * * ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 所要時間：21分 ディクショナリ属性を設定することで、特定のテーブル用に TinyMCE HTML エディターを構成できます。 ツールバーの設定については、「[TinyMCE のデフォルトツールバーを変更する](https://servicenow-prod.fluidtopics.net/M0wpSG0iG9PKmBppc4Lukw#set-dictionary-attributes-workspace "ワークスペース全体で有効または無効になるように、システムプロパティのツールバー項目を設定します。")」を参照してください。特定のプラグインの設定については、「[特定のテーブルの TinyMCE プラグインを変更する](https://servicenow-prod.fluidtopics.net/M0wpSG0iG9PKmBppc4Lukw#set-attributes-tinymce-dictionary "TinyMCE ディクショナリで属性を設定し、特定の HTML フィールドでプラグインを有効または無効にします。")」を参照してください。HTML フィールドのデフォルトの高さの設定については、「[HTML フィールドのデフォルトの高さを変更する](https://servicenow-prod.fluidtopics.net/M0wpSG0iG9PKmBppc4Lukw#configure-height-tinymce "特定の HTML フィールドのデフォルトの高さを変更して、ジャーナルフィールドのサイズを拡張します。")」を参照してください。HTML フィールドでデフォルトのフォントサイズを設定する方法については、「[HTML フィールドのデフォルトのフォントサイズを変更する](https://servicenow-prod.fluidtopics.net/M0wpSG0iG9PKmBppc4Lukw#configure-font-size-tinymce "特定の HTML フィールドのデフォルトのフォントサイズを、フォーム全体で標準のフォントサイズを使用するように変更します。")」を参照してください。TinyMCE HTML エディターでメニューバーを構成する方法については、「[TinyMCE HTML エディターでメニューバーを構成する](https://servicenow-prod.fluidtopics.net/M0wpSG0iG9PKmBppc4Lukw#customize-the-text-menu-bar-in-tinymce "TinyMCE HTML エディターのメニューバーは、CoreUI とワークスペースの両方で有効にできます。有効にすると、メニューバーが HTML エディターの上部に表示され、コンテンツの作成、編集、書式設定に使用できます。デフォルトでは、メニューバーは非アクティブです。辞書の属性構成を使用して、特定のテーブルに対して有効にすることができます。")」を参照してください。 **関連概念** * [TinyMCE HTML エディターのプラグインの構成](https://servicenow-prod.fluidtopics.net/6XkjztzwcJX4ImPglnZ~IA#configuring-plugins-for-TinyMCE-HTML-editor "TinyMCE HTML エディターは強力で柔軟性があり、カスタマイズ可能なリッチテキストエディターです。プラグインを使用してエディターを構成して拡張できます。") **関連タスク** * [HTML ツールバーの構成](https://servicenow-prod.fluidtopics.net/nmbRENrvC0_rAdHAMfQdUg "HTML ツールバーで使用できるボタンを構成します。") **関連資料** * [TinyMCE HTML エディターのシステムプロパティの構成](https://servicenow-prod.fluidtopics.net/bXtw4iXGZKS5JIGGjMD1hQ "HTML エディターのフィールドタイプの動作を構成するために使用される、複数のシステムプロパティがあります。TinyMCE リッチテキストエディターで利用可能なシステムプロパティについて説明します。") ## TinyMCE のデフォルトツールバーを変更する {#ariaid-title2} ワークスペース全体で有効または無効になるように、システムプロパティのツールバー項目を設定します。 ### 始める前に 必要なロール：admin ### 手順 1. 移動先 すべてシステムプロパティUI プロパティ. 2. \[HTML フィールドの編集ツールバーを設定します (TinyMCE v6.8.3)\] (glide.ui.html.editor.toolbar) プロパティを更新して、ツールバーのボタンを追加または削除します。 注: セクションセパレーターを追加するには、垂直バー ("\|") を使用します。 {#set-dictionary-attributes-workspace__table_gmc_gd4_jyb__entry__2} | タイプ | ボタン | |-|-| | デフォルトのボタン | 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 | [ ] {#set-dictionary-attributes-workspace__table_gmc_gd4_jyb} 3. \[保存\] を選択します。 ## 特定のテーブルの TinyMCE ツールバーを変更する {#ariaid-title3} TinyMCE ディクショナリで属性を設定して、特定のテーブルに表示する TinyMCE 属性を決定します。 ### 始める前に 必要なロール：admin ### 手順 1. 変更する HTML タイプのフィールドがあるレコードに移動します。 たとえば、インシデント、問題、またはナレッジレコードを選択します。 2. フィールドラベル (記事の本文など) を右クリックし、\[辞書を設定\] を選択します。 3. \[関連リンク\] セクションで \[詳細ビュー\] を選択します。 4. \[属性\] フィールドに「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。 {#change-tinymce-toolbar-specific-table__ul_ofn_t35_jyb} 5. \[更新\] を選択します。 ## 特定のテーブルの TinyMCE プラグインを変更する {#ariaid-title4} 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 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。 {#set-attributes-tinymce-dictionary__ul_msy_zgw_3lb} 5. \[更新\] を選択します。 {#set-attributes-tinymce-dictionary__steps_of5_mhw_3lb} ## HTML フィールドのデフォルトの高さを変更する {#ariaid-title5} 特定の 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.enabled_plugins」と入力し、プロパティを選択します。 3. 値フィールドに autoresize を追加します。 4. \[更新\] を選択します。 自動サイズ変更プラグインがアクティブになります。 ## HTML フィールドのデフォルトのフォントサイズを変更する {#ariaid-title6} 特定の 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> と入力します。 {#configure-font-size-tinymce__ul_pns_pc4_hvb} 5. \[更新\] を選択します。 ## 廃止されたタグを許可するように TinyMCE を構成する {#ariaid-title7} TinyMCE フィールドに辞書属性を設定して、\ や \ などの廃止された HTML タグの使用を許可することができます。デフォルトでは、TinyMCE は太字および斜体の書式設定に \ タグと \ タグを使用します。 ### 始める前に 必要なロール：personalize_dictionary または admin ### このタスクについて 辞書属性を設定した後、コードビューを使用して、廃止されたタグを手動で入力します。たとえば、間違った文字を入力した場合など、手動で入力したタグはエディターによって検証されません。 ### 手順 1. TinyMCE を使用する HTML フィールドのあるフォームに移動します。 2. HTML フィールドラベルを右クリックし、\[ディクショナリを設定\] を選択します。 3. \[属性\] フィールドに、必要に応じてカンマで区切って、「tinymce_allow_all=true」と入力します。 辞書エントリ属性は、デフォルトビューには表示されないため、辞書エントリフォームが詳細ビューにある場合にのみ追加できます。 他の属性が既に表示されている場合は、カンマをセパレーターとして使用します。 4. \[Update (更新)\] をクリックします。 ## URL で JavaScript を許可するように TinyMCE を構成する {#ariaid-title8} TinyMCE フィールドに辞書属性を設定して、URL での JavaScript の使用を許可することができます。 ### 始める前に 必要なロール：personalize_dictionary または admin ### 手順 1. TinyMCE を使用する HTML フィールドのあるフォームに移動します。 2. HTML フィールドラベルを右クリックし、\[ディクショナリを設定\] を選択します。 3. \[属性\] フィールドに、必要に応じてカンマで区切って、「tinymce_allow_script_urls=true」と入力します。 辞書エントリ属性は、デフォルトビューには表示されないため、辞書エントリフォームが詳細ビューにある場合にのみ追加できます。 他の属性が既に表示されている場合は、カンマをセパレーターとして使用します。 4. \[Update (更新)\] をクリックします。 ## TinyMCE HTML エディターでメニューバーを構成する {#ariaid-title9} TinyMCE HTML エディターのメニューバーは、CoreUI とワークスペースの両方で有効にできます。有効にすると、メニューバーが HTML エディターの上部に表示され、コンテンツの作成、編集、書式設定に使用できます。デフォルトでは、メニューバーは非アクティブです。辞書の属性構成を使用して、特定のテーブルに対して有効にすることができます。 ### 始める前に 必要なロール：admin ### 手順 1. 変更する HTML タイプのフィールドがあるレコードに移動します。 たとえば、インシデント、問題、またはナレッジレコードを選択します。 2. フィールドラベルを右クリックし、\[ディクショナリを構成\] を選択します。 3. \[関連リンク\] セクションで \[詳細ビュー\] を選択します。 4. \[属性\] フィールドに「editor.config=new TinymceConfigScript().getConfiguration()」と入力します。 この editor.config 属性は、スクリプト TinymceConfigScript() を指します。 5. TinymceConfigScript にアクセスします。 1. 移動先 すべてシステム定義スクリプトインクルード. 2. フォームの上部付近にある検索バーに「TinymceConfigScript」と入力し、 Enter キーまたは Return キーを選択します。 3. 「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' }; 4. スクリプトでメニューバー属性を true に設定して、メニューバーを有効にします。 これにより、メニューバーのすべてのオプション「ファイル」、「編集」、「表示」、「挿入」、「フォーマット」、「テーブル」が有効になります。 5. メニューバーを無効にする場合は、メニューバー属性を false に設定します。 6. メニューバーの特定のオプションのみを有効にする場合は、メニューバーにそれらの特定のオプションをリスト化することでスクリプトを変更できます。 たとえば、「menu bar: 'file edit format'」とすると、メニューバーにこれら 3 つのオプションのみが表示されます。 7. スクリプトを変更して、メニュー内に表示されるボタンを設定することもできます。 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' } } }); {#customize-the-text-menu-bar-in-tinymce__substeps_r5l_x41_2cc} 6. 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) がメニューバーの \[形式\] セクションに表示されます。