java使用百度富文本框_快速掌握百度富文本编辑器 UEditor 的使用

这里介绍的是 Maven 项目中如何使用百度富文本编辑器 UEditor，通过本教程，能够快速上手百度富文本编辑器的使用，其中包括常用的图片上传功能，以达到图文混排的效果。

1、将 jar 包安装到本地 Maven 仓库

将富文本编辑器下的 jsp下的 lib 目录下的 jar 包拷贝至D盘，

然后进入 cmd，输入如下命令：

mvn install:install-file -DgroupId=com.baidu -DartifactId=ueditor -Dversion=1.1.2

-Dpackaging=jar -Dfile=E:/ueditor-1.1.2.jar

2、项目中导入相关 Maven 依赖

将富文本编辑器文件全部拷贝至 web 目录下：

pom.xml 中将它们引入：

com.baidu

ueditor

1.1.2

org.json

json

20160810

commons-fileupload

commons-fileupload

1.3.1

commons-codec

commons-codec

1.9

commons-io

commons-io

2.4

然后，在 Project Structure 的 Artifacts 中：选中 WEB-INF 目录，新建一个 lib 目录，将以上 maven 中的 jar 包添加进去

ps：这一步很关键！

3、修改配置文件

第一处的地方是图片路径拼接前缀，要修改为项目的根路径！

第二处地方为 ueditor 在项目中的相对路径！

两者都要正确设置！

4、前端页面中引入富文本编辑器

首先，引入相关 js 文件：

然后，初始化 UEditor 编辑器

上方的宽高数值为编辑器的初始大小，可自行修改

UEditor 编辑器控件

要想让文本编辑器具有默认值，可在标签中增加文本作为初始内容

5、运行测试

ps：测试图片来源于网络

在项目的 upload 目录下可以查看到上传的文件，用于显示

文本编辑器中的图片以路径链接形式引入，若要或取文本的所有内容(包括图片)，直接通过 dom 获取即可，最后前端发送请求给后端，将内容保存至数据库中

当然，截图然后复制到文本编辑器中也可以实现上传，更多功能可以自行发现

6、常用配置修改

有些图片的尺寸偏大，上传后会超出编辑器大小，这时候就需添加相关设置使图片自适应编辑器大小

进入到如下文件：

增添如下 css 代码：

/*可以在这里添加你自己的css*/

img {

max-width: 100%; /*图片自适应宽度*/

}

body {

overflow-y: scroll !important;

}

.view {

word-break: break-all;

}

.vote_area {

display: block;

}

.vote_iframe {

background-color: transparent;

border: 0 none;

height: 100%;

}

#edui1_imagescale{display:none !important;} /*去除点击图片后出现的拉伸边框*/

完成后 【Ctrl + F5】刷新页面重新进行测试即可

本文地址：https://blog.csdn.net/qq_45716120/article/details/111879415

如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！