AjaxのWYSIWYGエディタ

質問

情報があれば教えて頂きたい事があります。
どんな事でも構いませんのでよろしくお願い致します。

最近のBlogでは当たり前の機能になりつつある、入力したタグや
文字をリアルタイムにHTMLでプレビューできるリアルタイム
エディタをPHPで作成しなければならなくなりました。

機能としてはインターネット上のフォームにタグと文字を入力すると
リアルタイムに別ウィンドウで開かれたブラウザで実際に
表示される　というものです。

JavaやAjaxの事を調べてみると「非同期通信」を使ってリアルタイムに
データのやり取りをする事になるという点については分かったのですが
フォームに入力されたデータをどのように処理をすると別のウィンドに
リアルタイムに表示できるかという事が分からず困ってしまいました。

単純なサンプルソースや解説をしているサイトがあれば教えて頂き
ますようお願いします。
一応、JavaとPHPのプログラムについての基本処理は理解しています。

回答No.1

みずの（@mizuno3）

私はFCKEditorを扱った物を作成しました。
FCKEditorの中身を色々と変更したりしたのですが、Ajaxは使ってなかったと思います。
また、自前でも記述したHTMLをリアルタイムでプレビューさせるような機能も作成しましたが、それもやはりAjaxは使っていません。

例えば単純にHTMLを表示したい場合、

<script type="text/javascript">
function writeText(str) {
document.getElementById('p').innerHTML = str;
}
</script>
<div id="p"></div>
<input type="text" name="html" value="" onblur="writeText(this.value)">

これだけでもllriverさんの希望の動作として動くことになるんじゃないかな？と思います。

Ajaxを利用したWYSIWYGエディタもあるようなのですが、実際に扱ったことが無いのでどのようにしているかは解りません。

まずはダウンロードしてソースを調べてみると良いのではないかと思います。
参考URLにAjaxを使ってるらしいtinymceというエディタのリンクを張っておきます。

参考URL：

http://tinymce.moxiecode.com/index.php

お礼

ご回答ありがとうございます。

実はFCKEditorは使ってみた事はあったのですが、
改造という所まで至らなかったのです。
ご回答の中にあるスクリプトだけでも充分参考となりました。
後は表示するタイミングを「キーを押された時」に改造する
事でなんとかなりそうです。

本当にありがとうございます。