投稿前の反映されたエントリープレビュー

MovableTypeの新規エントリーで、
「確認」というのがありますが、はっきり言って、役に立ちません(^^;)

私のブログでは3コラムのテンプレートを使用していますが、
エントリー内容の横幅実際に投稿したものと違います
また、スタイルシート背景色文字色等も反映されない状態での
プレビューとなっています。

そこでいろいろググっていたら、ありました。

やはり皆さん考えることは同じなんですね(^^;)

参考URL:
[c*] : エントリーのプレビュー
coo MEMO: エントリーのWYSIWYGプレビュー


まず、下記のサイトにて、「MT-Preview Plugin」をダウンロードします。

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

解凍して出てきたモノの中の、

1. 「mt-preview.cgi」「mt.cgi」があるディレクトリと同じディレクトリへアップロード。
   パーミッション「755」or「705」に変更してください。

chmod 755 mt-preview.cgi

2. 「preview.pl」「/plugin」ディレクトリへアップロード。
3. 「Preview.pm」を解凍した「Laurentmフォルダ」ごと「/extlib」ディレクトリへアップロード。
4. 次に「/tmpl/cms」の中の「edit_entry.tmpl」修正します。

edit_entry.tmplの7行目あたり

<script type="text/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');
}

function listPreviousPings () {
window.open('<TMPL_VAR NAME=SCRIPT_URL>?__mode=pinged_urls&entry_id=<TMPL_VAR NAME=ID>&blog_id=<TMPL_VAR NAME=BLOG_ID>', 'urls', 'width=370,height=250,resizable=yes,scrollbars=yes');
}

function editPlacements () {
window.open('<TMPL_VAR NAME=SCRIPT_URL>?__mode=edit_placements&entry_id=<TMPL_VAR NAME=ID>&blog_id=<TMPL_VAR NAME=BLOG_ID>', 'placements', 'width=550,height=520,resizable=yes');
}

edit_entry.tmplの127行目あたり

<TMPL_IF NAME=POSITION_BUTTONS_TOP>
<div id="button-bar">
<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">">
<input type="submit" name="preview_entry" value="<MT_TRANS phrase="Preview">" />
<input type="submit" value="<MT_TRANS phrase="Save">" /><TMPL_UNLESS NAME=NEW_OBJECT>
<input onclick="doRemoveItem('<TMPL_VAR NAME=ID>', 'entry&amp;blog_id=<TMPL_VAR NAME=BLOG_ID>')" type="button" value="<MT_TRANS phrase="Delete Entry">" /></TMPL_UNLESS></div></TMPL_IF>

edit_entry.tmplの332行目あたり

<TMPL_IF NAME=POSITION_BUTTONS_BOTTOM>
<div id="button-bar">
<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">">
<input type="submit" name="preview_entry" value="<MT_TRANS phrase="Preview">" />
<input type="submit" value="<MT_TRANS phrase="Save">" /><TMPL_UNLESS NAME=NEW_OBJECT>
<input onclick="doRemoveItem('<TMPL_VAR NAME=ID>', 'entry&amp;blog_id=<TMPL_VAR NAME=BLOG_ID>')" type="button" value="<MT_TRANS phrase="Delete Entry">" /></TMPL_UNLESS></div></TMPL_IF>

編集後は保存して、アップロード。

ですが、このままではプレビューした文字文字化けしてしまいます。

そこで、「Preview.pm」に以下のように追加します。
つまり、自分のブログのcharsetに文字コードを合わせるわけです。

sub init { my $app = shift; $app->SUPER::init(@_) or return; $app->add_methods('wysiwyg_preview' => \&preview); $app->{default_mode} = 'wysiwyg_preview'; $app->{template_dir} = 'cms'; $app->{requires_login} = 1; $app->{user_class} = 'MT::Author'; $app->{charset} = $app->{cfg}->PublishCharset; $app; }

↓こんな感じになってでしょうか?
purebyunobotann.jpg


なお、「ウェブログの設定」「設定」にて、
「デフォルトの投稿の状態」「下書き」にしておきましょう。

なぜかというと、
下書きで保存し、プレビューで確認 → 確認できたら、「公開」に変更して投稿
という順序になるからです。