在平时开发Java Web项目的时候,往往会使用第三方插件来帮助我们更快的实现功能。
这里教大家使用百度开源的富文本编辑器(UEditor)来帮助我们更好的编写文本。
官网下载地址
http://ueditor.baidu.com/website/download.html
这里下载最新版的就可以了
解压出来是这样的
打开index.html的效果
好了 ,废话不多说,开始我们的正题。
创建一个动态web工程
将解压出来的编辑器文件夹整个拷贝到WebContent目录下
此时工程会报错,因为我们没有引用所需的jar包。
将utf8-jsp -> jsp->lib目录下中的所有jar包拷贝到WEB-INF目录下的lib文件夹中
在WebContent下创建一个index.jsp的文件。
将utf8-jsp中的index.html文件内容拷贝到index.jsp
注:使用插件时必须引入以下3个文件
<script type="text/javascript" charset="utf-8" src=" ueditor.config.js"></script> <script type="text/javascript" charset="utf-8" src=" ueditor.all.min.js"> </script> <script type="text/javascript" charset="utf-8" src=" lang/zh-cn/zh-cn.js"></script>调用编辑器:
<script id="editor" type="text/plain" style="width:1024px;height:500px;"></script>初始化编辑器:
<script type="text/javascript"> //实例化编辑器 //建议使用工厂方法getEditor创建和引用编辑器实例,如果在某个闭包下引用该编辑器, //直接调用UE.getEditor('editor')就能拿到相关的实例 var ue = UE.getEditor('editor'); </script>将引用js文件的相对路径补全
完成之后运行index.jsp或者右键工程运行
这样基本的配置就搭建好了。
我们来使用富文本编辑器随便写一些内容,然后点击获取内容
我们发现,在javaScript中可以使用 editor.getContent()获得整个p标签的内容,那我们怎么在java web中拿到内容呢?
回到index.jsp中
使用form表单将整个 编辑器包涵,并且加上用于提交表单的按钮
<body> <div> <form action=""> <h1>完整demo</h1> <script id="editor" type="text/plain" style="width:1024px;height:500px;"></script> <button type="submit">提交</button> </form> </div> <script type="text/javascript"> //实例化编辑器 //建议使用工厂方法getEditor创建和引用编辑器实例,如果在某个闭包下引用该编辑器,直接调用UE.getEditor('editor')就能拿到相关的实例 var ue = UE.getEditor('editor'); </script> </body>将多余的按钮以及js脚本都删除,保留一个实例化编辑器的方法
var ue = UE.getEditor('editor');运行之后 编辑一段内容然后点击提交
http://localhost:8080/ueditor/index.jspeditorValue=>