TinyMCEの使い方と編集画面カスタマイズ

最終更新日
2017.10.15

移行作業中のため一部のページが正しく表示されていない場合があります(o-ω-))

TinyMCEの使い方と編集画面のカスタマイズ方法です。

TinyMCE はパッケージに同梱されている WYSIWYG エディター用のプラグインです。
ソースコードを見なくても視覚的にページの編集をすることができます。

ショートカット

ドキュメントでショートカット一覧が見つからなかったのでコアに直接書かれてたものと試してみて分かったものだけです。

ctrl+[1-6] ブロックをh1~h6に変換
ctrl+7 ブロックを<p>に変換
ctrl+8 ブロックを<div>に変換
ctrl+9 ブロックを<address>に変換
ctrl+b 太字にする
ctrl+i 斜体にする
ctrl+u 下線を付ける
ctrl+k リンクの挿入/編集
ctrl+c コピー
ctrl+v ペースト
ctrl+shift+v テキスト形式で貼り付け

よく使うクラス名を登録する

まず先に、MODX のデフォルトテーマだとクラス名のドロップダウンメニューが表示されていないので管理画面の設定の TinyMCE のテーマをクリエイティブなどに変更するか、カスタムテーマを選択します。カスタムテーマを使う場合は styleselect で登録できます。カスタムボタンの Row の好きな所に登録します。例えば Raw2 の一番最後に追加したら、2行目のツールバーの一番右にある書式の削除ボタンのとなりにスタイル選択のメニューが出てきます。

サンプルコード用のクラスや、装飾などよく使うクラス名をエディタのドロップダウンメニューで選べるように登録します。
管理画面から、ツール>グローバル設定>管理画面の設定タブを開き、CSSスタイルセレクタ:に使うクラス名と表示名を追加します。

表示名=クラス名

登録の形式は上の用な感じで、複数ある場合はセミコロンで区切ります。
以下は例です。

画像=pct;外部リンク=gbl;Javascript=brush:js

これで編集もだいぶ楽になりますね!好きなだけ追加しましょう。

ファイルブラウザをKCFinderに変更する

デフォルトでもファイルブラウザが付いているんですが、より高機能なファイルブラウザ「KCFinder」を利用してみましょう。
まずは以下の日本公式サイトからダウンロードします。

http://modx.jp/download/extras/plugins/kcfinder.html

ファイルを解凍して、plugins フォルダの中の kcfinder を、assets/plugins/ の中にコピーします。
エレメント>エレメント管理のページからプラグインタブを開き、新規プラグインを作成します。
内容にはファイルの中にある「kcfinder.tpl」ファイルの内容をコピペすると、オプションは自動的に設定されます。

次に、同じプラグインタブの一覧にある「TinyMCE Rich Text Editor」をクリックして、設定タブを開きます。
「Custom Parameters」に以下の行を追加します。

file_browser_callback: 'openKCFinder',

これで TinyMCE からファイルブラウザを開いた時に KCFinder が開くようになります。
ちなみに、フォルダ名には日本語は使えません。

その他オプションの変更

TinyMCE 本体のオプションは上記の画面から「Custom Parameters」に以下の行を追加します。

ソースコード表示の行の折り返しをデフォルトでオフにする

チェックボックスを外せばリアルタイムに切り替わるんですが、個人的にソースが折り返されるのがあんまり好きじゃないのでデフォルトをオフにしました。

theme_advanced_source_editor_wrap : false,

コピペ等した時に<span>が入らないようにする

自動的に空の span や line-height の入ったspanタグが自動的に削除されます。ただ、自分で style 属性だけを指定した場合も消えてしまうので、その場合は一緒にダミーのクラスを付ける必要があります。もしくは [!class|!style] とすれば class か style どちらかがついているものは消えなくなります。

extended_valid_elements : "span[!class]",