contenteditableで編集した内容を保存するには？

解決済

質問者：fg5_sinnyo
質問日時：2008/07/20 13:58
回答数：4件

<TD width="145" height="300"><DIV contenteditable="true">編集可</DIV></TD>
のように表の一部を訪問者が編集可能にしたいのですが、編集内容を保存できません。
ネットでかなり調べたんですが、以下のページしか見つからなくて
具体的にどうすればいいのかがどうしても分かりません。
http://qa.asahi.com/qa808379.html
(↑まさにこれが聞きたいのですが、良回答者の参考URLが見れません)
http://q.hatena.ne.jp/1118140670
プログラミングの経験はほとんどありませんので、
参考になるテンプレートがあれば一番助かります。
どなたかご教示願えますでしょうか？

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

ベストアンサー優先
最新から表示
回答順に表示

No.4ベストアンサー

回答者： 15mm
回答日時：2008/07/21 16:01

では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>";
・更新はその別ファイルのみ
とすると、作成は楽だと思います。

なんか文章で表現するのって大変ですね・・・

この回答への補足

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

残念ながら今の私の理解範囲を超えているのでCGI側をどうすればいいかが分かりません。

きっと基礎が分かっていればそれほど難しいことではないような気がするのですが、まだ無理なようです。

今回は諦めようと思います。
ご丁寧にありがとうございました。

補足日時：2008/07/21 17:55

通報する

- 0
- 件

通報する

No.3

回答者： 15mm
回答日時：2008/07/21 13:46

補足要求に不足がありました。

・JavaScript
・CGI
・PHP
あたりでどれを理解しているのでしょうか？

特に下の二つに特に知識が無いのであれば、
検索してＤＬしたほうが無難だだと思います。

一から教えるのはこのサービスの趣旨ではありませんので。

この回答への補足

JavaScript、PHPとも知識はほぼゼロです。
CGIは使っていますが、DLしたソースを軽く変更している程度です。
質問させて頂いた内容を実現するのは意外と難しいことのようですね。

どこかにあるテンプレートをDLした方が無難だと私も思いますが、
1～2時間くらい探しても目的のものが見つからず困っています。

以上よろしくお願い申し上げます。

補足日時：2008/07/21 15:19

通報する

- 0
- 件

通報する

No.2

回答者： 15mm
回答日時：2008/07/20 21:05

＞cookieというか「保存」ボタンなどを設けて訪問者がページの更新をできるようにしたいのです。

「ページの更新」というと・・・誰でも見れるように更新でしょうか？
（Ａさんが変更した内容をＢさんも閲覧可能）

そうなるとJavaScriptではなくＣＧＩ等の処理が必要になりますが？

とりあえずどちらが目的なのか補足をお願いします。
・個人個人が自分のＰＣのみで表示される内容を変更可能にする
・Wikiのように、そのページそのものを変更し、誰でもその内容を見れるようにする

この回答への補足

・Wikiのように、そのページそのものを変更し、誰でもその内容を見れるようにする

の方です。多数の訪問者が同じ箇所を修正後更新処理されるようなシステムを作りたいと思っています。

補足日時：2008/07/20 21:34

通報する

- 0
- 件

通報する

No.1

回答者： 15mm
回答日時：2008/07/20 18:10

JavaScriptを使用。

contenteditable="true"
のついているタグ（に限った話ではありませんが）のプロパティ
innerHTML
を参照すると、（ブラウザが解釈している状態の？）ＨＴＭＬソースを取得できます。

ここから得られる文字列を目的のこと（保存とはcookieでしょうか）に使えばいいと思います。

JavaScriptを理解しているものとして話を進めてしまいましたが、いかがでしょうか＾＾；

この回答への補足

＞contenteditable="true"
のついているタグ（に限った話ではありませんが）のプロパティ
innerHTML
を参照すると、

タグのプロパティとはどうやったら見れるのでしょうか？
メモ帳で開いたのですが分かりません。

＞ここから得られる文字列を目的のこと（保存とはcookieでしょうか）に使えばいいと思います。

cookieというか「保存」ボタンなどを設けて訪問者がページの更新をできるようにしたいのです。

あまり分かっていなくてすみません。。。

補足日時：2008/07/20 18:44

通報する