百度Ueditor富文本编辑器的使用

最近项目中用到了Ueditor富文本编辑器,趁还没忘记,整理处理给需要的朋友;

项目环境

语言: Java(web)

工具:Eclipse, Ueditor

项目架构:SSM(springMVC, mybatis, spring)

使用步骤:

1:先去Ueditor官网下载其文件包,(下载就不演示了)

2:目录介绍(扒的是Ueditor官网的,具体的详见Ueditor官网)

 

• dialogs: 弹出对话框对应的资源和JS文件
• lang: 编辑器国际化显示的文件
• php或jsp或asp或net: 涉及到服务器端操作的后台文件
• themes: 样式图片和样式文件
• third-party: 第三方插件(包括代码高亮，源码编辑等组件）
• ueditor.all.js: 开发版代码合并的结果,目录下所有文件的打包文件
• ueditor.all.min.js: ueditor.all.js文件的压缩版，建议在正式部署时采用
• ueditor.config.js: 编辑器的配置文件，建议和编辑器实例化页面置于同一目录
• ueditor.parse.js: 编辑的内容显示页面引用，会自动加载表格、列表、代码高亮等样式
• ueditor.parse.min.js: ueditor.parse.js文件的压缩版，建议在内容展示页正式部署时采用

 

3:将下载的Ueditor编辑器的文件包,拷贝进项目中,放在WebB-Root/js/下

4:在需要使用Ueditor编辑器的jsp引入相关的js文件以及对编辑器初始化

4.1) 先引入js

 

	<!-- 百度的UEditor富文本编辑器配置文件 -->
	<script type="text/javascript" src="${pageContext.request.contextPath}/js/ueditor1_4_3_2/ueditor.config.js"><!-- 百度的UEditor富文本编辑器配置文件 -->
	<script type="text/javascript" src="${pageContext.request.contextPath}/js/ueditor1_4_3_2/ueditor.config.js">

	</script>
	<!-- 编辑器源码文件 -->
<script type="text/javascript" src="${pageContext.request.contextPath}/js/ueditor1_4_3_2/ueditor.all.min.js"></script>
	<!-- 编辑器源码文件 -->
<script type="text/javascript" src="${pageContext.request.contextPath}/js/ueditor1_4_3_2/ueditor.all.min.js">

	</script></script>

4.2) 将编辑器容器放置到body块中(你想放置的位置都行)

 

 

	<!- 加载编辑器的容器 -->
	<script id="container" name="content" type="text/plain"></script><!- 加载编辑器的容器 -->
	<script id="container" name="content" type="text/plain"></script>

4.3) 初始化Ueditor

 

 

	//初始化---这是js代码
	var ue = UE.getEditor('container',{
		toolbars:[//设置菜单
			['anchor','|','undo','redo','bold','indent','italic','underline','strikethrough',]
		],
		autoHeightEnabled: false,//如果是false方可达到当编辑器内容很多时有滚动条
	    autoFloatEnabled: true,
	    initialFrameHeight: 300//设置编辑器高度
	});	autoHeightEnabled: false,//如果是false方可达到当编辑器内容很多时有滚动条
	    autoFloatEnabled: true,
	    initialFrameHeight: 300//设置编辑器高度
	});

这个菜单项是可以在它官网查看的;

 

目前只完成了整个功能的一半

5:修改Ueditor文件包中几个js文件的配置

5.1:ueditor/jsp/config.js(此文件负责编辑器所有上传配置,此处只以图片上传为例,其它类似)

imageUrlPrefix:表示上传后它会把图片插入到编辑框中并展示,这个就是制定图片访问路径(就是你上传后的路径);
imagePathFormat:表示图片上传目录和图片名字命名方式以及访问主路径的一部分,

只需要更改这两个配置项即可,其它默认;

5.2:ueditor.config.js只需要修改:window.UEDITOR_HOME_URL || "/项目名/js/ueditor1_4_3_2/";

6效果展示