如何封装form表单中富文本编辑器bootstrap wysiwyg到jfinal传递参数
2015-09-23 15:51
706 查看
前言:《如何封装form表单中富文本编辑器bootstrap wysiwyg到jfinal传递参数》,我很纠结这个名字是否词不达意。普通文本编辑器在form表单中提交时,参数值会自然的组成为key value的键值对,而大多数的富文本编辑器都是组件化,由很多个js和css组成,其在获取值得时候就比较特殊。本篇就详细来介绍一下bootstrap wysiwyg组件是如何向jfinal传递参数的。
。
第一篇中的demo,无法输入英文,输入中文到一点问题没有,第二篇中demo是可以运行的,但是利用的资源中font-awesome.css比较古老,版本是3.0.2,而awesome版本已经更新到5.0.0。
版本如果对应不上的话,富文本编辑器也无法正常的显示。
注意font-awesome的包路径
在你需要的div中使用这样的语句进行导入,我使用
然后你在我提供的资源中找到wysiwyg.jsp文件,里面我使用了
这三串代码进行参数的传递,不知道是否还有更好的解决方案。
这样,你就可以看到这样的效果:
这样使用,就可以通过name属性传递到服务端
也许你想要说,那在点击提交按钮之前来串js代码不就完了。
但对对于一心要封装的我们,怎么能够满足这样的代码。
于是我们有了(代码参照了dwz的写法)
请注意:
创建一个隐藏域,然后,设置name属性,以提供给后端获取值。
和平常的参数就一致了。
富文本编辑器
对于wysiwyg,你可以参考为Bootstrap定制的微型所见即所得(What you see is what you get)富文本编辑器、Bootstrap富文本编辑器bootstrap-wysiwyg的使用。
第一篇中的demo,无法输入英文,输入中文到一点问题没有,第二篇中demo是可以运行的,但是利用的资源中font-awesome.css比较古老,版本是3.0.2,而awesome版本已经更新到5.0.0。
版本如果对应不上的话,富文本编辑器也无法正常的显示。
材料下载
wysiwyg富文本编辑器导入js和css
<link type="text/css" rel="stylesheet" href="${ctx}/components/bootstrap/css/bootstrap-theme.min.css" /> <link type="text/css" rel="stylesheet" href="${ctx}/components/bootstrap/css/bootstrap.min.css" /> <link type="text/css" rel="stylesheet" href="${ctx}/components/awesome/css/font-awesome.css" /> <link type="text/css" rel="stylesheet" href="${ctx}/components/wysiwyg/bootstrap-responsive.min.css" /> <link type="text/css" rel="stylesheet" href="${ctx}/components/wysiwyg/wysiwyg.css" /> <script type="text/javascript" src="${ctx}/components/jquery/jquery.js"></script> <script type="text/javascript" src="${ctx}/components/bootstrap/js/bootstrap.min.js"></script> <script type="text/javascript" src="${ctx}/components/wysiwyg/bootstrap-wysiwyg.js"></script> <script type="text/javascript" src="${ctx}/components/wysiwyg/jquery.hotkeys.js"></script>
注意font-awesome的包路径
使用wysiwyg
<jsp:include page="/components/wysiwyg/wysiwyg.jsp"> <jsp:param value="${description}" name="description"/> </jsp:include>
在你需要的div中使用这样的语句进行导入,我使用
<jsp:include>标签,然后传递了初始化的文本内容。
然后你在我提供的资源中找到wysiwyg.jsp文件,里面我使用了
<% String description = request.getParameter("description"); %>
<input type="hidden" id="description" value="<%=description%>">
$('#editor').html($("#description").val());
这三串代码进行参数的传递,不知道是否还有更好的解决方案。
这样,你就可以看到这样的效果:
封装form表单
关键的地方来了,如我前言中所说,对于普通的textarea,我们只要<textarea class="form-control tb_width420 required" rows="3" placeholder="不超过75个字,简要描述一下你的项目" name="brief" maxlength="75">${deal.brief}</textarea>
这样使用,就可以通过name属性传递到服务端
String name = getPara("name");
也许你想要说,那在点击提交按钮之前来串js代码不就完了。
form.action="/hi/meinv?mynameis="+$("#me").html()
但对对于一心要封装的我们,怎么能够满足这样的代码。
于是我们有了(代码参照了dwz的写法)
function iframeCallback(form, callback){ var $form = $(form), $iframe = $("#callbackframe"); // 富文本编辑器 $("div.editor", $form).each(function(){ var $this = $(this); var editor = "<input type='hidden' name='" + $this.attr("name") +"' value='" + $this.html() +"' />"; $form.append(editor); }); if(!$form.valid()) {return false;} if ($iframe.size() == 0) { $iframe = $("<iframe id='callbackframe' name='callbackframe' src='about:blank' style='display:none'></iframe>").appendTo("body"); } if(!form.ajax) { $form.append('<input type="hidden" name="ajax" value="1" />'); } form.target = "callbackframe"; _iframeResponse($iframe[0], callback || YUNM.ajaxDone); } function _iframeResponse(iframe, callback){ var $iframe = $(iframe), $document = $(document); $document.trigger("ajaxStart"); $iframe.bind("load", function(event){ $iframe.unbind("load"); $document.trigger("ajaxStop"); if (iframe.src == "javascript:'%3Chtml%3E%3C/html%3E';" || // For Safari iframe.src == "javascript:'<html></html>';") { // For FF, IE return; } var doc = iframe.contentDocument || iframe.document; // fixing Opera 9.26,10.00 if (doc.readyState && doc.readyState != 'complete') return; // fixing Opera 9.64 if (doc.body && doc.body.innerHTML == "false") return; var response; if (doc.XMLDocument) { // response is a xml document Internet Explorer property response = doc.XMLDocument; } else if (doc.body){ try{ response = $iframe.contents().find("body").text(); response = jQuery.parseJSON(response); } catch (e){ // response is html document or plain text response = doc.body.innerHTML; } } else { // response is a xml document response = doc; } callback(response); }); }
请注意:
$("div.editor", $form).each(function(){ var $this = $(this); var editor = "<input type='hidden' name='" + $this.attr("name") +"' value='" + $this.html() +"' />"; $form.append(editor); });
创建一个隐藏域,然后,设置name属性,以提供给后端获取值。
jfinal端
String description = getPara("editor");
和平常的参数就一致了。
相关文章推荐
- 50 Must-have plugins for extending Twitter Bootstrap
- Bootstrap学习笔记-栅格系统
- Bootstrap学习笔记-响应式布局原理
- Bootstrap学习笔记-布局
- Bootstrap学习笔记
- Bootstrap Themes & Templates
- Bootstrap模态框水平垂直居中与增加拖拽功能
- 利用bootstrap Grid栅格系统的向下缩小特性排版
- 使用bootstrap-table简化CRUD
- Bootstrap 栅格系统
- Bootstrap教程:[4]栅格系统详解
- 【Bootstrap】兼容IE8、谷歌和其他主流浏览器的观众IMAX风格的页面
- bootstrap table自动换行
- bootstrap精简教程
- jfinal与bootstrap的登录跳转实战演习
- jfinal与bootstrap的登录跳转实战演习
- 解决Bootstrap不兼容IE8及以下版本的问题
- bootstrap 学习
- MVC5 + EF6 + Bootstrap3 (16) 客户端验证
- MVC5 + EF6 + Bootstrap3 (15) 应用ModelState和Data Annotation做服务器端数据验证