最新版ueditor使用教程

《最新版ueditor使用教程》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、最近项目中使用到了富文本编辑器，选择的是百度的UEditor。所以对其进行了研究，发现最近发布了新版本，与以往的用法有的改变。一下对UEditotr的是用做一下详细的介绍。首先是UEditotr的下载，下载地址：http://ueditor.baidu.com/website/download.html在这个页面有很多下载选项，为了简单起见，可以更具开发的环境进行下载。我用的是JSP，所以下载的是以下的使用说明也都是以JSP的作为介绍，其他的大同小异。下载完成之后解压出来。下边开始介绍使用方法：一.导入

2、：将解压好的文件导入工程，我用的是MyEclipse，直接粘贴到工程中的WebRoot下如图：工程中的js文件报错是由于开发工具的问题，不用处理。二.包的导入：在导入的文件中的jsp->lib下有需要导入的包将这些包拷贝到WEB-INF的lib下导入后有的包不能自动添加，需要手动添加一下。三.简单例子：在jsp的head中添加：

3、>body中添加：//实例化编辑器//建议使用工厂方法

4、getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例varue=UE.getEditor('editor');注意在head中的引用是否正确，一切完成后启动程序，就能看到效果。四.修改展现的样式：如果你不需要这么多的功能选项，可以修改ueditor.config.js这是规定页面展现的地方，不要的删除即可。我只需要上传图片和表格，所有修改后如图：五.修改图片上传地址：这个地方，之前的版本是在uedi

5、tor.config.js修改的，但新版本中是在config.json中修改：这里有很详细的中文注解。修改imagePathFormat即可修改上传图片的地址，其他上传功能修改相似。六.上传到云盘或别的网站：之前的上传是上传到程序所在的服务器上，这样迟早是会沾满资源的，所以要放到云盘或别的地方。指定上传路劲：UE.Editor.prototype._bkGetActionUrl=UE.Editor.prototype.getActionUrl;UE.Editor.prototype.getActionU

6、rl=function(action){if(action=='uploadimage'

7、

8、action=='uploadscrawl'

9、

10、action=='uploadimage'){return"";}elseif(action=='uploadvideo'){return'http://a.b.com/video.php';}else{returnthis._bkGetActionUrl.call(this,action);}};这样在上传图片的时候

11、就会去找/savePic路劲，实现你指定的上传。在后台写好上传功能即可。需注意的是上传时，信息放在RequestPayload中，后台接收数据时，需注意（接收方法请上网查找，此处不做介绍）；图片保存后，需向前台回传信息：JSONObjectresult=newJSONObject();result.put("state","SUCCESS");//result.put("title","1431917830166036926.png");//result.put("original","QQu56fe

12、u724720150511105213.png");//result.put("type",".png");result.put("url",request().getContextPath()+"/pledge/download?filePath="+filePath);//result.put("size","8941");this.renderJSON(result.toString());七.表单提交：简单的form表单提交即可。