[Movable Type] HTMLAreaをMovableType3.0に導入する
BLOG HACKSなどに紹介されているブラウザ上で動くWYSIWYGなHTMLエディタのHTMLAreaを導入しようとしたがMovableType3.0ではテンプレートの構造が違うので独自の方法で導入する。
HTMLArea3.0BetaをダウンロードしてMovableTypeディレクトリの直下(BLOGのディレクトリではなくmt.cgiがあるディレクトリ)にhtmlareaというディレクトリを作成して以下のファイルとディレクトリを保存する。
- imagesディレクトリ
- langディレクトリ
- pluginsディレクトリ
- popupsディレクトリ
- dialog.js
- htmlarea.css
- htmlarea.js
- popupdiv.js
- popupwin.js
tmpl/cms/header.tmplの13行目の下あたりに以下を追加する。
<!-- load the main HTMLArea files -->
<script type="text/javascript" src="<TMPL_VAR NAME=STATIC_URI>htmlarea/htmlarea.js"></script>
<script type="text/javascript" src="<TMPL_VAR NAME=STATIC_URI>htmlarea/lang/en.js"></script>
<script type="text/javascript" src="<TMPL_VAR NAME=STATIC_URI>htmlarea/dialog.js"></script>
<script type="text/javascript" src="<TMPL_VAR NAME=STATIC_URI>htmlarea/popupwin.js"></script>
<!-- load the TableOperations plugin files -->
<script type="text/javascript" src="<TMPL_VAR NAME=STATIC_URI>htmlarea/plugins/TableOperations/table-operations.js"></script>
<script type="text/javascript" src="<TMPL_VAR NAME=STATIC_URI>htmlarea/plugins/TableOperations/lang/en.js"></script>
<style type="text/css">
@import url(htmlarea.css);
textarea { background-color: #fff; border: 1px solid 00f; }
</style>
<script type="text/javascript">
var editor = null;
function initEditor() {
// create an editor for the "ta" textbox
editor = new HTMLArea("ta");
// register the TableOperations plugin with our editor
editor.registerPlugin("TableOperations");
var cfg = editor.config;
cfg.editorURL = "<TMPL_VAR NAME=STATIC_URI>htmlarea/";
cfg.height = '400px';
cfg.pageStyle = 'body { background-color: white; color: black; font-family: verdana,sans-serif; font-size: 12px} ';
editor.generate();
return false;
}
function insertHTML() {
var html = prompt("Enter some HTML code here");
if (html) {
editor.insertHTML(html);
}
}
</script>
注意) 今回はTableOperationプラグインを使い、テキストエリアの高さを400pxに、エディタのフォントサイズを12pxに設定した。
その二行下あたりの<body>タグを以下に変更。
<body onload="initEditor()">
tmpl/cms/edit_entry.tmplの182行目あたりのtextareaタグを以下に変更。
<textarea class="full-width" name="text" id="ta" tabindex="3"・・・
テキストエリアの幅も変更する場合はスタイルシートを変更する必要がある（と思う)。
導入したものの確かに実体参照は勝手にやってくれるしリストの作成なども簡単だけどいかんせん吐き出すHTMLに満足できなかったので今は使ってない。
