使用ueditor富文本编辑器
官网地址:https://ueditor.baidu.com/website/
根据需要下载Demo:
我这用的是jsp版本:
解压之后结构图:
到这一步准备工作就做好了,接下来导入到工程中:
- 全部复制到工程中:
2.导入依赖jar包:jar包在jsp目录下
如果是maven工程:<dependency> <groupId>com.baidu</groupId> <artifactId>ueditor</artifactId> <version>1.1.2</version> </dependency> <!--ueditor 依赖包 --> <dependency> <groupId>org.json</groupId> <artifactId>json</artifactId> <version>20180813</version> <type>bundle</type> </dependency> <dependency> <groupId>commons-codec</groupId> <artifactId>commons-codec</artifactId> <version>1.9</version> </dependency> <!-- 文件上传 --> <dependency> <groupId>commons-io</groupId> <artifactId>commons-io</artifactId> <version>2.4</version> </dependency> <dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> <version>1.4</version> </dependency>
注意:maven中央仓库 没有ueditor.jar ,所以需要加载到本地仓库
方式一:是要指令:
mvn install:install-file -Dfile=ueditor-1.1.2.jar -Dpackaging=jar - DgroupId=com.baidu.ueditor -DartifactId=ueditor -Dversion=1.1.2
方式二:使用myEclipse:
单击右键,选择import
- 在jsp中使用:
添加js文件:config.js与all.js顺序
<script type="text/javascript" src="<%=path %>/res/ueditor/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="<%=path %>/res/ueditor/ueditor.all.js"></script>
<link rel="stylesheet" href="<%=path %>/res/ueditor/themes/default/css/ueditor.css">
<script type="text/javascript" src="<%=path %>/res/ueditor/lang/zh-cn/zh-cn.js"></script>
<!--把文本域变成 富文本编辑器-->
<textarea id="container" name="content"></textarea>
<script type="text/javascript">
$(function(){
UE.getEditor("container");
})
</script>
运行结果:
到这一步后,会发现上传图片显示不出来,注意要修改配置文件