快速掌握百度富文本编辑器 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 中将它们引入：

    <dependencies>
        <dependency>
            <groupId>com.baidu</groupId>
            <artifactId>ueditor</artifactId>
            <version>1.1.2</version>
        </dependency>

        <!-- 导入json支持包 -->
        <dependency>
            <groupId>org.json</groupId>
            <artifactId>json</artifactId>
            <version>20160810</version>
        </dependency>

        <dependency>
            <groupId>commons-fileupload</groupId>
            <artifactId>commons-fileupload</artifactId>
            <version>1.3.1</version>
        </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>

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

3、修改配置文件

第一处的地方是图片路径拼接前缀，要修改为项目的根路径！
第二处地方为 ueditor 在项目中的相对路径！
两者都要正确设置！

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

首先，引入相关 js 文件：

<script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.all.js"> </script>

然后，初始化 UEditor 编辑器

<script type="text/javascript">
    UE.getEditor('myeditor',{initialFrameHeight:500,initialFrameWidth:800})
</script>

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

<form>
    <textarea name="content" id="myeditor"></textarea>
</form>

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

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