富文本编辑器_com.baidu.ueditor.actionenter 需要引jar包吗-程序员宅基地

技术标签: 百度编辑器  

这段时间公司有个需求要用到富文本编辑器,在这里做一个小小的使用总结吧。

首先准备工作

到官网下载http://ueditor.baidu.com/website/ 将编辑器下载下来

技术文档 http://fex.baidu.com/ueditor/

可以在demo里面看到,先引入js

[html]  view plain  copy
  1. <script type="text/javascript" charset="utf-8" src="ueditor/ueditor.config.js"></script>  
  2. <script type="text/javascript" charset="utf-8" src="ueditor/ueditor.all.min.js"> </script>  
  3. <script type="text/javascript" charset="utf-8" src="ueditor/lang/zh-cn/zh-cn.js"></script>  

要使用编辑器的话,在需要引入的位置中加入

[html]  view plain  copy
  1. <script id="editor" type="text/plain" style="width:1024px;height:500px;"></script>  

实例化编辑器

[html]  view plain  copy
  1. <script type="text/javascript">  
  2.     //建议使用工厂方法getEditor创建和引用编辑器实例  
  3.    var ue = UE.getEditor('editor');  
  4. </script>  

其他一下方法在demo里面都有,比较常用的

[html]  view plain  copy
  1. //获取富文本编辑器内容  
  2. function getContent() {  
  3.     return UE.getEditor('editor').getContent();  
  4. }  
  5. //设置编辑器内容  
  6. function setContent() {  
  7.     UE.getEditor('editor').setContent("内容");  
  8. }  


准备工作做好之后,遇到了图片上传问题,弄了好长时间,发现需要在config.json配置上传路径和前缀,需要导入jar包


图片的上传是 com.baidu.ueditor.ActionEnter 这个jar包里面的servlet,这个servlet上传图片是会上传到本地项目下

如果需要自己写一个上传的action,传到自己的服务器下的某个地址,则需要修改源码,下面我有注释的地方就是需要修改的

--------------------------------自定义上传到其他服务器---------------------------

从官网上下载下来源码  \ueditor1_4_3-src\jsp\src 这个下面就是jar包里的源码 ,修改 BinaryUploader.java


[java]  view plain  copy
  1. package com.baidu.ueditor.upload;  
  2.   
  3. import com.baidu.ueditor.PathFormat;  
  4. import com.baidu.ueditor.define.AppInfo;  
  5. import com.baidu.ueditor.define.BaseState;  
  6. import com.baidu.ueditor.define.FileType;  
  7. import com.baidu.ueditor.define.State;  
  8.   
  9. import java.io.IOException;  
  10. import java.io.InputStream;  
  11. import java.util.Arrays;  
  12. import java.util.List;  
  13. import java.util.Map;  
  14.   
  15. import javax.servlet.http.HttpServletRequest;  
  16.   
  17. import org.apache.commons.fileupload.FileItemIterator;  
  18. import org.apache.commons.fileupload.FileItemStream;  
  19. import org.apache.commons.fileupload.FileUploadException;  
  20. import org.apache.commons.fileupload.disk.DiskFileItemFactory;  
  21. import org.apache.commons.fileupload.servlet.ServletFileUpload;  
  22.   
  23. public class BinaryUploader {  
  24.   
  25.     public static final State save(HttpServletRequest request,  
  26.             Map<String, Object> conf) {  
  27.         FileItemStream fileStream = null;  
  28.         boolean isAjaxUpload = request.getHeader( "X_Requested_With" ) != null;  
  29.   
  30.         if (!ServletFileUpload.isMultipartContent(request)) {  
  31.             return new BaseState(false, AppInfo.NOT_MULTIPART_CONTENT);  
  32.         }  
  33.   
  34.         ServletFileUpload upload = new ServletFileUpload(  
  35.                 new DiskFileItemFactory());  
  36.   
  37.         if ( isAjaxUpload ) {  
  38.             upload.setHeaderEncoding( "UTF-8" );  
  39.         }  
  40.   
  41.         try {  
  42.             FileItemIterator iterator = upload.getItemIterator(request);  
  43.   
  44.             while (iterator.hasNext()) {  
  45.                 fileStream = iterator.next();  
  46.   
  47.                 if (!fileStream.isFormField())  
  48.                     break;  
  49.                 fileStream = null;  
  50.             }  
  51.   
  52.             if (fileStream == null) {  
  53.                 return new BaseState(false, AppInfo.NOTFOUND_UPLOAD_DATA);  
  54.             }  
  55.   
  56.             String savePath = (String) conf.get("savePath");  
  57.             String originFileName = fileStream.getName();  
  58.             String suffix = FileType.getSuffixByFilename(originFileName);  
  59.   
  60.             originFileName = originFileName.substring(0,  
  61.                     originFileName.length() - suffix.length());  
  62.             savePath = savePath + suffix;  
  63.   
  64.             long maxSize = ((Long) conf.get("maxSize")).longValue();  
  65.   
  66.             if (!validType(suffix, (String[]) conf.get("allowFiles"))) {  
  67.                 return new BaseState(false, AppInfo.NOT_ALLOW_FILE_TYPE);  
  68.             }  
  69.   
  70.             savePath = PathFormat.parse(savePath, originFileName);  
  71.                         //savePath为config.json设置的文件名  
  72.             String physicalPath = (String) conf.get("rootPath") + savePath;  
  73.   
  74.             InputStream is = fileStream.openStream();  
  75.                         //把这里替换成自己的上传方法  
  76.                         State storageState = StorageManager.saveFileByInputStream(is,  
  77.                     physicalPath, maxSize);  
  78.             is.close();  
  79.   
  80.             if (storageState.isSuccess()) {  
  81.                                 //url返回前缀,需要改成服务器地址前缀  
  82.                                 storageState.putInfo("url", PathFormat.format(savePath));  
  83.                 storageState.putInfo("type", suffix);  
  84.                 storageState.putInfo("original", originFileName + suffix);  
  85.             }  
  86.   
  87.             return storageState;  
  88.         } catch (FileUploadException e) {  
  89.             return new BaseState(false, AppInfo.PARSE_REQUEST_ERROR);  
  90.         } catch (IOException e) {  
  91.         }  
  92.         return new BaseState(false, AppInfo.IO_ERROR);  
  93.     }  
  94.   
  95.     private static boolean validType(String type, String[] allowTypes) {  
  96.         List<String> list = Arrays.asList(allowTypes);  
  97.   
  98.         return list.contains(type);  
  99.     }  
  100. }  

后来测试的时候发现一个bug,就是如果在编辑器中存入大量样式的时候,会生成很多标签,存到数据库,再重新编辑的时候想再回显放入编辑器,用js放入报错

[javascript]  view plain  copy
  1. var content = '<p>  
  2. </p><h1>又一对姐弟恋诞生!倪妮井柏然经纪人承认恋情</h1><p>  
  3. </p><p>2016年03月 6日 20:53 网易娱乐</p><p>  
  4. </p>';  
有很多换行符,但js字符串有换行的话要用加号连接,解决办法是在java后台代码中就处理掉换行,content = content.replaceAll("\n", " "); 把所有的换行符去掉就ok了



后续如果有补充,会回来修复一下

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_29072049/article/details/79753637

智能推荐

Spring Data JPA在springboot中的应用-程序员宅基地

文章浏览阅读202次。文章目录一、springboot中spring data jpa的配置pom.xml配置application.yml测试类基础模板二、spring data jpa利用原生sql或者jpql执行数据库操作实体bean三、spring data jpa根据命名规则查询四、specification(规范查询,分页,动态sql)五、多表关联查询一、springboot中spring data jp..._data jpa在springboot中

Win10安装Ansible Python包_windows下载ansible安装包-程序员宅基地

文章浏览阅读3k次。文章目录前言安装步骤1.准备工作2.下载ansible安装包3.安装3.1 修改压缩包3.2 解压缩3.3 安装总结前言此Win10安装ansible方案,只是为了解决win环境下开发python项目时,涉及ansible模块引用报错的问题。如果想在win环境下安装ansible进行客户端管理或playbook开发,本文所述方案不适合!可了解一下Cygwin或Windows Subsystem for Linux。安装步骤在win环境下直接使用pip install ansible安装肯定是会_windows下载ansible安装包

macOS开发,发现webview连接不上网络。。已解决-程序员宅基地

文章浏览阅读1.1k次。今天帮公司搞一个mac的开发项目,就是最简单的用webview套一个网页就可以了。代码就一句话可惜,报了这堆错误,而且webview一片空白。后来在网上终于找到了解决方法,在这里分享给大家。

当软件定义存储(SDS)遇见区块链(BlockChain)-程序员宅基地

文章浏览阅读2.4k次。【编者Peter Ye按】再开始正文之前,先分享我最近思考得出的一段话: 互联网解决了信息随时分享,移动互联网解决了信息随地分享,物联网解决了信息随物分享,而构建在三者基..._软件定义存储的空间

golang使用redis分布式锁_can be used to set the clock drift factor.-程序员宅基地

文章浏览阅读1.1w次,点赞5次,收藏10次。昨天由于项目需求,需要使用redis分布式锁,在网上找了半天,也没有找到一个简单的教程,经过自己研究,了解简单使用方法,都可以直接拿过来自己用,下面我就发出来给大家分享一下。首先下载 github.com/garyburd/redigo,因为这个分布式锁是根据上面所实现; 下载 gopkg.in/redsync.v1这个就是实现分布式锁的源代码(如果测试需要下载 github.c..._can be used to set the clock drift factor.

22道机器学习常见面试题目汇总!(附详细解答)-程序员宅基地

文章浏览阅读555次。作者 | 数据分析1480来源 | lsxxx2011(1) 无监督和有监督算法的区别?有监督学习:对具有概念标记(分类)的训练样本进行学习,以尽可能对训练样本集外的数据进行标记(分类)预测。这里,所有的标记(分类)是已知的。因此,训练样本的岐义性低。无监督学习:对没有概念标记(分类)的训练样本进行学习,以发现训练样本集中的结构性知识。这里,所有的标记(分..._cda level Ⅲ 面试题

随便推点

小白学java日记——接口与匿名内部类的实例_java 接口 匿名类 案例-程序员宅基地

文章浏览阅读88次。班级学生排队,男生按照身高从低到高排一队,女生,按照姓名从小到大排一队(使用接口和匿名内部类)package homework;import java.sql.Connection;import java.util.Arrays;/*班级学生排队,男生按照身高从低到高排一队,女生,按照姓名从小到大排一队(使用接口和匿名内部类)分析:接口,数组,枚举,匿名内部类,Arrrys工具类,String的方法实现过程:1.分组按照性别分成男队和女队2.排序使用接口制定对应的规则分别实._java 接口 匿名类 案例

公有继承基类和派生类之间构造和析构、赋值和拷贝构造函数的关系(上)_公有继承 构造-程序员宅基地

文章浏览阅读251次。公有继承基类和派生类之间构造和析构、赋值和拷贝构造函数的关系(上)1、公有继承基类和派生类之间构造函数的关系如果一个类Text在公有继承了Object类,在创建一个Text对象t时会先调用Object的构造函数,然后再调用Text的构造函数,不论Text的形参列表声明中Object的声明在前在后。代码测试:#include<iostream>using namespace std;class Object{ private: int val; public: Object_公有继承 构造

提升UITableView性能-复杂页面的优化_android uitableview优化-程序员宅基地

文章浏览阅读504次。前言随着App的用户界面的内容越来越丰富,再强的手机可能都无法同时渲染复杂的UI界面和保证流畅的体验。所以,我们这些程序猿=。=在写代码的时候就要注意,如何尽可能提高用户的操作流畅性。之前的做的项目,青桔音乐iOS客户端里面的首页就是一个类似微信朋友圈的“动态”页面,大致如下:青桔动态页面如果是你,你会怎么实现这个页面呢?这还用问,当然是用UITableView+自定义_android uitableview优化

maven 聚合、继承详解_pom resources子模块继承-程序员宅基地

文章浏览阅读348次。文章目录项目Maven聚合rpc 模块创建继承pom 依赖配置relativePath元素可以通过继承的元素有以下这些依赖管理(dependencyManagement)项目github 建个仓库执行 git clone 克隆项目到本地idea 新建项目Maven聚合<modules> <module>模块1</module> ..._pom resources子模块继承

cv2.error: OpenCV(4.2.0) /io/opencv/modules/imgproc/src/imgwarp.cpp:3391-程序员宅基地

文章浏览阅读4.2k次。问题全部为:cv2.error: OpenCV(4.2.0) /io/opencv/modules/imgproc/src/imgwarp.cpp:3391: error: (-215:Assertion failed) src.checkVector(2, CV_32F) == 4 && dst.checkVector(2, CV_32F) == 4 in function 'getPerspectiveTransform'出现在使用cv2.getPerspectiveTransfo_cv2.error: opencv(4.2.0) /io/opencv/modules/imgproc/src/imgwarp.cpp:3391: er

网络位置多频服务器,实例演示多台主机使用DNS服务器实现网络负载均衡-程序员宅基地

文章浏览阅读329次。为了提高服务器的性能和工作的负载能力,企业通常会采用DNS服务器、网络地址转换等技术来实现多服务器的负载平衡,今天这篇文章是爱站技术频道小编为大家带来的实例演示多台主机使用DNS服务器实现网络负载均衡,一起来了解一下吧!实例演示多台主机使用DNS服务器实现网络负载均衡一、启用循环以WindowsServer2003系统为例,在DNS服务器中,依次点击“开始→程序→管理工具→DNS”选项,进入DNS..._dns负载均衡怎么配置

推荐文章

热门文章

相关标签