FAQ2786: リッチテキストエディターのツールバーやコンテキストメニューの項目をカスタマイズするには

Title: リッチテキストエディターのツールバーやコンテキストメニューの項目をカスタマイズするには

TeamPage は TinyMCE を標準のリッチテキストエディターとして採用しています。

TeamPage の TinyMCE のツールバーやコンテキストメニュー（マウスの右クリックで表示されるメニュー）に表示される項目は、Download2143: Proteus カスタム JavaScript & CSS プラグインを使ってカスタマイズできます。

ツールバーとコンテキストメニュー

リッチテキストエディターのツールバーとコンテキストメニューは、下図で示された部分のことです。ここに表示されるメニュー項目をカスタマイズします。

Proteus カスタム JavaScript & CSS プラグイン設定

1. プラグインの編集画面の [JavaScript] 欄に、Proteus.addHandler("load", function(){ 〜 }); を記入します。

2. 上図の空行の部分に次のコードを記入します。これは、既定のツールバーとコンテキストメニュー用の設定です。

Traction.Edit.TinyMce.DEFAULT_TINYMCE_OPTIONS.contextmenu = "bold italic underline strikethrough subscript superscript codeformat | inserttractionlink inserttractionimage inserttractionwidget | inserttable cell row column deletetable | unlink removeformat";
Traction.Edit.TinyMce.DEFAULT_TINYMCE_OPTIONS.toolbar = "tinymenu | formatselect | forecolor | backcolor | bold italic | alignmentselect | bullist numlist outdent indent blockquote | tractionlink unlink tractionimage table | tractionwidget";
Traction.Edit.TinyMce.DEFAULT_TINYMCE_OPTIONS.tinymenu_menus = {
  edit: { text: "Edit", items: 'undo redo | cut copy paste pastetext | selectall removeformat' },
  view: { text: "View", items: 'fullscreen visualaid code' },
  font: { text: "Font", items: 'fontmenu fontsizemenu' },
  insert: { text: "Insert", items: 'inserttractionlink inserttractionimage inserttractionwidget | inserttable charmap hr pagebreak' }
};

実際のプラグイン設定画面に記入すると、下図ようになります。赤枠内が記入したコードです。

3. 既に他のカスタマイズ用に Proteus.addHandler("load", function(){ 〜 }); が記入されている場合は、記入済みの部分を削除したり二重に記入したりする必要はありません。既存のコードに上記 2. のコードを追記して下さい。

コンテキストメニューのカスタマイズ

追加したコードの 1 行目の Traction.Edit.TinyMce.DEFAULT_TINYMCE_OPTIONS.contextmenu = の右辺でコンテキストメニューに表示される項目を指定します。

右辺には bold や italic などのキーワードが並んでいます。これらが表示する項目を表しています。なお、縦棒記号（|）は区切り線を表します。

bold ... 太字
italic ... イタリック体
underline ... 下線
strikethrough ... 取り消し線
subscript ... 下付き文字
superscript ... 上付き文字
codeformat ... コード
inserttractionlink ... リンクの挿入/編集
inserttractionimage ... 画像の挿入/編集
inserttractionwidget ... ウィジェットの挿入/編集
inserttable ... 表
cell ... セル
row ... 行
column ... 列
deletetable ... 表の削除
unlink ... リンクの削除
removeformat ... 書式をクリア

詳しくは、TinyMCE のマニュアルを参照して下さい。

下図は、undo, redo, formats を追加した例です。

ツールバーのカスタマイズ

追加したコードの 2 行目の Traction.Edit.TinyMce.DEFAULT_TINYMCE_OPTIONS.toolbar = の右辺でツールバーに表示される項目を指定します。

tinymenu ... メニュー（歯車メニュー）
formatselect ... 段落や見出しなどのドロップダウンリスト
forecolor ... テキストの色
backcolor ... 背景色
bold ... 太字
italic ... イタリック体
alignmentselect ... 配置（左寄せ、中央寄せ、右寄せ、両端揃え）
bullist ... 箇条書き
numlist ... 番号付き箇条書き
outdent ... インデントを減らす
indent ... インデントを増やす
blockquote ... 引用
tractionlink ... リンクの挿入/編集
unlink ... リンクの削除
tractionimage ... 画像の挿入/編集
table ... 表
tractionwidget ... ウィジェットの挿入/編集

下図は、fontselect, fontsizeselect, undo, redo を追加した例です。

歯車メニューのカスタマイズ

追加したコードの 3 〜 7 行目の Traction.Edit.TinyMce.DEFAULT_TINYMCE_OPTIONS.tinymenu_menus = の右辺で、歯車メニューに表示される項目を指定します。

右辺の edit: view: font: insert: が歯車メニューの第 1 階層の項目に対応しています。（メニューの一番下の [書式] は設定できません）

そして、items: の右側に第 2 階層として表示する項目が並んでいます。

例えば、edit: の行は、「[編集] メニューの中に [元に戻す] (undo), [やり直す] (redo), [切り取り] (cut), [コピー] (copy) ... を表示する」という設定になっています。この [編集] メニューから [元に戻す] と [やり直す] を削除するには、undo と redo （と区切り線）を削除します。

Attachments:

tinymce_01.png
js_01.png
js_02.png
js_03.png
js_04.png
example1.png
example2.png

参照している (1)

Download2143: Proteus カスタム JavaScript & CSS プラグイン

Article: FAQ2786 (permalink)
Categories: :FAQ:カスタマイズ, :FAQ:TinyMCE, :DocJp:FAQ
Date: 2018/07/06; 16時33分00秒 JST

Author Name: TeamPage サポート
Author ID: jpbo

ツールバーとコンテキスト メニュー

Proteus カスタム JavaScript & CSS プラグイン設定

コンテキスト メニューのカスタマイズ

ツールバーのカスタマイズ

歯車メニューのカスタマイズ

ツールバーとコンテキストメニュー

コンテキストメニューのカスタマイズ