ワザ33

「TinyMCE Advanced」でビジュアルエディターを使いやすくしよう

必要なアイコンだけを表示して編集環境をシンプルに

「TinyMCE Advanced」は、記事の編集に使うビジュアルエディターを拡張するプラグインです。特徴的な機能は2点あります。1点目は「エディターメニュー」(editor menu)というプルダウン式のメニューや、ツールバーの新しいボタンが追加されること。2点目は、ビジュアルエディターのツールバーをカスタマイズし、ボタンを自由に並び替えられるようになることです。詳しくは、下の画面をご覧ください。

エディターメニューの機能はツールバーと重複するものが多いですが、[コピー][貼り付け]など文書作成ソフトによくある機能も加わります。コピーや貼り付けはショートカットキーや右クリックメニューを使うことで通常のビジュアルエディターでも利用できますが、メニューに加わることで、わかりやすくなります。

ツールバーに追加されるボタンは、最初の状態だと多くありませんが、次のページの手順を参考にツールバーをカスタマイズすることで、多くのボタンを追加できます。文字の背景に色を付ける[背景色]などユニークなボタンがあるので、使ってみましょう。

Tips最初はクリップボード利用の許可が必要

TinyMCE Advancedで追加されるメニューの[コピー]や[貼り付け]を最初に利用するときは[このWebページがクリップボードへアクセスすることを許可しますか?]画面が表示されます。ここで[アクセスを許可する]をクリックすると利用可能になります。

TinyMCE Advancedで追加される機能

TinyMCE Advancedで追加される機能

Tips表(テーブル)の作成は「TablePress」で

TinyMCE Advancedを利用すると、ビジュアルエディターで表(テーブル)を作る機能が加わります。しかし、本書では、編集しやすく多機能なテーブル作成プラグイン「TablePress」をワザ35で解説します。テーブルの編集にはこちらを利用しましょう。

ビジュアルエディターのツールバーをカスタマイズするには

1プラグインの設定画面を表示する

プラグインの設定画面を表示する

2ツールバーのアイコンを移動

ツールバーのアイコンを移動

3ツールバーにアイコンを加える

ツールバーにアイコンを加える

4カスタマイズ内容を保存する

カスタマイズ内容を保存する