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

Question

dy7

21

21もっと見る

200pt

ウェブ制作

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

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

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

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

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

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

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

回答の条件

1人5回まで

登録：2013/07/30 05:14:33
終了：2013/07/30 15:09:29

※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

No.1

kaji012059132013/07/30 10:42:02

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

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

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

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

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

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

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

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

リクエスト送信済

回答リクエストを送信したユーザーはいません

a-kuma3 · Accepted Answer · 2013-07-30T13:06:58+09:00

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>

a-kuma3 · Accepted Answer · 2013-07-30T13:06:58+09:00

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>

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

ベストアンサー

a-kuma3497421542013/07/30 13:06:58

その他の回答（1件）

kaji012059132013/07/30 10:42:02

a-kuma3497421542013/07/30 13:06:58ここでベストアンサー

コメント（0件)

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