TopMovable Typeカスタマイズ管理画面 > 2006年3月
2006年3月 8日

TinyMCE Plugin for Movable Type Ja でエントリーを編集する

March 8,2006 1:50 AM
Tag:[, , ]
Permalink

TinyMCE Plugin for Movable Type Ja 世界中の1%の人々へTinyMCE Plugin for Movable Type Ja Beta4 で提供されているプラグインのご紹介です。

このプラグインはAjaxify/EnhancedEntryEditingに機能追加をして配布されていたAjaxify/EnhancedEntryEditing日本語版の後継システムで、エントリー編集画面をスクリーンショットのようなWYSIWYGエディターに変換します。
ちなみにTinyMCEとはJavaScriptによるHTML WYSIWYGエディター(オープンソースプラットフォーム)で、CMSと非常に親和性があります(というようなことが配布元サイトに書かれています)。

TinyMCE Plugin for Movable Type Ja の特徴は下記の通りです。

  • エントリー編集画面の「エントリーの内容」「追記」「概要」画面がWYSIWYGエディタになります。
  • WYSIWIGのON・OFFを切り替えられるので Movabl Type デフォルトの編集画面も使用可能です。
  • 編集画面の縦幅をドラッグ(または伸縮用アイコン)変更することができます。

ということで以下利用方法です。詳細については配布元に書かれておりますのでそちらを参照ください。

1.ダウンロード

TinyMCE Plugin for Movable Type Ja Beta4の「インストールについて」の説明文のリンクをクリック。ジャンプしたページのやや下にある「TinyMCE Plugin for Movable Type Ja」のリンクをクリックするとアーカイブをダウンロードできます。

2.インストール

ダウンロードしたアーカイブを解凍して、中にある ReadmeJa.txt 以外のディレクトリをそのまま mt.cgi のディレクトリにアップロードします。アップロード後、「メイン・メニュー」→「システム・メニュー」→「プラグイン」を順にクリックして、TinyMCEforMT バージョン Beta4 Ja が表示されていればOKです。

3.利用方法

管理画面の「新規エントリー」または「エントリー」→任意のエントリーをクリックして編集画面に進みます。タグ挿入ボタンの右側に新しいボタンが増えていますが、それをクリックする前に下方にある「改行設定」を「なし」に変更してください。
次に「WYSIWYG」をクリックするとスクリーンショットのようなWYSIWYG画面に切り替わります。そのボタンの左側にあるアイコンは編集画面の高さを変更するものです。またWYSIWYG画面でも編集画面右下をドラッグすると画面の高さを調節することができます。

4.InvalidateLinkOfInsertTag.pl をご利用の場合の修正

当サイトで公開している InvalidateLinkOfInsertTag.pl プラグイン(エントリー編集画面のHTMLタグ挿入ボタンクリックでバックスクロールする不具合を解消)をご利用の場合、TinyMCE Plugin for Movable Type Ja が正常に動作しませんので、InvalidateLinkOfInsertTag プラグインを無効にするか、ファイル自体を削除し、

plugins/TinyMCEforMT/TinyMCEforMT.pl

を任意のエディタで開き、青色部分を追加してください。

HTML
    chop ($old); $old = quotemeta ($old);
    chop ($add1);
    chop ($add2);
    $$template =~ s/($old)/$add1$1$add2/;
    $$template =~ s/href="#"/href="javascript:void(0);"/g;
}
 
1;
__END__

修正後、同じディレクトリにアップロードしてください。

大丈夫と思いますが TinyMCE Plugin for Movable Type Ja の動作を完全に保証するものではありませんので予めご了承ください。

Comments [16] | Trackbacks [6]
2006年3月 3日

エントリー編集画面に文字列選択なしでHTMLタグを挿入できるようにする

非選択状態でタグを挿入エントリー編集画面でテキストエリアの右上にある 太字イタリックアンダーライン引用については、マウス等で文字列を選択状態にしておかないとタグが挿入できない仕様(というほどではありませんが)になっています。

先日「HTMLタグが挿入できません」というご質問を頂き、文字列を選択してくださいという回答を致しましたが、よく考えてみると選択状態でなくてもタグを挿入したい場合(タグを入力してからコンテンツを後で書き込む等)もあるのではないかと思います。

ということで、スクリーンショットのように非選択状態でもこれらのタグを挿入できるようにするカスタマイズです(例は blockquote タグを挿入)。

1.mt_ja.js の変更

HTMLタグの挿入は JavaScript で行っていますので、該当のスクリプトが書かれているファイル(mt_ja.js)の一部を修正します。
mt_ja.js はアップロードしている Movable Type のディレクトリ mt-static (index.html と同じパスにあると思います)の配下にありますので、それをダウンロード(ローカルに同じファイルがあればそれを利用)し、下記のパッチをあててください。

--- mt-static/mt_ja.js.bak Thu Mar 02 23:50:16 2006
+++ mt-static/mt_ja.js     Thu Mar 02 23:51:11 2006
@@ -236,7 +236,6 @@
 function formatStr (e, v) {
     if (!canFormat) return;
     var str = getSelected(e);
-    if (!str) return;
     setSelection(e, '<' + v + '>' + str + '</' + v + '>');
     return false;
 }

パッチがよくわからない、または面倒という方は、mt_ja.js を任意のエディタで開き、240 行目辺りを探して

function formatStr (e, v) {
    if (!canFormat) return;
    var str = getSelected(e);
//    if (!str) return;
    setSelection(e, '<' + v + '>' + str + '</' + v + '>');
    return false;
}

と赤色のコメント用の文字を追加するか、その行を丸ごと削除して

function formatStr (e, v) {
    if (!canFormat) return;
    var str = getSelected(e);
    setSelection(e, '<' + v + '>' + str + '</' + v + '>');
    return false;
}

としてください。
どちらの方法も、修正が終わったら元のディレクトリにアップロードしてください。

2.ページのスクロールバックを防止する

3.2-ja-2 ではタグ挿入ボタンをクリックした後、ページの先頭に戻ってしまう(スクロールバック)という問題があります。それを避けるためにはエントリー編集画面のHTMLタグ挿入ボタンの不具合を解消するプラグインを併用ください。

以上です。

Comments [7] | Trackbacks [1]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3