富文本编辑器

官方下载网址：下载JSP版本
http://ueditor.baidu.com/website/download.html

创建一个动态web工程，将解压出来的编辑器文件夹整个拷贝到WebContent目录下。此时工程会报错，因为我们没有引用所需的jar包。

将utf8-jsp -> jsp->lib目录下中的所有jar包拷贝到WEB-INF目录下的lib文件夹中
如果config.json文件报错，需要关闭eclipse对json文件的验证
Window - > Preferences- -搜索 validation --然后我们再点 Disable All

在WebContent下创建一个index.jsp的文件。
将utf8-jsp中的index.html文件内容拷贝到index.jsp

注：使用插件时必须引入以下3个文件,注意文件路径

<script type="text/javascript" charset="utf-8" src="utf8-jsp/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="utf8-jsp/ueditor.all.min.js"> </script>
<script type="text/javascript" charset="utf-8" src="utf8-jsp/lang/zh-cn/zh-cn.js"></script>

调用编辑器

<script id="editor" type="text/plain" style="width:1024px;height:500px;">
</script>

完成之后访问项目的index.jsp

获取编辑框的内容

将多余的按钮以及js脚本都删除，保留一个实例化编辑器的方法

<script type="text/javascript">
  实例化编辑器
  var ue = UE.getEditor('editor');
</script>

使用form表单将整个 编辑器包涵，并且加上用于提交表单的按钮

<form action="Servlet映射路径">
    <h1>完整demo</h1>
<script id="editor" type="text/plain" style="width:1024px;height:500px;">
</script>
        <input type="submit">
</form>

编辑一段内容然后点击提交，观察浏览器地址栏

会发现在servlet路径上，会自动拼接了参数 ?editorValue=...
根据这个参数可以在服务器获取编辑器的数据

request.getParameter("editorValue");

获取的数据，可以共享到其他的jsp显示

String content=request.getParameter("editorValue");
request.setAttribute("content", content);
request.getRequestDispatcher("demo.jsp").forward(request, response);

配置图片路径

在没有配置图片上传路径的时候，添加一张图片时是显示不出来的

编辑utf8-jsp -> lib -> 下的config.json文件
将图片路径改为下面的格式

"imagePathFormat": "image/{yyyy}{mm}{dd}/{time}{rand:6}"

配置完成之后重启toncat服务器并且运行index.jsp，编写一条图文信息提交

查看图片路径

<%out.println(request.getRealPath("")); %>