在一个页面里面放了两个富文本编辑器(simditor),但是提交form的时候只能取到第一个的值,取不到第二个的值,邮件问官方,官方说他们自己测试没问题,可以取到两个。又试了其它编辑器,包括bootstrap-wysiwyg,redactor 等,都只能取到第一个,不能取到第二个,但是放两个纯textarea,就没问题,不知道是哪里的原因
问题页面 http://quyi.sinaapp.com/translate.php
用的get,可以看到url里面没有第二个textarea的值
相关代码:
<p class="container">
<p class="row-fluid">
<p class="span6">
<section id="page-demo">
<form action="get">
<center>原文题目:<input type="text" name="etitle"></input></center>
<textarea id="txt-content1" name="txt1" data-autosave="editor-content" autofocus></textarea>
</section>
</p>
<p class="span6">
<section id="page-demo">
<center>译文题目:<input type="text" name="ttitle"></input></center>
<textarea id="txt-content2" name="txt2" data-autosave="editor-content" autofocus></textarea>
</section>
<input type="submit" value="提交" class="btn btn-success" />
</form>
</p>
<p id = "translate_word">
</p>
</p>
</p>
<script type="text/javascript" src="scripts/js/simditor-all.js"></script>
<script type="text/javascript" src="simditor/lib/simditor-markdown.js"></script>
<script type="text/javascript">
(function() {
$(function() {
var editor;
editor = new Simditor({
textarea: $('#txt-content1'),
placeholder: '这里输入文字...',
pasteImage: true,
toolbar: ['title', 'bold', 'italic', 'underline', 'strikethrough', '|', 'ol', 'ul', 'blockquote', 'code', 'table', '|', 'link', 'image', 'hr', '|', 'indent', 'outdent'],
defaultImage: 'assets/images/image.png',
upload: location.search === '?upload' ? {
url: '/upload'
} : false
});
return editor = new Simditor({
textarea: $('#txt-content2'),
placeholder: '这里输入文字...',
pasteImage: true,
toolbar: ['title', 'bold', 'italic', 'underline', 'strikethrough', '|', 'ol', 'ul', 'blockquote', 'code', 'table', '|', 'link', 'image', 'hr', '|', 'indent', 'outdent'],
defaultImage: 'assets/images/image.png',
upload: location.search === '?upload' ? {
url: '/upload'
} : false
});
});
}).call(this);
</script>
<!-- Footer
================================================== -->
<footer class="footer">
<p class="container">
<p class="row-fluid">
<p class="span12">
<center>
<p class="testimonial">趣译网,最好的翻译和双语阅读平台。即刻提高你的英语</p>
<p class="name"><b>©Funtranslate 2014</b></p>
</center>
</p>
</p>
<hr class="soften1">
</footer>
<script>
var di;
var p_id = 'translate_word';
di = document.getElementById(p_id);
// make di
if(!di){
di = document.createElement("p");
}
di.id = p_id;
di.style.position = 'absolute';
di.style.backgroundColor='white';
document.body.appendChild(di);
var get_selected_word = function(){
var txt = '';
//not support ie6 (which can not use this script :P)
txt = document.getSelection();
return txt.toString();
}
var ifr = document.createElement('iframe');
ifr.id = 'yd_translat_ifr';
var area = document//.getElementById("test")
area.onmouseup = function(e){
//alert("asdf");
var txt = get_selected_word();
sh = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
var left = (e.clientX - 40 < 0) ? e.clientX + 20 : e.clientX - 40;
var top = (e.clientY - 40 < 0) ? e.clientY + sh + 20 : e.clientY + sh - 40;
if(txt){
top = top + 80;
di.style.top = top + "px";
ifr.src = "getmean.php" + get_selected_word();
ifr.height = 150;
ifr.width = 200;
document.getElementById(di.id).appendChild(ifr);
}else{
if(document.getElementById(di.id).firstChild){
document.getElementById(di.id).removeChild(document.getElementById(di.id).firstChild);
}
}
}
</script>
首先,
input
没有</input>
这种关法。其次,form 开关位置似乎也不太好,直接把两个
<p class="span6">
关在里边比较好。再次,如果用普通的 HTML 来提交的话,是可以拿到两个 textarea 的值的。但你的编辑器是用 JS 插件处理过的,所以我猜测应该是它处理的问题。
用元素查看器查看,插件初始化以后,DOM 结构就和你预期的不一样了,
form
只包裹了第 1 个 textarea。按 F12 键。
打开调试面板,切换到 network。
查看请求头。
应该把
<textarea>
包含在同一个<form>
里