UEditor（JSP版）使用总结

最新推荐文章于 2018-12-13 10:56:08 发布

SylviaHY

最新推荐文章于 2018-12-13 10:56:08 发布

阅读量2.7k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：项目经验文章标签： UEditor EasyUI

本文链接：https://blog.youkuaiyun.com/zhaoxueerHY/article/details/79235914

1.背景

公司一个后台模块要用到插入表格的功能，之前项目中使用的是 Umeditor，UEditor 的迷你版，然后悲催地发现 umeditor 中并没有插入表格的功能，好吧，只能换插件了。因为对百度富文本的风格较为熟悉，所以果断换完整版的 UEditor 了。于是开始了貌似短暂却充满艰辛的 ueditor 探（tong）索（ku）之路。

2.引入 Editor 插件

（1）下载

链接一（ueditor 官方下载路径）：http://ueditor.baidu.com/website/download.html
链接二（文档说明）：http://fex.baidu.com/ueditor/

（2）引入到项目中，结构如下

① demo.html 文件是依据链接二中的文档说明新增的，其他均为插件中。

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>ueditor demo</title>
</head>
<body>
    <!-- 加载编辑器的容器 -->
    <script id="container" name="content" type="text/plain">
        这里写你的初始化内容
    </script>
    <!-- 配置文件 -->
    <script type="text/javascript" src="ueditor.config.js"></script>
    <!-- 编辑器源码文件 -->
    <script type="text/javascript" src="ueditor.all.js"></script>
    <!-- 实例化编辑器 -->
    <script type="text/javascript">
        var ue = UE.getEditor('container');
    </script>
</body>
</html>

此时，不需要修改任何东西，直接访问demo.html 就可以看到编辑器：

3.实现图片上传

一般情况下，现在其实功能都可以用了，只要保证你的路径配置是正确的，图片上传也没毛病。但是，可能你也会像我一样衰到上传图片几乎百度能搜到的几个常见问题基本一个不落地碰到，哭死……好吧，在看这种异常情况之前，我们先来了解几个重要的文件：

① ueditor.config.js

serverUrl 为上传请求的统一的 controller

var URL = window.UEDITOR_HOME_URL || getUEBasePath();

// 服务器统一请求接口路径
serverUrl: URL + "jsp/controller.jsp"

② controller.jsp （ueditor\jsp\controller.jsp）

jsp 为① 中配置的serverUrl 要请求的 controller（其中 system.out.println(rootPath) 我手动加的，测试用），这个时候要注意，需要导入 ueditor\jsp\lib 下的五个jar包，否则 ActionEnter 处会报错！！！

③ config.json（ueditor\jsp\config.json）

上传的路径等的配置，要注意的是红框中的两项路径配置。可以修改为自己的路径。不正确时图片是无法显示的。

首先，当我引入完插件，并且照着大神们说的改好了路径配置之后满怀信心地点了下图片上传的图标，what？咋没反应？！！于是，F12，发现报错了：后台配置项返回格式出错，上传功能将不能正常使用！

浏览器显示酱紫：

点击多图上传显示酱紫：

这时候无知的我一开始看到配置项错了，以为是config.json 中的路径配置有问题，然后各种改啊，怎么都不好使啊啊啊！！在 controller

最低0.47元/天解锁文章

200万优质内容无限畅学