针对网上的某富文本编辑的bug解决

由于项目中使用了网上某富文本编辑器所带来的一系列bug困惑我许久, 特别花时间来解决它, 下面是关于的解决方案:

html内容做文本限制长度超出截断处理后还原html处理:

var str = 'abc  d 222rftggdb dnn     dhdhdhdhh1222       555           1222 ';
var arr = str.split(' '); // 通过截断可统计空格长度且知道哪些字符串
// str.split(' ').length - 1 , 空格个数
// 一个空格  6个字符长度, 算做字符限制超出了5个, 计算长度要减去

Q? 做字符截断如何处理呢, 我要截断2000个, 实际上不能直接截断html的2000会将 做长度一起截断, 实际是错误不可取的;
A:  
     统计长度时根据 截断后数组长度推测出 也就是空格的个数-1, 总数html长度减去空格数*5为文本长度, 
     截断的话直接通过截断的数组每个元素的长度进行往回拼接,  判断元素个数是否满足限制和已录入长度的差值, 小于的直接拼上后拼一个 因为是 截断出来的, 
     长度的话将数组长度+上再+1个空格长度; 
     如果下一个元素大于等于剩余长度则进行剩余长度的元素字符截断拼接, 最后break;

var str = 'abc  d 222rftggdb dnn     dhdhdhdhh1222       555           1222 ';
var arr = str.split(' '); 
var maxLength = 50 // 限制只输50个文本长
var sumLength = 0; // 往回拼接的字符数
var limitConcat = ''; // 往回拼接的字符串
for (var i = 0;i < arr.length;++i){
  if (maxLength - sumLength > 0) {
    if (arr[i].length < maxLength - sumLength) {
      limitConcat = limitConcat + arr[i] + '&nbsp;';
      sumLength = sumLength + arr[i].length + 1;
      continue;
    } else {
      limitConcat = limitConcat + arr[i].substring(0, maxLength - sumLength);
      sumLength = maxLength;
      break;
    }
  } else {
    break;
  }
}
console.log(limitConcat);

Result:
limitConcat: 
abc &nbsp;d 222rftggdb dnn &nbsp;&nbsp;&nbsp;&nbsp;dhdhdhdhh1222 &nbsp; &nbsp; &nbsp;&nbsp;555 

limitConcat.length // 95
limitConcat.split('&nbsp;').length - 1 // 空格个数9, 由于1个空格6个字符要减去5个长度,即45个, 所以得出最后长度为50;

对于工具栏标题选中将所有元素格式化问题

原编辑器的H设置, 是对於单行处理或标题回车后处理, 如果光标在某行上, 可能会格式化所有内容, 单纯拷贝进文本框的内容会直接当作一个标签,如果只是单纯选择某行部分文本会出现内容全部格式化的问题;
A: 对于需要设置H的内容, 进行敲一个回车再处理, 因为单纯拷贝进去的文本, 鼠标点在某行也不好对该行处理,
一是他是在一个完整的标签内容中,
第二即使截断是否要对该行开始到结束字符截断, 那如何判断是行尾呢?

对于超出长度限制时富文本直接加大间距的问题

A: 考虑直接将富文本的字间行高设置为固定不变的, 例如:line-height: 1.5