%3c/html:form%3e,如何封装form表单中富文本编辑器bootstrap wysiwyg到jfinal传递

基于huffman编码的文本数据压缩中的第一个阶段需要统计一个文本文件中的各个字符出现的次数，以作为字符的权值进行编码 在统计的时候我用一个结构体数组来存储文

前言：《如何封装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

==========>

=>

=>

=>

注意font-awesome的包路径

使用wysiwyg

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

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

String description = request.getParameter("description");

%>

">

).val());

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

这样，你就可以看到这样的效果：

封装form表单

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

=="brief" maxlength="75">${deal.brief}

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

String name = getPara("name");

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

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

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

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

{

var $form = $(form), $iframe = $("#callbackframe");

// 富文本编辑器

$($this = $(this);

var editor = "";

$form.append(editor);

});

if(!$form.valid()) {return false;}

if ($iframe.size() == 0) {

$iframe = $("").appendTo("body");

}

if(!form.ajax) {

$form.append('');

}

form.target = "callbackframe";

_iframeResponse($iframe[0], callback || YUNM.ajaxDone);

}

{

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);

});

}

请注意：

$($this = $(this);

var editor = "";

$form.append(editor);

});

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

jfinal端

String description = getPara("editor");

和平常的参数就一致了。