![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
リッチテキスト形式のエディタを実装したフォームを作りたいがために、Dojoライブラリ内のDijitにあるEditorを利用しようと思っています。
ライブラリをダウンロードし、設置、Editorの表示までは難なく出来たのですが、Editorで作成・編集したリッチテキスト形式のデータをPHPに渡すことができません。
以下、ソースです。(一部簡略化)
form.php-----------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="note-style.css">
<style type="text/css">
@import "../../js/dijit/themes/tundra/tundra.css";
@import "../../js/dojo/resources/dojo.css"
</style>
<script type="text/javascript" src="../../js/dojo/dojo.js" djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.Editor");
dojo.require("dijit._editor.plugins.AlwaysShowToolbar");
dojo.require("dijit._editor.plugins.FontChoice");
dojo.require("dijit._editor.plugins.TextColor");
dojo.require("dijit._editor.plugins.LinkDialog");
</script>
</head>
<body class="tundra">
<center>
<div id="cover">
<div id="main2">
<br>
<center>
<div id="note">
<div id="note-top"> </div><div id="note-cont">
<div id="note-cov">
<?php
switch($_GET['mode']){
case "new" :
newForm();
break;
case "edit" :
editForm();
break;
case "del" :
delForm();
break;
default :
error("正しくないMODEです。(1)");
}
function newForm() {
?>
<br>
<br>
<form method="post" action="make.php">
<input type="hidden" name="mode" value="new">
投稿者名 : <input type="text" name="name" size="30" value="<?echo$_SESSION['name'];?>"><br>
<br>
記事題名 : <input type="text" name="title" size="50" value="<?echo$_SESSION['title'];?>"><br>
<br>
記事本文 : <br>
<div class="textarea">
<textarea name="field" dojoType="dijit.Editor" height="250" width="300" id="editor_field"
plugins="['cut','paste','copy','|','bold','italic','underline','|','justifyLeft','justifyCenter','justifyRight','|','foreColor',{name:'dijit._editor.plugins.FontChoice', command:'fontSize', custom:[2,3,4,5,6]},
'insertImage','|','createLink']">
<?echo$_SESSION['field'];?>
</textarea>
</div>
<br>
<br>
パス : <input type="password" name="pass" size="20"><br>
<br>
<br>
<input type="submit" value="投稿">
</div>
<br>
</form>
<?php
}
?>
<br><br>
</div>
</div>
</div>
<br>
<br>
</center>
</div>
</div>
</center>
</body>
</html>
--------------------------------------------
make.php------------------------------------
<?php
echo "テキストフィールド : ".$_POST['field']."<br>\n";
echo "投稿者名 : ".$_POST['name']."<br>\n";
exit;
?>
--------------------------------------------
ディレクトリ構造(Folderは仮名)
public_html>js>
dojo
dijit
dojox
public_html>Folder>Folder>
form.php
make.php
設置サイトURL
http://www.usamimi.info/~goldwing/himawari/note/ …
DojoのEditorでリッチテキストを入力、Submitを押すと
make.phpにデータが渡されるはずなのですが、投稿者名は表示され、テキストフィールド内の情報が表示されません。
情報の取得方法、もしくは送信方法が間違っていると思いますが、
Google等で検索してもこれといった解決方法は見つかりませんでした。
お忙しいところ申し訳ございませんが、解決方法をご存知の方、どうかご教授をよろしくお願い致します。
No.2ベストアンサー
- 回答日時:
失礼。
どうも、バージョンが上がってから、確かにうまくいかなくなってますね。参考URLにあるように、送信ボタンが押されたときにdijit.Editorの内容を<input type="hidden" name="field" id="field" />に移す処理を行ってみてはどうでしょうか?
参考URLの例では、イベントリスナで送信ボタンが押されたときにエディタの内容を隠しフィールドにコピーするという処理を行っています。
dojo.addOnLoad(function () {
dojo.connect(dojo.byId('[<form>タグのID]'), 'onsubmit', function () {
dojo.byId('[PHPに送るデーターの隠しフィールドのID]').value = dijit.byId('[dijit.EditerのID]').getValue(false);
});
});
エディタの指定が、dojo.byIdではなくdijit.byIdになっている点に注意してください。dojo.byIdはほぼdocument.getElementByIdと同じですが、dijitを使ったフォームでは内容の取得にdijit.byIdを使います。
実際の違いは、console.dir(dijit.byId('editor_field'));と、console.dir(dojo.byId('editor_field'));で比較するとわかると思います。
dijitによって生成したフォームのパーツは、<input>タグによるデーターの保存を行っているとは限らないので、データーの取得やイベントリスナなどの指定ではをdijit.byIdを使います。
※dojo.connectは、prototype.jsにおけるEvent.Ovserveとほぼ同等の処理です。
参考URL:http://dojocampus.org/content/2008/07/16/submitt …
非常にわかりやすいご回答どうもありがとうございました。
今回は少し急ぎの用件でしたので、別のエディタを利用するという方法で解決してしまいました><
しかし、Dijit内の様々な付属ライブラリを見ているととても綺麗で便利そうなものがたくさんありましたので、次回また利用する際に必ず参考にさせていただきます。
どうもありがとうございました。
No.1
- 回答日時:
Dojo付属のFireBug Liteは活用していますか?
まず、djConfig="parseOnLoad: true"にisDebug: trueを追加しましょう。
こうすることで、たとえば、このスクリプトの場合、IEでも、console.log(dijit.byId('editor_field'));と任意な場所に入れることによって、この編集フィールド内にデーターが本当に入っているかが確認できます。
確かdijit.Editorでは、<textarea>タグに割り当てることは推奨されていないはず。<div dojoType="dijit.Editer">でやってみましたか?
参考URL:http://download.dojotoolkit.org/current-stable/d …
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript セレクトボックスを2つ設けて選択して初めてメッセを表示 1 2022/07/27 12:15
- JavaScript switch文のswitch(n)の部分を複数の値にするか、if文に変えてほしいです。 1 2022/07/27 17:18
- PHP 入力した部分を表示させたまま(保持)するにはどうすれば良いでしょうか? 1 2023/01/25 11:14
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- PHP if(preg_match("/[^0-9]/",$gu_d)){意味を教えてください。 1 2022/05/06 05:37
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- PHP PHPで画像の渡しが上手く行きません。 1 2023/02/02 09:39
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- PHP PHPでユーザー情報を入力して簡易ログイン機能をつくってみたのですが 1 2023/05/29 08:51
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
CSSでreadonlyの機能はあり...
-
ブログパーツをレスポンシブ化...
-
javascriptでの(-)ハイフンの処...
-
「ご処理進めて頂きますようお...
-
CloseとDisposeの違い
-
VBAでループ内で使う変数名を可...
-
エクセルで、日付を入力すると...
-
UPS警告音を止めたい
-
アクセスVBAのMe!と[ ]
-
Excelシート上のマクロを登録し...
-
HTMLでこの画像を表示したいで...
-
VBA エンターキーでイベントに...
-
【Excel】特定の文字を含むセル...
-
DoEventsがやはり分からない
-
月度は何て読みますか?
-
「PC Helpsoft Driver Updated...
-
セルの値が0はクリアするマクロ
-
EXCEL VBA マクロ 実行する度に...
-
switch の範囲指定
-
メルカリのメルカードで買い物...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
確認ダイアログを次からは表示...
-
CSSでreadonlyの機能はあり...
-
formのsubmitを押すとモーダル...
-
Q&A掲示板の入力フォームに文字...
-
JavascriptのHTMLクラス表示に...
-
3重のクォーテーション
-
JavaScriptのinnerHTMLの挙動に...
-
特定の条件のHTML要素を一括で...
-
クリックすると、色が変わるよ...
-
jqueryを使ったスムーススクロ...
-
折りたたみを全て開いて別ペー...
-
jQuery 画面サイズにスライド画...
-
2回目以降のページロード時には...
-
Bootstrap Javascriptでモーダル
-
jQueryのSlickで矢印アイコンが...
-
javascriptとcssでフォントサイ...
-
JavaScriptのdiv.style属性の変...
-
フォームで「パスワード(確認...
-
macかwinか判別しスタイルシー...
-
javascript htmlの追記について
おすすめ情報