Home > Movable Type > エントリーのプレビュー

エントリーのプレビュー

MTの編集画面に[確認]ボタンありますがこれって使えなくないですか?
簡易表示なのでテキストの誤字脱字のチェックはできるけど表示の最終確認はできません。
エントリー後にミスに気がつく事が多いのでしょっちゅう直してます。
偶然知ったんですがエントリー前にプレビューできるプラグインなんてのがあるんです!

Chitatopops: WYSIWYGモードでプレビュー
WYSIWYGボタンを押すとウィンドウがポップアップし、Individual Entryの状態でプレビューすることが出来る。Textileプラグインにしっかり対応しているのもうれしい。

でも上記のサイトでは具体的な導入方法の記載がありませんでした。
他で調べても見つからなかったので海外なのでビビりつつ配布元へ行ってみました。

10 Goto 10: MT-Preview: WYSIWYG Preview Mode for Movable Type

翻訳サイトのお世話になりながら導入してみます。
まずはpreviewプラグインをGETして解凍します。

mt-preview.cgi → 1行目のperlのパスを修正後mt.cgiと同じ場所へUP → パーミッションを755へ(ロリポの場合)
preview.pl → pluginsディレクトリへUP
Preview.pm → 解凍して出てきたLaurentmフォルダごとextlibディレクトリへUP

以上でダウンロードしたファイルの修正は終了です。
次は/tmpl/cmsディレクトリ内にあるedit_entry.tmplを3箇所修正します。
修正前にバックアップを取るのを忘れずに…
赤字が追加部分です。

12行目あたり

<script language="JavaScript">
<!--
function doPreview () {
window.open('<TMPL_VAR NAME=SCRIPT_PATH>mt-preview.cgi?blog_id=<TMPL_VAR NAME=BLOG_ID>&entry_id=<TMPL_VAR NAME=ID>', '', 'width=800,height=600,resizable=yes,scrollbars=yes');
}

if ((!(navigator.appVersion.indexOf('MSIE') != -1) &&
      (parseInt(navigator.appVersion)==4))) {
    document.write("<STYLE TYPE=\"text/css\">");
    document.write("BODY { margin-top: -8px; margin-left: -8px; }");
    document.write("</style>");
}

青字は別窓で出てくるプレビュー画面のサイズだと思うのでお好みで変えてください。

299行目あたり

<tr>
<td bgcolor="#999999" align="center">
<TMPL_UNLESS NAME=NEW_OBJECT>
<input class="button" onClick="doPreview()" type="button" value="<MT_TRANS phrase="WYSIWG">"> 
</TMPL_UNLESS>

 <input class="button" type="submit" name="preview_entry" value="<MT_TRANS phrase="Preview">">

584行目あたり

<tr>
<td bgcolor="#999999" align="center">
<TMPL_UNLESS NAME=NEW_OBJECT>
<input class="button" onClick="doPreview()" type="button" value="<MT_TRANS phrase="WYSIWYG">"> 
</TMPL_UNLESS>

 <input class="button" type="submit" name="preview_entry" value="<MT_TRANS phrase="Preview">">

以上の修正が終わったら/tmpl/cmsディレクトリ内にUPして導入完了!なはず…

さてさて肝心なプレビュー方法です。
エントリー画面でいつも通り編集後下書き状態でいったん保存します。
すると画面下に新しいボタンが出てきます。

1番左の[WYSIWYG]ボタンを押してみると別窓でIndividual Entryの状態そのままでプレビューできます。
ただそのままでは文字化けしてるのでエンコードで文字コードを日本語に指定します。
この辺がちょっと不便ですが調べても文字化け対策がわからなかったのでこのままにしています…
どなたかわかる方いたら教えていただきたいです…

Home > Movable Type > エントリーのプレビュー

Search
Feeds

Page Top