Home > Movable Type > MTの編集画面にHTMLエディター機能を組み込む[改]

MTの編集画面にHTMLエディター機能を組み込む[改]

以前のエントリー(caramel*vanilla : MTの編集画面にHTMLエディター機能を組み込む)はMT2.661の場合の方法なので今のバージョンはedit_entry.tmplの中身が違うので別の方法を取らなければなりません。
たぶん3.0以降から変わったのでしょうか？？

その前に「エントリーに編集画面にHTMLエディター機能を組み込む」って何？？ってことなんですが…
↑の写真のように編集画面がよくあるHP作成ソフトのような画面になります。
タグがわからなくてもボタンを押すだけで直感的に文字装飾やテーブルの挿入ができてとても便利です。
使いすぎはかえって見にくくなってしまいますがタグを活用する事で単調なエントリーにメリハリができますよね？

↓以下導入方法です。

＜参考元＞
Movalog: HTMLArea

1.)HTMLAreaの導入
以下からHTMLArea-3.0-rc1.zipをDLします。
[dynarch.com] HTMLArea, the Web-based editor
解凍したらmt.cgiと同じ階層にhtmlareaディレクトリを作って解凍した中身全てをUPします。

2.)テンプレートの修正
* tmplディレクトリ→cmsディレクトリの中のheader.tmplをFTPソフトでローカルにDLして<head>～</head>間に以下のソースを追加します。
(必ずバックアップを取ってください！)

次に<body>タグをそっくり以下に差し替えます。

header_htmlarea.tmplというファイル名にリネームしてサーバーの元の場所にUPします。

*tmplディレクトリ→cmsディレクトリの中のedit_entry.tmplをFTPソフトでローカルにDLします。
(必ずバックアップを取ってください！)
<TMPL_INCLUDE NAME="header.tmpl"> ←このような箇所を探して以下に差し替えます。

3.)ボタンの削除
もともとあった太字や斜体などのボタンはいらなくなるので消してしまいます。
<div class="field-buttons">～</div>←この部分がボタンになります。
HTMLAreaをお試しで導入するなら消さなくてもいいかも？

4.)スタイルシートのUP
HTMLArea導入用のスタイルシートを以下からDLしてhtmlareaディレクトリにUPします。
Movalog: HTMLArea (this css)

以上で完了です♪

12/12追記

編集画面のテキストエリアを広げる方法を書き忘れました。
このままだとHTMLAreaのボタンが増えた分テキストエリアが狭くなってしまうので編集がしにくくなってしまいます。

edit_entry.tmplの以下の箇所の赤字の数字を大きくしてみて下さい。
ワタシは両方とも30にしました。

エントリーの内容(body)のテキストエリア

<textarea class="full-width" name="text" id="text" tabindex="3" rows="<TMPL_IF NAME=DISP_PREFS_SHOW_EXTENDED>10
<TMPL_ELSE>20</TMPL_IF>"><TMPL_VAR NAME=TEXT ESCAPE=HTML></textarea>

追記(extend)のテキストエリア

<textarea class="full-width" name="text_more" id="text_more" tabindex="4" rows="15"><TMPL_VAR NAME=TEXT_MORE ESCAPE=HTML></textarea>

Home > Movable Type > MTの編集画面にHTMLエディター機能を組み込む[改]

Categories
Archives
Search
Feeds

Page Top