使⽤wangEditor富⽂本编辑器上传图⽚和⽂字
“刘郎已恨蓬⼭远，更隔蓬⼭⼀万重”
序
现在做的是从web端给眼镜端发送消息，其实就是web端把消息存到数据库，然后眼镜从数据库获取消息即可。现在在web端的输⼊框需要直接复制图⽚进去，于是就⽤上了富⽂本编辑器。
正⽂
在研究了多个富⽂本编辑器后，基于免费、好⽤、简洁的原则（主要是基于免费），最终选择使⽤。
使⽤场景
从Word中复制图⽚、⽂字、标题、部分带样式的⽂字到编辑器中。可实现取出⽂字和图⽚的功能，不包含Word上的样式，⽐如加粗、斜体等样式。
说明：以下内容均基于该使⽤场景。
使⽤⽅法
1. 下载wangEditor的JS。
官⽹⾸页有个下载，点下载之后进⼊GitHub，选择要下载的版本后，下载source code压缩包。然后从压缩包中把JS取出来：
2. 将上⾯说的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编码转成图⽚。这样就不需要上传⽂件了。
us = []; //设置不要⼯具栏
</script>
3. 获取富⽂本编辑器的内容
var editorData = html();
获取编辑器的内容还有其他⽅式：
var editorData = ();
//或者
var editorData = JSON();
具体参考⽂档：
4. 通过html()；读取的内容都含有样式，（如果是通过通过Word粘贴进去的⽂本或图⽚，请看步骤6）⽐如p标签，img标签之类
的，所以需要去除这些标签，直接把p标签⾥⾯的内容和img标签图⽚的base64编码取出来，⽤到正则表达式：
//获取编辑器的内容
var editorData = 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;
}
}
5. 通过上⾯代码就能获取到在编辑器中输⼊的⽂字，或者是从Word中粘贴过去的图⽚。然后通过⽂字数组和图⽚编码的数组，传到服务
端处理就可以了。
6. 但是如果从Word上粘贴⽂字到编辑器的话，会有很多样式，⽐如：加粗、斜体、下划线等，这种情况的需要去除这些样式⽂本，我把
整个的代码都贴出来：
直接可以⽤的JS代码：
function getEditorData(){
//处理富⽂本编辑器的数据
var picArr = new Array();
var editorData = html();
//处理Word复制过来的样式
editorData = cleanPastedHTML(editorData);
//获取图⽚
var p = /<img\s?src="data\:image\/.*?;base64,(.*?)"/ig;
while(true){
var match = p.exec(editorData);
if(match){
picArr.push(match[1]);
}else{
break;
}
}
var wordArr = new Array();
var wordArr = new Array();
//获取图⽚后⾯紧跟的⽂字，由于紧跟在图⽚后⾯，所以通过p标签获取⽂字的正则获取不到。
p = /">(.*?)<br>/ig;
while(true){
var match = p.exec(editorData);
if(match){
if (match[1] != '') {
wordArr.push(match[1]);
}
}else{
break;
}
}
//获取标题内容，因为Word中的标题，在富⽂本编辑器中获取出来都带<h1></h1>或<h2></h2>等 p = /<h\d>(.*?)<\/h\d>/ig;
while(true){
var match = p.exec(editorData);
if(match){
//判断是否全是空格
if (!match[1].match(/^[ ]*$/)) {
wordArr.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复制过来的样式
function cleanPastedHTML(input) {
// 1. remove line breaks / Mso classes
var stringStripper = /(\n|\r| class=(")?Mso[a-zA-Z]+(")?)/g;
var output = place(stringStripper, ' ');
// 2. strip Word generated HTML comments
var commentSripper = new RegExp('<!--(.*?)-->','g');
var output = place(commentSripper, '');
var tagStripper = new RegExp('<(/)*(meta|link|span|\\?xml:|st1:|o:|font)(.*?)>','gi');
// 3. remove tags leave content if any
output = place(tagStripper, '');
// 4. Remove everything in between and including tags '<style(.)style(.)>'
var badTags = ['style', 'script','applet','embed','noframes','noscript'];
for (var i=0; i< badTags.length; i++) {
tagStripper = new RegExp('<'+badTags[i]+'.*?'+badTags[i]+'(.*?)>', 'gi');
output = place(tagStripper, '');
}
// 5. remove attributes ' '
var badAttributes = ['style', 'start'];
for (var i=0; i< badAttributes.length; i++) {
var attributeStripper = new RegExp(' ' + badAttributes[i] + '="(.*?)"','gi');mkdirs方法
output = place(attributeStripper, '');
}
}
//去掉下划线、删除线、斜体、加粗等标签
output = placeAll("<b>","").replaceAll("</b>","").replaceAll("<i>","").replaceAll("</i>","").replaceAll("<u>","")
.replaceAll("</u>","").replaceAll("<s>","").replaceAll("</s>","").replaceAll("<p >","<p>");
return output;
}
//全部替换⽅法
placeAll  = function(s1,s2){
place(new RegExp(s1,"gm"),s2);
};
7. 我再把后台处理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 = ByteArray();
try {
bos.close();
bos = null;
} catch (IOException ex) {
}
return decodedBytes;
}
public static void uploadFile(byte[] file, String filePath, String fileName) throws Exception {
File targetFile = new File(filePath);
if (!ists()) {
targetFile.mkdirs();
}
FileOutputStream out = new FileOutputStream(filePath +"/"+ fileName);
out.write(file);
out.flush();
out.close();
}
8. 特别说明⼀下，上⾯的cleanPastedHTML⽅法，引⽤了中的⽅法。声明感谢！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。