ssm+maven+ueditor集成百度富文本编辑器

ueditor下载地址:
http://ueditor.baidu.com/website/download.html
在这里插入图片描述
下载自己需要的版本,我这里是jsp/utf版本
解压将文件名改为ueditor,将文件夹拖拽到项目webapp下
在这里插入图片描述
如果是web项目直接将jsp下的lib重jar放入项目lib下即可,我这里是maven项目,将依赖添加到pom.xml中。

		<dependency>
			<groupId>commons-fileupload</groupId>
			<artifactId>commons-fileupload</artifactId>
			<version>1.3.1</version>
		</dependency>
		<dependency>
			<groupId>commons-io</groupId>
  			<artifactId>commons-io</artifactId>
  			<version>2.4</version>
		</dependency>
		<dependency>
			<groupId>commons-codec</groupId>
			<artifactId>commons-codec</artifactId>
			<version>1.9</version>
		</dependency>
		<dependency>
		    <groupId>org.json</groupId>
		    <artifactId>json</artifactId>
		    <version>20170516</version>
		</dependency>
		<dependency>
             <groupId>com.baidu.ueditor</groupId>
             <artifactId>ueditor</artifactId>
             <version>1.1.2</version>
             <scope>system</scope>
             <systemPath>${basedir}/src/main/webapp/WEB-INF/lib/ueditor-1.1.2.jar</systemPath>
         </dependency>

在这里我是将ueditor1.1.2这个jar放入到了lib中,然后从pom.xml引入的本地的jar,没去重新下载
以下是ueditor需要修改的配置,首先ueditor.config.js文件中修改:var URL = window.UEDITOR_HOME_URL || "http://127.0.0.1:8080/项目名称/ueditor/";
这个地址是为了能链接到下边的jsp/controller.jsp在这里插入图片描述
其次修改config.json中的路径,主要是“imagePathFormat”等上传保存路径以及“imageUrlPrefix”等图片访问路径前缀
在这里插入图片描述

包括下边的“涂鸦图片”、“上传视频”、“上传文件”等,上传路径和访问路径都需要改一下。
“{yyyy}{mm}{dd}/{time}{rand:6}”为文件夹或文件命名格式,命名格式可以自定义,具体在下边注解中都有声明。
以上两个文件配置完成,jar引入后即可启动项目了。项目启动后访问:http://127.0.0.1:8080/项目名称/ueditor/jsp/controller.jsp?action=config
如果返回在这里插入图片描述
则配置真确,否则配置失败。请仔细查看配置路径是否正确。
ueditor的整体效果可以访问http://127.0.0.1:8080/项目名称/ueditor/index.html在这里插入图片描述
在页面上的写法:

//引入js
 <script type="text/javascript" src="/ueditor/ueditor.config.js"></script>
 <script type="text/javascript" src="/ueditor/ueditor.parse.js"></script>
  <script type="text/javascript" src="/ueditor/ueditor.all.js"></script>
 <script type="text/javascript" charset="utf-8" src="/ueditor/lang/zh-cn/zh-cn.js"></script>

body中:

<textarea id="web_content"  name="web_content">这里写你的初始化内容...
			</textarea>
			<!-- 实例化编辑器 -->
			<script type="text/javascript">
			
			var ue = UE.getEditor("web_content");
			
			</script>

一个整体的ueditor就集成成功了

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页