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

痛定思痛。 2024-04-18 12:32 36阅读 0赞

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

## 序 ##

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

## 正文 ##

在研究了多个富文本编辑器后，基于免费、好用、简洁的原则（主要是基于免费），最终选择使用[wangEditor][]。  
**使用场景**  
从Word中复制图片、文字、标题、部分带样式的文字到编辑器中。可实现取出文字和图片的功能，不包含Word上的样式，比如加粗、斜体等样式。  
说明：以下内容均基于该使用场景。  
**使用方法**

1.  下载wangEditor的JS。  
    官网首页有个下载，点下载之后进入GitHub，选择要下载的版本后，下载source code压缩包。然后从压缩包中把JS取出来：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FfUnVubmVy_size_16_color_FFFFFF_t_70]
2.  将上面说的JS复制你的项目中，然后在页面上引用。

创建一个富文本编辑器：

1.  获取富文本编辑器的内容

var editorData = editor.txt.html();

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

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

具体参考文档：[读取内容][Link 1]

1.  通过`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;
    	}
    }

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

**直接可以用的JS代码：**

1.  我再把后台处理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();
    }

1.  特别说明一下，上面的`cleanPastedHTML`方法，引用了[这篇博客][Link 2]中的方法。声明感谢！

[wangEditor]: http://www.wangeditor.com/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FfUnVubmVy_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/fb315eb03e074649837c6ad227606c37.png
[Link 1]: https://www.kancloud.cn/wangfupeng/wangeditor3/335775
[Link 2]: https://blog.csdn.net/hncsl/article/details/52804618