今日のMovable Type 4.2：FCKeditorを使ってMT4.1/4.2でリアルWYSIWYG編集を可能にするカスタマイズ: 世界中の１％の人々へ

トップ > Movable Type > 今日のMovable Type 4.2：FCKeditorを使ってMT4.1/4.2でリアルWYSIWYG編集を可能にするカスタマイズ

今日のMovable Type 4.2：FCKeditorを使ってMT4.1/4.2でリアルWYSIWYG編集を可能にするカスタマイズ

2008年6月13日 05:10

リアルWYSIWYG編集

せっかくのWYSIWYGエディタなんだから、編集画面も表示画面と同じにしたいよね。

WYSIWYG（ウィジウィグ）とは、IT用語辞典よれば、『「見たものが、手に入るもの」という意味。作成・編集時にディスプレイ画面で見たものが、そのまま印刷物やHTML文書として出力できることを言う。』ということなのだが、FCKeditorを使っても、編集画面ではエントリーで利用するCSSは読み込んでくれない。

Webで調べると、他のCMSでは可能なようなので、「なんとかMT版でもリアルWYSWYGで編集したいよな」と思って試行錯誤していたが、ようやく解決！
＃スキルのなさに情けなくなる

どうすれば解決するのかと言えば、FCKeditorの編集エリアに、エントリーで利用するCSSを読み込ませればいい。その方法を以下に解説。

カスタマイズするなら、まずドキュメントを読め！

ということで、「fck.config.js」を確認すると、それらしい1行があった。

FCKConfig.EditorAreaCSS = FCKConfig.BasePath + ‘css/fck_editorarea.css’ ;

なるほど、この行を書き換えればいいのだな。
そこで、

FCKConfig.EditorAreaCSS = ‘http://www.dakiny.com/style.css’ ;

と修正したが、うまくいかない

そこで、該当ファイルをまず読んでみた。
編集エリアを制御する画面は下記にある。

mt4/mt-static/plugins/FCKeditor/fckeditor/editor/css/fck_editorarea.css

以下、ファイル全文を添付しておく。

◇「fck_editorarea.css」ソース

/*
 * FCKeditor - The text editor for Internet - http://www.fckeditor.net
 * Copyright (C) 2003-2008 Frederico Caldeira Knabben
 *
 * == BEGIN LICENSE ==
 *
 * Licensed under the terms of any of the following licenses at your
 * choice:
 *
 *  - GNU General Public License Version 2 or later (the "GPL")
 *    http://www.gnu.org/licenses/gpl.html
 *
 *  - GNU Lesser General Public License Version 2.1 or later (the "LGPL")
 *    http://www.gnu.org/licenses/lgpl.html
 *
 *  - Mozilla Public License Version 1.1 or later (the "MPL")
 *    http://www.mozilla.org/MPL/MPL-1.1.html
 *
 * == END LICENSE ==
 *
 * This is the default CSS file used by the editor area. It defines the
 * initial font of the editor and background color.
 *
 * A user can configure the editor to use another CSS file. Just change
 * the value of the FCKConfig.EditorAreaCSS key in the configuration
 * file.
 */

/*
    The "body" styles should match your editor web site, mainly regarding
    background color and font family and size.
*/

body
{
    background-color: #ffffff;
    padding: 5px 5px 5px 5px;
    margin: 0px;
}

body, td
{
    font-family: Arial, Helvetica, Tahoma, "Trebuchet MS", Verdana,"ヒラギノ角ゴ Pro W3",Osaka,"メイリオ","ＭＳ Ｐゴシック", sans-serif;
    font-size: 12px;
}

a[href]
{
    color: -moz-hyperlinktext !important;        /* For Firefox... mark as important, otherwise it becomes black */
    text-decoration: -moz-anchor-decoration;    /* For Firefox 3, otherwise no underline will be used */
}

/*
    Just uncomment the following block if you want to avoid spaces between
    paragraphs. Remember to apply the same style in your output front end page.
*/

/*
p, ul, li
{
    margin-top: 0px;
    margin-bottom: 0px;
}
*/

/*
    The following are some sample styles used in the "Styles" toolbar command.
    You should instead remove them, and include the styles used by the site
    you are using the editor in.
*/

.Bold
{
    font-weight: bold;
}

.Title
{
    font-weight: bold;
    font-size: 18px;
    color: #cc3300;
}

.Code
{
    border: #8b4513 1px solid;
    padding-right: 5px;
    padding-left: 5px;
    color: #000066;
    font-family: 'Courier New' , Monospace;
    background-color: #ff9933;
}

赤字部分を意訳すると、このような意味が書かれている。

『このファイルは、編集領域で使われるためのデフォルトCSSです。それは、エディタと背景色の最初のフォントを定めます。
ユーザーは編集領域で、もう一つのCSSファイルを読み込ませて使用することができます。カスタマイズでFCKConfig.EditorAreaCSSの価値を変えてください。』

ではと、気を取り直して

@import 'url(http://www.dakiny.com/style.css)';

とコード先頭に追記したが、またしてもダメ

FCKeditorの編集エリアでは、Movable Typeで設定したIDは認識しない。

なんでかな?と考えて出た結論は、CSSで設定したIDは、あくまでも表示画面のものであるので、FCKeditorの編集エリアでは認識しないんじゃないだろか？ということ。

僕は通常、下記のように、CSSを記述する。

#content img {
	border: solid 1px #CCCCCC;
	}

これを下記のように書き直して、直接「fck_editorarea.css」に追記してみた。

img {
	border: solid 1px #CCCCCC;
	}

大成功

既存ファイルを直接書き直すのはリスクが大きい。

初期設定ファイルを直接編集するのはリスクが大きいので、同じデレクトリにインポートCSSファイルを作るやり方をお勧めする。

たとえば、僕は「fck_editorarea.css」と同じデレクトリに、「custom.css」ファイルを作って置いた。

◇「custom.css」ソース（例）

/*
 * FCKeditor - The text editor for Internet - http://www.fckeditor.net
 * Copyright (C) 2003-2008 Frederico Caldeira Knabben
 *
 * == BEGIN LICENSE ==
 *
 * Licensed under the terms of any of the following licenses at your
 * choice:
 *
 *  - GNU General Public License Version 2 or later (the "GPL")
 *    http://www.gnu.org/licenses/gpl.html
 *
 *  - GNU Lesser General Public License Version 2.1 or later (the "LGPL")
 *    http://www.gnu.org/licenses/lgpl.html
 *
 *  - Mozilla Public License Version 1.1 or later (the "MPL")
 *    http://www.mozilla.org/MPL/MPL-1.1.html
 *
 * == END LICENSE ==
 *
 * このファイルはFCKeditorの編集エリアに、
 * 出力画面で利用しているCSSを追加するためのものです。
 *
 * あなたが、利用しているCMSのエントリーで利用するCSSを
 * この以下に追記してください。
 *
 * CSSを追記すれば、編集エリアで出力画面とほぼ同じ表示で
 * 編集が可能になります。
 *
 * なお、編集エリアで利用できるのはclassのみです。
 * IDはご利用になれません
 *
 */

/*リンク色制御*/

a {
text-decoration: none;
}

a:link {
    text-decoration:none;
    color: #3366cc;
    }

a:visited {
    text-decoration:none;
    color: #3366cc;
    }

a:active {
    color: #3366cc;
    }

a:hover {
    color: #2244cc;
    background-color: #D4ECFB;
    }


/*回り込み解除*/

.clear {
    clear: both;
    }


/*強調と、より強調の制御（斜体を太字に、太字を一回り大きな太字に変更）*/

em {
    font-weight: bold;
    font-style: normal;
    }

/*コンテンツブロック制御*/

#content {
    float: left;
    width: 539px;
    overflow: hidden;
    font-size: 86%;
    font-style: normal;
        font-family: Arial, Helvetica, Tahoma, "Trebuchet MS", Verdana,"ヒラギノ角ゴ Pro W3",Osaka,"メイリオ","ＭＳ Ｐゴシック", sans-serif;
    line-height: 150%;
    border-top: solid 0px #4477CE;
    border-right: solid 1px #4477CE;
    background-color: #FFFFFF;
    text-align: left;
    }


/*記事のタイトル*/

h3 {
    color: #996633;
    background-position: top left;
    font-family: Verdana, Arial, sans-serif;
    text-align: left;
    font-weight: bold;
    line-height: 1.2em;
    font-size: 120%;
    text-align: left;
    font-weight: bold;
    padding: 0px 0px 0px 0px;
    margin-bottom: 1em;
    margin-top: 0px;
    }

h4 {
    color: #464646;
    background-position: top left;
    font-family: Verdana, Arial, sans-serif;
    text-align: left;
    font-weight: bold;
    line-height: 1.2em;
    font-size: 110%;
    text-align: left;
    font-weight: bold;
    padding: 0px 0px 0px 0px;
    margin-bottom: 1em;
    margin-top: 0px;
    }


/*記事部分*/
p {
    color: #464646;
    font-family: Verdana, Arial, sans-serif;
    font-weight: normal;
    text-align: left;
    padding: 0px 0px 0px 0px;
    margin-bottom: 1.5em;
    margin-top: 0px;
    }

del{
    color: #666666;
    }

ol {
    padding: 0px 8px 0px 28px;
    margin: 0px 0px 2em 0px;
    }

ul {
    padding: 0px 8px 0px 20px;
    margin: 0px 0px 2em 0px;
    }

li {
    color: #464646;
    padding: 0px 0px 0px 0px;
    margin-bottom: 0px;
    }

/*表制御*/

table {
    background-color: #FFFFFF;
    text-align: left;
    border-top: 1px solid #66CCFF;
    border-right: 0px;
    border-bottom: 0px;
    border-left: 1px solid #66CCFF;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 2em;
    padding: 0px;
    }

th {
    background-color: #FFFFFF;
    color: #464646;
    font-family: Verdana, Arial, sans-serif;
    font-weight: normal;
    font-size: 90%;
    line-height: 120%;
    border-top: 0px;
    border-right: 1px solid #66CCFF;
    border-bottom: 1px solid #66CCFF;
    border-left: 0px;
    margin: 0px;
    padding: 4px;
    }

td {
    background-color: #FFFFFF;
    color: #464646;
    font-family: Verdana, Arial, sans-serif;
    font-weight: normal;
    font-size: 90%;
    line-height: 120%;
    border-top: 0px;
    border-right: 1px solid #66CCFF;
    border-bottom: 1px solid #66CCFF;
    border-left: 0px;
    margin: 0px;
    padding: 4px;
    }

/*引用*/

blockquote {
    background-color: #DDEDFF;
    text-align: left;
    line-height: 150%;
    margin-top: -5px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 2em;
    border-width: 1px;
    border-style: dashed;
    border-color: #66CCFF;
    padding: 8px;
}


/*整形*/

pre {
    overflow: auto;
    background-color: #DDEDFF;
    margin-top: -5px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 2em;
    border-width: 1px;
    border-style: dashed;
    border-color: #66CCFF;
    padding: 8px;
}

/*罫線*/

hr {
    color:#66CCFF ;
    border: 0;
    height: 1px;
    background-color:#66CCFF;
    margin-bottom: 2em;
    }


/*画像制御*/

img {
    border: solid 1px #CCCCCC;
    }

img.zero {
    border: solid 0px;
    }

img.left {
    float:left;
    margin: 0em 1.5em 1.0em 0em;
    border: solid 1px #CCCCCC;
    }

img.right {
    float:right;
    margin: 0em 0em 1.0em 1.5em;
    border: solid 1px #CCCCCC;
    }

.clear {
    clear: both;
    }

/*位置制御*/

div.center {
    margin: 0px 9px 2em 9px;
    text-align: center;
    }

div.em2 {
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 2em;
    margin-left: 0px;
    padding: 0;
}

次に、「fck_editorarea.css」のコード先頭に

@import 'custom.css';

と追記して完了。以上で、編集画面と、表示画面の表示がほぼ同じになる。
このハックをおこなえば、ブロガーも、Web屋さんも、Webマスターも、みんな幸せ

なお、FCKeditor 日本語ローライズ版の入手とインストール方法に関しては下記URLを読んでほしい。
http://www.dakiny.com/archives/movable-type/ajaxwysiwygfckeditor_26_mt/

FCKeditor日本語ローカライズ版、今後の開発に関する方向性

FCKeditor日本語ローカライズ版の仕様は極力汎用性を高めてはいるが、全ての人や環境に対応するのは無理だ。ハック情報はこのブログでFCKeditorを検索すれば出てくるので、参考にして、各自お好みに応じてハックして使ってほしい。また、今後もハック情報は掲載していく予定であるし、汎用性が高いと思えば、日本語ローカライズ版に組み込んでいく予定だ。

参考になれば幸い。