人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

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

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

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

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

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

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

●質問者: dy7
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● kaji0120
●0ポイント

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

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

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

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

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


2 ● a-kuma3
●200ポイント ベストアンサー

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>

dy7さんのコメント
的確なご回答ありがとうございました。
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ