ueditor1-4-3 编辑器使用教程

ueditor是百度开发的，可以百度搜索下载该编辑器。我下载了jsp版本的

下载解压后的目录是格式如下：



然后把整个文件导入项目里，我的形式如下：



首先在jsp->lib把所有jar包copy到web-inf/lib下，



然后把demo.html复制生成一个demo.jsp文件，做些少许修改，如下：

<span style="white-space:pre">	</span><form action="<c:url value='/ueditor'/>" method="post">
<textarea id="container" name="content"
style="width: 800px; height: 400px; margin: 0 auto;">这里书写内容
</textarea>
</br>
<button id="tijiao" name="tijiao"
sytle="margin-left:250px; width:60px; position:relative">提交</button>
</form>
<!-- 配置文件 -->
<script type="text/javascript" src="ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="ueditor.all.js"></script>
<!-- 实例化编辑器 -->
<script type="text/javascript">
var editor = UE.getEditor('container');
</script>

现在页面上可以显示基本的模型。



打开editor.config.js，为window.UEDITOR_HOME_URL付初始值：



打开config.json，在jsp文件夹下，配置“图片访问路径前缀”,和修改图片保存路径，如下：



如果有用到文件/涂鸦等等，还需要修改下面的保存路径：xxxpathformat。列出例外：



要想成功使用在线管理的功能，还需要修改controller.jsp页面，如下：

<%@ page language="java" contentType="text/html; charset=UTF-8"

import="com.baidu.ueditor.ActionEnter"

pageEncoding="UTF-8"%>
<%@ page trimDirectiveWhitespaces="true" %>
<%
request.setCharacterEncoding( "utf-8" );
response.setHeader("Content-Type" , "text/html");

String rootPath = application.getRealPath( "/" );

String action = request.getParameter("action");
String result = new ActionEnter( request, rootPath ).exec();
if( action!=null &&
(action.equals("listfile") || action.equals("listimage") ) ){
rootPath = rootPath.replace("\\", "/");
result = result.replaceAll(rootPath, "/");//把返回路径中的物理路径替换为 '/'
}
out.write( result );
%>加入了些许代码。