zenblog: MovableTypeにHTMLAreaを組み込む

2005年07月24日

MovableTypeにHTMLAreaを組み込む

前のエントリーで書いたHTMLAreaですが、小生のブログでどのように設定したかを記載します。以下のような手順です。
クライアントサイドで動く、とはいってもプログラムコード自体はwebサーバー側に置いて使います。
なお、サーバーの環境によっては異なる部分があると思いますが、この点はご了承ください。

ダウンロードした HTMLArea-3.0-rc1.zip を解凍します。

できたフォルダをそのままサーバーの Movable Type の本体のあるディレクトリ（mt.cgiのあるディレクトリ）にFTPでアップロード（あるいはコピー）します。^＊１

上記2でフォルダの名称を "htmlarea" に変更します。

入力画面のテンプレートファイルを変更します。（変更前に必ずバックアップをとっておきましょう。）
変更対象となるファイルは、/tmpl/cms/edit_entry.tmpl です。以下の手順になります。
- HTMLAreaが使用する変数の定義
  以下のコードを <div id="edit-entry">の下に（というか中に）追加します。
```
<script type="text/javascript">
```
```

```
```
</script>
```
- HTMLArea本体のインクルード
  以下のコードを上記の </script> に続いて追加します。
```
<script src="<TMPL_VAR NAME=STATIC_URI>htmlarea/htmlarea.js" 
 language="JavaScript1.2">
</script>
```
- 「エントリーの内容(body)」入力ボックスで利用できるようにする
  
  name="text" という属性の <textarea> タグの下に以下のコードを追加します。
```
<script type="text/javascript">
```
```
var editor1 = new HTMLArea("text");
```
```
editor1.generate();
```
```
</script>
```
- 「追記(extended)」入力ボックスで利用できるようにする
  name="text_more" という属性の <textarea> タグの下に以下のコードを追加します。
```
<script type="text/javascript">
```
```
var editor = new HTMLArea("text_more");
```
```
editor.generate();
```
```
</script>
```

変更したテンプレートファイルをサーバーにアップロード（または保存）します。

これで入力画面を開くと、テキストボックスがWYSWYGエディタになっているはずです。

^＊１私の利用している環境では mt.cfg ファイルの
StaticWebPathの設定はコメントアウトのままです。テンプレートファイルの変更内容から推測すると、StaticWebPathを指定してい
る場合は、指定したディレクトリの直下に解凍したフォルダを配置すればうまくいくのではないかと思います。

＜参考にさせていただいたサイト＞