- 締切済み
contenteditableで編集した内容を保存するには？
<TD width="145" height="300"><DIV contenteditable="true">編集可</DIV></TD> のように表の一部を訪問者が編集可能にしたいのですが、編集内容を保存できません。 ネットでかなり調べたんですが、以下のページしか見つからなくて 具体的にどうすればいいのかがどうしても分かりません。 http://qa.asahi.com/qa808379.html (↑まさにこれが聞きたいのですが、良回答者の参考URLが見れません) http://q.hatena.ne.jp/1118140670 プログラミングの経験はほとんどありませんので、 参考になるテンプレートがあれば一番助かります。 どなたかご教示願えますでしょうか？
- fg5_sinnyo
- お礼率25% (124/483)
- JavaScript
- 回答数4
- ありがとう数1
- みんなの回答 （4）
- 専門家の回答
みんなの回答
- 15mm
- ベストアンサー率65% (65/100)
ではJavaScript→CGIへ編集部分のソースを送る方法を。 編集部分を以下に <div id="content" contenteditable="true"></div> 送信ボタンを設置（）内は適宜変更 <form action="（cgiファイル）" method="（任意）" onsubmit="document.getElementById('source').value=document.getElementById('content').innerHTML;return true;" ><input type="hidden" id="source" value="" /><input type="submit" value="更新" /></form> これでHTMLソースが ～～.cgi?source=（編集されたHTMLソース） といった感じで送信されます。 ＣＧＩの処理はヒントを。 ・送られてきたクエリを取得 ・変更するhtmlファイルの変更部分の前後を記録しておいた物を呼び出し（before.txt after.txtだとすると） ・（before.txt）＋（送信されたクエリ）＋（after.txt）を、更新するhtmlファイルに書き込み <html>～<div id="content" contenteditable="true"> ：before.txt 編集可 ：クエリ </div>～</html> ：after.txt もしくは最初からすべてをcgiにしておいて、 ・訪問者が更新する部分のみを別ファイルに記録 ・そのファイルを読み込んで上記のＨＴＭＬソースを含め出力 print "<html>～<div>" . （<IN>等を加工したもの） . "</div>～</html>"; ・更新はその別ファイルのみ とすると、作成は楽だと思います。 なんか文章で表現するのって大変ですね・・・
- 15mm
- ベストアンサー率65% (65/100)
補足要求に不足がありました。 ・JavaScript ・CGI ・PHP あたりでどれを理解しているのでしょうか？ 特に下の二つに特に知識が無いのであれば、 検索してＤＬしたほうが無難だだと思います。 一から教えるのはこのサービスの趣旨ではありませんので。
補足
JavaScript、PHPとも知識はほぼゼロです。 CGIは使っていますが、DLしたソースを軽く変更している程度です。 質問させて頂いた内容を実現するのは意外と難しいことのようですね。 どこかにあるテンプレートをDLした方が無難だと私も思いますが、 1～2時間くらい探しても目的のものが見つからず困っています。 以上よろしくお願い申し上げます。
- 15mm
- ベストアンサー率65% (65/100)
＞cookieというか「保存」ボタンなどを設けて訪問者がページの更新をできるようにしたいのです。 「ページの更新」というと・・・誰でも見れるように更新でしょうか？ （Ａさんが変更した内容をＢさんも閲覧可能） そうなるとJavaScriptではなくＣＧＩ等の処理が必要になりますが？ とりあえずどちらが目的なのか補足をお願いします。 ・個人個人が自分のＰＣのみで表示される内容を変更可能にする ・Wikiのように、そのページそのものを変更し、誰でもその内容を見れるようにする
補足
・Wikiのように、そのページそのものを変更し、誰でもその内容を見れるようにする の方です。多数の訪問者が同じ箇所を修正後更新処理されるようなシステムを作りたいと思っています。
- 15mm
- ベストアンサー率65% (65/100)
JavaScriptを使用。 contenteditable="true" のついているタグ（に限った話ではありませんが）のプロパティ innerHTML を参照すると、（ブラウザが解釈している状態の？）ＨＴＭＬソースを取得できます。 ここから得られる文字列を目的のこと（保存とはcookieでしょうか）に使えばいいと思います。 JavaScriptを理解しているものとして話を進めてしまいましたが、いかがでしょうか＾＾；
補足
＞contenteditable="true" のついているタグ（に限った話ではありませんが）のプロパティ innerHTML を参照すると、 タグのプロパティとはどうやったら見れるのでしょうか？ メモ帳で開いたのですが分かりません。 ＞ここから得られる文字列を目的のこと（保存とはcookieでしょうか）に使えばいいと思います。 cookieというか「保存」ボタンなどを設けて訪問者がページの更新をできるようにしたいのです。 あまり分かっていなくてすみません。。。
補足
ご返答ありがとうございます。 残念ながら今の私の理解範囲を超えているのでCGI側をどうすればいいかが分かりません。 きっと基礎が分かっていればそれほど難しいことではないような気がするのですが、まだ無理なようです。 今回は諦めようと思います。 ご丁寧にありがとうございました。