1500字范文 > 使用wangEditor富文本编辑器上传图片和文字

使用wangEditor富文本编辑器上传图片和文字

时间：2020-02-20 09:26:50

“刘郎已恨蓬山远，更隔蓬山一万重”

序

现在做的是从web端给眼镜端发送消息，其实就是web端把消息存到数据库，然后眼镜从数据库获取消息即可。现在在web端的输入框需要直接复制图片进去，于是就用上了富文本编辑器。

正文

在研究了多个富文本编辑器后，基于免费、好用、简洁的原则（主要是基于免费），最终选择使用wangEditor。

使用场景

从Word中复制图片、文字、标题、部分带样式的文字到编辑器中。可实现取出文字和图片的功能，不包含Word上的样式，比如加粗、斜体等样式。

说明：以下内容均基于该使用场景。

使用方法

下载wangEditor的JS。

官网首页有个下载，点下载之后进入GitHub，选择要下载的版本后，下载source code压缩包。然后从压缩包中把JS取出来：

将上面说的JS复制你的项目中，然后在页面上引用。

<script src="/js/wangEditor.min.js"></script>

创建一个富文本编辑器：

<script type="text/javascript">var editor ;//定义全局变量//富文本编辑器var E = window.wangEditor;editor = new E('#textarea');editor.customConfig.uploadImgShowBase64 = true; // 使用 base64 保存图片，使用这种方式上传图片，然后在服务器端把base64编码转成图片。这样就不需要上传文件了。editor.customConfig.menus = [];//设置不要工具栏editor.create();</script>

获取富文本编辑器的内容

var editorData = editor.txt.html();

获取编辑器的内容还有其他方式：

var editorData = editor.txt.text();//或者var editorData = editor.txt.getJSON();

具体参考文档：读取内容

通过editor.txt.html();读取的内容都含有样式，（如果是通过通过Word粘贴进去的文本或图片，请看步骤6）比如p标签，img标签之类的，所以需要去除这些标签，直接把p标签里面的内容和img标签图片的base64编码取出来，用到正则表达式：

//获取编辑器的内容var editorData = editor.txt.html();//定义一个图片编码和文字的数组var picArr = new Array();var wordArr = new Array();//获取图片编码的正则var p = /<img\s?src="data\:image\/.*?;base64,(.*?)"/ig;while(true){var match = p.exec(editorData);if(match){picArr.push(match[1]);}else{break;}}//获取p标签中的文字p = /<p>([^<]*?)<\/p>/ig;while(true){var match = p.exec(editorData);if(match){//判断是否全是空格if (!match[1].match(/^[ ]*$/)) {wordArr.push(match[1]);}}else{break;}}

通过上面代码就能获取到在编辑器中输入的文字，或者是从Word中粘贴过去的图片。然后通过文字数组和图片编码的数组，传到服务端处理就可以了。但是如果从Word上粘贴文字到编辑器的话，会有很多样式，比如：加粗、斜体、下划线等，这种情况的需要去除这些样式文本，我把整个的代码都贴出来：

直接可以用的JS代码：

我再把后台处理base64编码成图片的方法再贴一下：

//先把base64编码转成流，imgBase64Code就是前台传过来的图片编码，由于我这里把图片编码加到数组里了，所以要先循环数组，这里省略了循环。byte[] byt = Base64Utils.decode(imgBase64Code);//再把流写成文件，fileName是随机生成的文件名，filePath是要存储的路径FileUtil.uploadFile(byt, filePath, fileName);public static byte[] decode(String s) {ByteArrayOutputStream bos = new ByteArrayOutputStream();try {decode(s, bos);} catch (IOException e) {throw new RuntimeException();}byte[] decodedBytes = bos.toByteArray();try {bos.close();bos = null;} catch (IOException ex) {System.err.println("Error while decoding BASE64: " + ex.toString());}return decodedBytes;}public static void uploadFile(byte[] file, String filePath, String fileName) throws Exception {File targetFile = new File(filePath);if (!targetFile.exists()) {targetFile.mkdirs();}FileOutputStream out = new FileOutputStream(filePath +"/"+ fileName);out.write(file);out.flush();out.close();}

特别说明一下，上面的cleanPastedHTML方法，引用了这篇博客中的方法。声明感谢！

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。