HTMLエディタ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 Rich Text Editor>設定タブを開き、「Custom Parameters」に以下の行を追加します。

theme_advanced_source_editor_wrap : false,
Edited on 2016.12.15 Created on 2012.10.16 MODXCMSEvoRevoWebデザイン
PAGE TO TOP