form提交wysiwyg内容

缺乏、安全感 2021-09-10 15:04 339阅读 0赞

**form表单中如何提交wysiwyg富文本域内容，大多数情况下，我们都会用到富文本域，而不是单纯的textarea，因为我们可能需要定制一些特殊的文本式样，还有图片，从而图文并茂的展示用户想要展示的内容，就如同markdown一样，你说呢？**

## 富文本编辑器 ##

对于wysiwyg，你可以参考  
[为Bootstrap定制的微型所见即所得（What you see is what you get）富文本编辑器][Bootstrap_What you see is what you get]、  
[Bootstrap富文本编辑器bootstrap-wysiwyg的使用][Bootstrap_bootstrap-wysiwyg]  
，不过我觉得你看我的比他们好，哈哈！

## 材料下载 ##

[wysiwyg富文本编辑器 ][wysiwyg_]

![这里写图片描述][20150923141111774]

版本如果对应不上的话，富文本编辑器也无法正常的显示。

## 导入js和css ##

注意font-awesome的包路径

![这里写图片描述][20150923142155983]

## 使用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"); %>

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

这三串代码进行参数的传递，**不知道是否还有更好的解决方案，如果你有，请告诉我**！

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

![这里写图片描述][20150923142903795]

## 封装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的写法*)

## jfinal端 ##

String description = getPara("editor");

获取到对应的文本内容，然后保存到数据库就OK了。

**结语**：之前文章到这里就结束了，后来发现保存图片的时候一直有问题，就有了这个解决方案，你也一并看了吧！

--------------------

## 相关文章 ##

*  [富文本域数据保存到数据库][Link 1]
 *  [ jfinal与bootstrap的登录跳转实战][jfinal_bootstrap]
 *  [极致ajax局部和整体刷新][ajax]
 *  [jfinal文件上传][jfinal]
 *  [再谈ajax局部刷新][ajax 1]
 *  [来看看怎么通过a标签打开一个对话框][a]
 *  [ jfinal为weebox弹出框传递参数][jfinal_weebox]

## 乔布斯语录 ##

> 那么人生何处不爬虫，爬虫请标[http://blog.csdn.net/qing\_gee][http_blog.csdn.net_qing_gee]  
> 对自己负责，对父母感恩！
> 
> 其实乔布斯压根没有说过这句话，哈哈，是青·乔布斯说的！（嘻嘻）

[Bootstrap_What you see is what you get]: http://www.bootcss.com/p/bootstrap-wysiwyg/
[Bootstrap_bootstrap-wysiwyg]: http://www.gbtags.com/gb/share/2428.htm
[wysiwyg_]: http://download.csdn.net/detail/qing_gee/9133141
[20150923141111774]: /images/20210506/d743b71884c048219f8df6a780cbb211.png
[20150923142155983]: /images/20210506/1e390686a6f9452f9223a94faf9688d3.png
[20150923142903795]: /images/20210506/645b0dcdb3a747da83b3dd58f28cc815.png
[Link 1]: http://blog.csdn.net/qing_gee/article/details/49331543
[jfinal_bootstrap]: http://blog.csdn.net/qing_gee/article/details/48543807
[ajax]: http://blog.csdn.net/qing_gee/article/details/48548845
[jfinal]: http://blog.csdn.net/qing_gee/article/details/48657327
[ajax 1]: http://blog.csdn.net/qing_gee/article/details/48783129
[a]: http://blog.csdn.net/qing_gee/article/details/48752317
[jfinal_weebox]: http://blog.csdn.net/qing_gee/article/details/48712953
[http_blog.csdn.net_qing_gee]: http://blog.csdn.net/qing_gee