February 13, 2004
MTの編集画面にHTMLエディター機能を組み込む
以前紹介したHTMLAreaをNDO::WeblogのnaoyaさんがMTでの編集用に改造していたのをみて自分でもやってみた。Firefoxでの利用を想定しているのでHTMLArea3.0を利用しました。改造方法は以下の通り。
- まずHTMLArea3.0をダウンロードして自分のサーバーにアップします。ディレクトリ構造そのままにしておけばそれだけで動くでしょう。
- 次に稼動を確認します。
- そうしたらMTをインストールしたディレクトリに入れておきます。
- MTのスクリプトの中のテンプレート用のファイル下記の2つを変更します。リンク先のテンプレートファイルを保存してしてください。
/tmpl/cms/edit_entry.tmpl
/tmpl/cms/bm_entry.tmpl
変更した箇所は
- headerの中のjavascriptとスタイルシートを追加
- bodyタグの部分に読み込み部分を追加
- textareaに id="ta"この部分を追加
いずれもHTMLArea3.0のサンプルで入っていたものを利用しました。
この他には以前からMTの編集画面のテキストエリアが狭いなと思っていたのでこの際に変更して大きめにしました。
BookmarkletでPostするとき用のものもテキストエリアが狭かったので大きめにしました。
これだけでも大丈夫なのですがFirefoxで色の選択などをする場合のポップアップ画面が全部の色を表示する大きさに開かないのでHTMLArea3.0のファイルのうちpopups/select_color.htmlの中を少し改造しtableの大きさを縦も100%と入れてみました。Firefoxでの表示でもすべての色の選択画面がきちんと表示されるようになりました。
今まではFirefoxではウィンドウを複数開かずにタブを開くようにしていたのですが、そのままHTMLAreaをつかうとFirefoxの画面の大きさがjavascriptにより変更されてしまうのでウィンドウを複数開く設定にして使ったほうがよさそうです。ちなみにこの設定はTabbrowserExtensionsでの設定です。
MTの編集画面にHTMLエディター機能を組み込むことでnaoyaさんも言っていますがサクサクと編集が出来そうです。あまり派手な装飾はするつもりはありませんが、ここのところHTMLAreaをつかってエントリーを書いてみて案外便利だったのでこの機能を追加してみることにしました。こんなことでもないと編集画面のテンプレートをいじることもなかったので個人的にはBookmarkletでのPost画面が大きくなったのがよかったかも。
設置方法についての質問がある場合はIRC #goingmywayまでどうぞ。
追記:2004/02/13 12:55
上のリンクしたファイルは改造後のものになります。どこに貼り付けたり改造されたかがわかりにくいとの事でしたのでソースに赤い色をつけたものを作ってみました。ちなみにこのHTMLもHTMLAreaの機能を使っています。ソースの表示にきちんと実態参照で出るのでいいかもしれないですね。
Posted by kengo at February 13, 2004 12:51 AM | TrackBack | BLOG | Blog Search | English | QR |
| 
分からない所があるので教えて頂けませんでしょうか！？
＜変更した箇所は＞についての質問です。
1. headerの中のjavascriptとスタイルシートを追加
Q>スタイルシートは、どの分を、何処に入れれば良いのでしょうか！？
2. bodyタグの部分に読み込み部分を追加
Q>読み込み部分とは、どのようなものを、htmlのボディに入れるのでしょうか！？
3. textareaに id="ta"この部分を追加
Q>textareaのの前にでも入れるのでしょうか！？
htmlAreaサンプルの
2. For each that you want to change, add the following code to the page.
この部分のJavaScriptはtextareaにはいれなくてよいのでしょうか！？
以上、よろしくお願い致します。
Posted by: 玉屋村長(Porco51) on February 13, 2004 11:49 AMこんにちは。
上記の本文の中に改造後のソースが入ってますので
それを利用するか参照していただければ大丈夫です。
/tmpl/cms/edit_entry.tmpl
/tmpl/cms/bm_entry.tmpl
のリンク先より保存してご利用ください。
1.ヘッダーの中にあるスタイルの設定を同じくヘッダー
の中に入れます。（ソースを参照）
2.ソースを見るとbodyタグが２つあると思います。
この部分です。
3.ここで言っているtextareaとは
まさにエントリーを書くときに記入するtextareaを指します。
ソースの中でid="ta"というのは一箇所しかないのでエディターで検索して見つけてください。
すぐわかると思います。
度々お手数を掛けます。
以下のようなエラーがでます。
HTMLAREAは
http://・・・・・・・・・/cgi/mt/htmlarea
としましたがcgi/の下でｍｔ/と同じLevelですか!?
何だか良く分かっていないので、こんな説明でご理解いただけます〜っ！？
よろしくお願いします。
_______________
ライン：２
文字：１
エラー：構文エラーです。
コード：0
URL:http://・・・・・・・・・/cgi/mt.cgi?
mode=view&type=entry&blog id=4
ライン：145
文字：7
エラー："HTMLAREA"は宣言されていません。
コード：0
URL:http://・・・・・・・・・/cgi/mt.cgi?mode=view&type=entry&blog id=4
ライン：167
文字：3
エラー："HTMLAREA"は宣言されていません。
コード：0
URL:http://・・・・・・・・・/cgi/mt.cgi?mode=view&type=entry&blog id=4
___________________________
階層はMTと同じレベルです。
まずMTに追加する前にその場所で動くことを確認しましょう。
基本的にCGIはいじってないのでエラーはでないはずです。
どうも。
HTMLAreaを導入しました。
改行コードをに変更する機能が
使用できなくなるので、一長一短ですね。
色の変更とかは簡単にできて便利です。
Posted by: TOM on February 13, 2004 01:47 PM何故か、やはり、上手く行きません。
エラーが出ているのはIE系のブラウザーです。
FireFoxはエラーは出ませんが、基本のボタンも出ません。
Lolipopのサーバーを使っているのですが、htmlareaの置く位置は、
http://・・・・・/cgi/htmlarea/
って、感じですが、最初は
http://・・・・・/cgi/mt/htmlarea/
に置いていました。
何処かにhtmlareaのパス設定をしないと読んでくれないんではっ!?
何度も済みませんっ!m(__)m
Posted by: 玉屋村長(Porco51) on February 13, 2004 02:30 PMこんにちは。
同じパスにおくので
http://・・・・・/cgi/mt/
に置いてください。そうでないとこのままでは動きません。
htmlarea用にディレクトリーを作るのではなく
/mt 内に置いてください。
遣ってみました。
/mt のフォルダーにhtmlareaの解凍したフォルダとファイル全て老いれました。IE でもエラーは出なくなりましたが、やはりhtmlareaは表示されません！！？？
ちなみに、FireFoxの標準のボタンも表示されません。
エントリー内容（body）の入力領域の縦は広くなっています。
これで、htmlareaが使えれば楽しそうですね〜っ！？
く〜っ！(>_<)
TOMさんみたいに上手く行っている方も居るのに・・・、環境が違うからですかねっ！？
何が悪いんですかね〜っ！？
ちなみに、DLできたhtmlareaのVerは2.03でした。
Posted by: 玉屋村長(Porco51) on February 13, 2004 03:24 PMこんにちは。
なるほどそれではエラーがでるでしょう。
バージョンは3.0です。
紹介文のなかでリンクしているForumの中に
案内されているsourceforgeよりダウンロードできます。
バージョン3.0でないとFirefoxでは動きませんというか
表示されないと思います。
在りましたっ！htmlareaβ3.0
http://prdownloads.sourceforge.net/itools-htmlarea/HTMLArea-3.0-beta.zip?download
からDLできましたっ！
うほ〜っ！バッチリ表示できています。
これから、お礼がてらエントリーを書いてみます。
有り難う御座いましたっ！
(^^)/デハデハッ！
Posted by: 玉屋村長(Porco51) on February 13, 2004 04:02 PMありがとうございます。
うまく出来ました。便利ですね。
早速使ってPostしてみます。
何とか使えております。
有り難う御座いました。
で、KengoさんもWindowsXPと聞いて、またお願いなんですが、FireFoxでスクリーンショットを見るとカラーパレットも普通に表示されていますが、「popups→select_color.html」を弄ってみたのですが、サイズが変わりません。何故か、テーブルの分だけは一番上のStyleを弄ったら使えるようになったのですが、他のは弄っても上手く行きません。
もし良かったら、Kengoさんが弄ったのをDLさせてもらえると助かります。（後学のためには弄り場所なんかも知りたいです。）
もし宜しければお願い致します。
こんにちは。
本文の中を見てもらうとselect_color.htmlへも
リンクがはってありますよ。
そのままダウンロードして使ってもらえば大丈夫だと思います。
Posted by: kengo on February 13, 2004 11:20 PMこんにちは。Comment一覧を見て設置方法わかりました。ありがとうございます。
最初はうまく設置できずにIRCに伺ってみたのですが、勝手がわからずに失礼してしまいました。申し訳ございません。
テンプレート一式ありがたく使わせていただきます。
Twitter経由でコメントする
メールの場合はこちらまで
Google Talk からメッセージを送る
Call 
Chat
