频道栏目
首页 > 程序开发 > 综合编程 > 其他综合 > 正文
如何封装form表单中富文本编辑器bootstrap wysiwyg到jfinal传递参数
2015-09-25 10:48:26      个评论    来源:qing_gee的专栏  
收藏   我要投稿

前言:《如何封装form表单中富文本编辑器bootstrap wysiwyg到jfinal传递参数》,我很纠结这个名字是否词不达意。普通文本编辑器在form表单中提交时,参数值会自然的组成为key value的键值对,而大多数的富文本编辑器都是组件化,由很多个js和css组成,其在获取值得时候就比较特殊。本篇就详细来介绍一下bootstrap wysiwyg组件是如何向jfinal传递参数的。

富文本编辑器

对于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







jsp" hljs="" xml=""><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



在你需要的p中使用这样的语句进行导入,我使用标签,然后传递了初始化的文本内容。

然后你在我提供的资源中找到wysiwyg.jsp文件,里面我使用了

<%
   String description = request.getParameter(description);
  %>

>
$('#editor').html($(#description).val());

这三串代码进行参数的传递,不知道是否还有更好的解决方案。

这样,你就可以看到这样的效果:

这里写图片描述

封装form表单

关键的地方来了,如我前言中所说,对于普通的textarea,我们只要

这样使用,就可以通过name属性传递到服务端

String name = getPara(name);

也许你想要说,那在点击提交按钮之前来串js代码不就完了。

form.action=/hi/meinv?mynameis=+$(#me).html()

但对对于一心要封装的我们,怎么能够满足这样的代码。

于是我们有了(代码参照了dwz的写法)

function iframeCallback(form, callback){
    var $form = $(form), $iframe = $(#callbackframe);

    // 富文本编辑器
    $(p.editor, $form).each(function(){
        var $this = $(this);
        var editor = ;
        $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('');
    }
    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:'
';) { // 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); }); }

请注意:

    $(p.editor, $form).each(function(){
        var $this = $(this);
        var editor = ;
        $form.append(editor);
    });

创建一个隐藏域,然后,设置name属性,以提供给后端获取值。

jfinal端

String description = getPara(editor);

和平常的参数就一致了。

 

点击复制链接 与好友分享!回本站首页
上一篇:为bootstrap的tab增加请求操作
下一篇:[TopCoder SRM420 Div1 500pt RedIsGood]
相关文章
图文推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站