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

Category : [ MovableType ]
April 29, 2005 20:08
TAG : [Customize,Entry,Javascript,MovableType,Plugin,Template]
Permalink

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行目あたり

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&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&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; }

↓こんな感じになってでしょうか？