針對網上的某富文本編輯的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