没啥思路，就取编辑器内容html，dompase解析，然后递归循环截取
traverse(curNode, curLen,limit,truncated,types)
{
if (truncated) {
return curLen;
}
let that=this;
//如果其为文本节点则进行截取内容
if (curNode.nodeType === Node.TEXT_NODE) {
//内容为空
const content = curNode.textContent.trim().replace(/\n|\r|\s/mg, '');
// 6+5=11
//当子元素的时候 最后一位 就不应该加了
const len = curLen + content.length;
//大于以后则中断此操作
if (len >= limit) {
//因为是小段落 所以这块分2种情况 一种直接大文本
//一种是小段路截取 更具当前的计算长度 来判断当前还需要剩余截取多少
let subs=0;
subs=limit - curLen
const truncatedContent = content.substr(0, subs) ;
curNode.textContent = truncatedContent;
truncated = true;
return limit;
} else {
//这里面返回2种情况 第一种没有子节点 则返回当前内容 有子节点则返回+
if (content.length>0) {
return len;
}else {
return curLen;
}
}
} else {
//如果不是文本节点 展示其子节点
const childNodes = [...curNode.childNodes];
//0
let len = curLen;
let i=2
for (let childNode of childNodes) {
if (childNode=="" || childNode==null) {
continue
}
len= that.traverse(childNode, len,limit,truncated,i);
if (truncated) {
break;
}
}
return len;
}
},
truncateHtml(html, limit) {
let that=this;
//https://developer.mozilla.org/zh-CN/docs/Web/API/DOMParser
const parser = new DOMParser();
const serializer = new XMLSerializer();
//解析dom结构
const doc = parser.parseFromString(html, "text/html");
//递归其节点
// 【释义】4
// <p><span style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255);">“行路难”为乐府古题，多咏叹世路艰难及贫困孤苦的处境。</span></p>
// <p><span style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255);">“行路难”为乐府古题，多咏叹世路艰难及贫困孤苦的处境。</span></p>
//<p style="text-align: left;"> “行路难”为乐府古题，<span style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255); font-family: Arial;"> </span><strong>【释义】</strong></p>
// 【释义】4
let lens=0
let truncated = false;
let i=0;
let tmp=[]
for (let childNode of doc.body.childNodes) {
//p 6
if (lens>=limit) {
childNode.textContent="";
tmp.push(i);
//doc.body.removeChild(doc.body.childNodes[i]);
++i;
continue;
}
lens=that.traverse(childNode,lens,limit,truncated,1);
++i;
}
//每删一个节点就变化
//19 20 21 22 23
//22 21 20 19 18
//直接倒序删除
tmp.reverse();
for(let index in tmp) {
// console.log(index)
// if(index==0) {
// doc.body.removeChild(doc.body.childNodes[tmp[index]]);
// console.log(doc.body.childNodes)
// }else {
// // if (doc.body.childNodes[tmp[index]-1]) {
// // doc.body.removeChild(doc.body.childNodes[tmp[index]-1]);
// // }
// }
if (doc.body.childNodes[tmp[index]]) {
doc.body.removeChild(doc.body.childNodes[tmp[index]]);
}
}
const truncatedHtml = serializer.serializeToString(doc.documentElement);
return truncatedHtml;
},
粘贴效果wangeditor
onCustomPaste(editor, event) {
let that = this
const html = event.clipboardData.getData('text/html');
//editor.dangerouslyInsertHtml(this.subHtml(html,200))
editor.dangerouslyInsertHtml(html);
var as=editor.getHtml()
editor.clear()
editor.dangerouslyInsertHtml(this.truncateHtml(as,that.maxLength))
// 阻止默认的粘贴行为
event.preventDefault()
return false
}