bootstrap-wysiwygの使い方を教えて下さい。


現在、PHPとBootstrapを使ってWebサイトを作っています。

サイト内に画像アップロード機能を持った「WYSIWYGエディタ」を設置したいと考え、「bootstrap-wysiwyg」というプラグインを見つけたのですが、使い方(入力されたデータの取得方法)がよく分かりません。

http://mindmup.github.io/bootstrap-wysiwyg/

<form>内の1つの要素として「bootstrap-wysiwyg」のエディタを設置し、<textarea>の代わりに使いたいと思うのですが、他の入力項目と同時にPOST送信するにはどのようにすれば良いのでしょうか?

また、挿入された(複数の)画像ファイルは、PHP側でどのように取得・保存すれば良いのでしょうか?

どうぞよろしくお願い致します。

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2013/07/30 05:14:33
  • 終了:2013/07/30 15:09:29

ベストアンサー

id:a-kuma3 No.2

a-kuma3回答回数4363ベストアンサー獲得回数18002013/07/30 13:06:58

ポイント200pt

http://mindmup.github.io/bootstrap-wysiwyg/
↑の Usage に書いてあるとおり、

$('#editor').wysiwyg();

とした要素が WYSIWYG なエディタになります。
対象にできる要素は DIV などの contenteditable=true を受け入れる要素です。

入力した内容を POST で送信したければ、対象となった要素の innerHTML を form の内容にぶち込んであげるだけです。
改行も <br> で表現されるので、<input type="hidden"> に入れてあげれば大丈夫ですが、もちろん <textarea> でも大丈夫です。
<textarea> に入れる場合には、POST が完了するまでの一瞬の間、HTML な内容が見えてしまうので、スタイルで見えなくするなり、小さくするなりしておかないと、ちょっと不格好な感じです。

因みに画像は、data URI スキーム で表現されています。
こんな感じ(グリーンスターの画像です)。

<img src="data:image/gif;base64,R0lGODlhCwAKAJECAD3OJE3nM////wAAACH5BAEAAAIALAAAAAALAAoAAAIZlA2nl8vQXJgKwhlsA3hGhH0gJ15C9pVGAQA7">

対象となった要素の innerHTML の表現の一部として入ってますので、そのまま保存すれば画像も保存されます。


POST する form の onsubmit で #editor の innerHTML を取得して、form 内の要素に入れてあげる感じで良いと思います。

<form onsubmit="return put_editor_data()">
    <textarea name="editor_data"></textarea>
</form>

<script>
function put_editor_data() {
	$("TEXTAREA[name=editor_data]").val($("#editor").html());
	return true;
}
</script>
id:dy7

的確なご回答ありがとうございました。

2013/07/30 15:10:31

その他の回答(1件)

id:kaji0120 No.1

kaji0120回答回数59ベストアンサー獲得回数132013/07/30 10:42:02

一つ確認したいことがあります。

このソフトはクライアントのPC上でリッチテキストを作成するソフトであり、作成されたリッチテキストを保存するものではありません。
従って

<form>内の1つの要素として「bootstrap-wysiwyg」のエディタを設置し、<textarea>の代わりに使いたいと思うのですが、他の入力項目と同時にPOST送信するにはどのようにすれば良いのでしょうか?

また、挿入された(複数の)画像ファイルは、PHP側でどのように取得・保存すれば良いのでしょうか?

といった機能はないのですが、本質問はjsにPOSTの機能を付けろという意味でしょうか。

id:a-kuma3 No.2

a-kuma3回答回数4363ベストアンサー獲得回数18002013/07/30 13:06:58ここでベストアンサー

ポイント200pt

http://mindmup.github.io/bootstrap-wysiwyg/
↑の Usage に書いてあるとおり、

$('#editor').wysiwyg();

とした要素が WYSIWYG なエディタになります。
対象にできる要素は DIV などの contenteditable=true を受け入れる要素です。

入力した内容を POST で送信したければ、対象となった要素の innerHTML を form の内容にぶち込んであげるだけです。
改行も <br> で表現されるので、<input type="hidden"> に入れてあげれば大丈夫ですが、もちろん <textarea> でも大丈夫です。
<textarea> に入れる場合には、POST が完了するまでの一瞬の間、HTML な内容が見えてしまうので、スタイルで見えなくするなり、小さくするなりしておかないと、ちょっと不格好な感じです。

因みに画像は、data URI スキーム で表現されています。
こんな感じ(グリーンスターの画像です)。

<img src="data:image/gif;base64,R0lGODlhCwAKAJECAD3OJE3nM////wAAACH5BAEAAAIALAAAAAALAAoAAAIZlA2nl8vQXJgKwhlsA3hGhH0gJ15C9pVGAQA7">

対象となった要素の innerHTML の表現の一部として入ってますので、そのまま保存すれば画像も保存されます。


POST する form の onsubmit で #editor の innerHTML を取得して、form 内の要素に入れてあげる感じで良いと思います。

<form onsubmit="return put_editor_data()">
    <textarea name="editor_data"></textarea>
</form>

<script>
function put_editor_data() {
	$("TEXTAREA[name=editor_data]").val($("#editor").html());
	return true;
}
</script>
id:dy7

的確なご回答ありがとうございました。

2013/07/30 15:10:31

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません