最新版UEDITOR使用教程

最近项目中使用到了富文本编辑器，选择的是百度的UEditor。所以对其进行了研究，发现最近发布了新版本，与以往的用法有的改变。一下对UEditotr 的是用做一下详细的介绍。

首先是UEditotr的下载，下载地址：https://www.360docs.net/doc/be6017410.html,/website/download.html

在这个页面有很多下载选项，为了简单起见，可以更具开发的环境进行下载。我用的是JSP，所以下载的是

以下的使用说明也都是以JSP的作为介绍，其他的大同小异。

下载完成之后解压出来。

下边开始介绍使用方法：

一.导入：

将解压好的文件导入工程，我用的是MyEclipse，直接粘贴到工程中的WebRoot下如图：

工程中的js文件报错是由于开发工具的问题，不用处理。

二.包的导入：

在导入的文件中的jsp->lib下有需要导入的包

将这些包拷贝到WEB-INF的lib下

导入后有的包不能自动添加，需要手动添加一下。

三.简单例子：

在jsp的head中添加：

body中添加：

注意在head中的引用是否正确，一切完成后启动程序，就能看到效果。

四.修改展现的样式：

如果你不需要这么多的功能选项，可以修改ueditor.config.js

这是规定页面展现的地方，不要的删除即可。我只需要上传图片和表格，所有修改后如图：

五.修改图片上传地址：

这个地方，之前的版本是在ueditor.config.js修改的，但新版本中是在config.json中修改：

这里有很详细的中文注解。修改imagePathFormat即可修改上传图片的地址，其他上传功能修改相似。

六.上传到云盘或别的网站：

之前的上传是上传到程序所在的服务器上，这样迟早是会沾满资源的，所以要放到云盘或别的地方。

指定上传路劲：UE.Editor.prototype._bkGetActionUrl =

UE.Editor.prototype.getActionUrl;

UE.Editor.prototype.getActionUrl = function(action) { if (action == 'uploadimage' || action == 'uploadscrawl' || action == 'uploadimage') {

return"";

} else if (action == 'uploadvideo') {

return'https://www.360docs.net/doc/be6017410.html,/video.php';

} else {

return this._bkGetActionUrl.call(this, action);

}

};

这样在上传图片的时候就会去找/savePic路劲，实现你指定的上传。在后台写好上传功能即可。需注意的是上传时，信息放在Request Payload中，后台接

收数据时，需注意（接收方法请上网查找，此处不做介绍）；图片保存后，需向前台回传信息：

JSONObject result = new JSONObject();

result.put("state", "SUCCESS");

// result.put("title", "1431917830166036926.png");

// result.put("original",

"QQ\u56fe\u724720150511105213.png");

// result.put("type", ".png");

result.put("url",

request().getContextPath()+"/pledge/download?filePath="+f ilePath);

// result.put("size", "8941");

this.renderJSON(result.toString());

七.表单提交：

简单的form表单提交即可。将接收的信息保存。

八.页面展示：

从数据库提取信息，展示即可：

九.页面操作：

页面有时需要一些操作，比如禁止编辑，提取信息等：

var ue = UE.getEditor('editor');

ue.ready(function() {

ue.setDisabled('fullscreen');

});//禁止编辑

可查看文档：https://www.360docs.net/doc/be6017410.html,/ueditor/#api-common