WEB制作関連

MT4.2にFCKEditorを導入しました。

記事の更新を便利にするべくFCKEditorを導入しました。

デフォルトでも文字装飾等が一気に便利になるのですが、今回は選択できるスタイルをカスタマイズして自分で定義したcssやモジュールの追加も簡単にできるようにしてみました。

FCKEditorをインストール

20100828_2.jpg

以下からFCKEditorをダウンロード

今回はこちらの「FCKeditor 2.6日本語ローカライズ版」を利用させてもらいました。

データをサーバーにアップロード

ダウンロードしたデータからmt-staticとpluginsを上書きインストールします。

MTの管理画面からプラグインを確認。

アップロードが完了したら管理画面のシステムメニューからプラグインを確認します。


20100828_3.jpg

有効になっていることが確認できたらmt-configの一番下の行に下記のコードを追加します。

#======== RichTextEditor ==========
RichTextEditor FCKeditor

これでインストールは完了!

スタイルのカスタマイズ

20100828_4.jpg

デフォルトだとスタイルのプルダウンはでていないので

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>とかにはうまく設定できなかったんですが、これはあとで検証。。

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

関連記事

  1. WEBディレクターズマニュアル

    WEBディレクターの為のEXCEL術(2)課題管理表

    実は普段仕事をしている中で、口頭でお願いした作業は100%忘れられると…

  2. WEBディレクターズマニュアル

    WEBディレクターの為のEXCEL術(3)作業が捗る小技10選

    WEBサイトを制作していると通常のワークフローの他にも原稿の作成やデー…

  3. WEB制作関連

    レトロな雰囲気が素敵なWEBサイト20個

    レトロな雰囲気を醸し出しているWEBサイトのまとめです。 (さ…

  4. WEB制作関連

    色とWEBデザイン -茶色編-

    色別WEBデザインのまとめです。今回のテーマは「茶色」です。 …

  5. WEB制作関連

    jQueryを学ぶなら必ず見ておきたいサイトまとめ

    今年こそはjQueryを学ぼうという方、またサンプル通りにやれば設置で…

  6. WEB制作関連

    レトロなデザインのWEBサイトまとめ

    レトロな雰囲気を持ったデザインのWEBサイトのまとめです。 (…

  1. WEBマーケティング

    マーケティング心理学|テンションリダクション
  2. WEB制作関連

    アプリのようなスライドメニューを実装するプラグイン6選
  3. iPhone

    WEBサイトが素敵な80のiPhoneアプリ
  4. WEBディレクターズマニュアル

    WEBディレクターの為のEXCEL術(2)課題管理表
  5. WEB制作関連

    ガーリーなPhotoshopのレイヤースタイル
PAGE TOP
Top