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デザイン -あか編-

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

  2. WEB制作関連

    色とWEBデザイン -オレンジ編-

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

  3. WEB制作関連

    徹底比較。クロスブラウザのテストツール15個

    HTML5や新しいデバイスの登場で今後も頭を悩まされそうなクロスブラウ…

  4. WEB制作関連

    やっぱりカッコいい。デザイン事務所のWEBサイト30個

    「紺屋の白袴」という言葉もありますが、デザインを提案するならまずは自ら…

  5. WEB制作関連

    これで見込み客を逃さない!魅力的な価格表デザインのコツ

    複数のプランを持ったサービスや商材を紹介する際に価格表を作ることがある…

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

    WEBディレクターがスケジュールを引いてはいけない理由

    プロジェクトを進める際には必ずスケジュールの提出を求められると思います…

  1. WEB制作関連

    ガーリーなPhotoshopのレイヤースタイル
  2. WEB制作関連

    自然をモチーフにした24のフルFlashサイト
  3. LifeHack・仕事術

    覚えやすくて破られづらいパスワードの作り方
  4. WEB制作関連

    シンプルでカッコいいポートフォリオサイト30個
  5. WEB制作関連

    ぜひ参考にしたいオシャレで使いやすい22個の管理画面
PAGE TOP
Top