記事の更新を便利にするべくFCKEditorを導入しました。
デフォルトでも文字装飾等が一気に便利になるのですが、今回は選択できるスタイルをカスタマイズして自分で定義したcssやモジュールの追加も簡単にできるようにしてみました。
FCKEditorをインストール
以下からFCKEditorをダウンロード
今回はこちらの「FCKeditor 2.6日本語ローカライズ版」を利用させてもらいました。
データをサーバーにアップロード
ダウンロードしたデータからmt-staticとpluginsを上書きインストールします。
MTの管理画面からプラグインを確認。
アップロードが完了したら管理画面のシステムメニューからプラグインを確認します。
有効になっていることが確認できたらmt-configの一番下の行に下記のコードを追加します。
#======== RichTextEditor ==========
RichTextEditor FCKeditor
これでインストールは完了!
スタイルのカスタマイズ
デフォルトだとスタイルのプルダウンはでていないので
mt-static/plugins/FCKeditor/fckeditor/fckconfig.jsの129行目の [‘FontFormat’,’FontName’,’FontSize’]を[‘Style’,’FontFormat’,’FontName’,’FontSize’]に変更。
これでスタイルプルダウンが表示される。
ちなみに自分はフォントは変える必要なかったので
[‘Style’,’FontFormat’,’FontSize’] として設定してます。
次に自分が定義したスタイルをプレビューに適用させるために
mt-static/plugins/FCKeditor/fckeditor/editor/css/fck_editorarea.css
にCSSをインポートしておきます。
そしたらプルダウンの設定を変えていきます。
スタイルのプルダウンを制御しているのはこちら
mt-static/plugins/FCKeditor/fckeditor/fckstyles.xml
これの<Styles>~</Styles>のノードの中に
<Style name=”装飾A” element=”p”>
<Attribute name=”class” value=”classAAA” />
</Style>
って感じで記述してあげると
<p>タグに”classAAA”を適用する[装飾A]という項目がプルダウンに追加されます。
<Style name=”[項目名]” element=”[対象のタグ]”>
<Attribute name=”class” value=”[記述する値]” />
</Style>
ちなみに
<Style name=”[項目名]” element=”[対象のタグ]”>
<Attribute name=”style” value=”padding: 5px; margin-right: 5px” />
<Attribute name=”border” value=”2″ />
<Attribute name=”align” value=”left” />
</Style>
と書く事でclass以外のプロパティにも値を適用することができます。
<ul>とかにはうまく設定できなかったんですが、これはあとで検証。。