初试富文本编辑器

都说富文本编辑器是天坑，我也去坑边看一眼

为什么都说富文本编辑器是天坑？。早就听说过富文本编辑器，一般看到这种标题都会让人有一种想去试试的冲动，至少也要去溜达一圈，就像地牢围攻1的绝望洞一样。于是我去MDN上找了找教程。原来现成的代码都有。

要尝试点什么?

1. MDN的代码，无法实现光标位置变化之后，读取光标处的文本格式，并改变样式按钮状态的功能。比如word里面，光标处的文本是加粗的话，工具栏的加粗按钮就变成按下状态，离开这段区域之后又会变成未按下状态。要实现这个功能，基本思路就是利用点击和键盘事件加上queryCommandState，大致代码如下：

   var editor = document.getElementById('editor');
   editor.addEventListener('keyup', function() {
   statusCheck(buttons);
   });
   editor.addEventListener('mouseup', function() {
   statusCheck(buttons);
   });

   function statusCheck(buttons) {
   commands.forEach(function(command) {
   var state = document.queryCommandState(command.cmd);
   var className = buttons[command.cmd].className;
   if (state) {
   buttons[command.cmd].className = addClass(className, 'on');
   } else {
   buttons[command.cmd].className = removeClass(className, 'on');
   }
   });
   }

2. 无法取得选中区域的文字。因为getSelection只返回选择的起始和结束的DOM元素及信息，如果想要取得所选文件，必须自己去遍历选中的DOM节点，取出其中的text节点。大致代码实现如下：

   function getSelectedText() {
   var selection = getSelection();

     // 取得开始的文字
     var anchorNode = selection.anchorNode;
     var anchorOffset = selection.anchorOffset;
     var focusNode = selection.focusNode;
     var focusOffset = selection.focusOffset;
   
     // 判断选择的方向
     var isForward = isNodeBefore(anchorNode, focusNode);
     var startNode;
     var endNode;
     var startOffset;
     var endOffset;
     if (isForward) {
         startNode = anchorNode;
         endNode = focusNode;
         startOffset = anchorOffset;
         endOffset = focusOffset;
     } else {
         startNode = focusNode;
         endNode = anchorNode;
         startOffset = focusOffset;
         endOffset = anchorOffset;
     }
   
     var text1 = '';
     if (startNode !== null) {
         var startText = startNode.data;
         text1 = startText.substring(startOffset);
     }
   
     // 取得结束的文字
   
     var text2 = '';
     if (endNode !== null) {
         var endText = endNode.data;
         text2 = endText.substring(0, endOffset);
     }
   
   
   
     //取得中间的文字
     var middleText = '';
     if (startNode !== null && endNode !== null) {
         middleText = getMiddleText(startNode, endNode);
     }
   
     return text1 + middleText + text2;

   }

   function getMiddleText(startNode, endNode) {
   if (startNode === null && endNode === null) {
   return;
   }

     var pivot = startNode;
     var middleText = '';
     var text;
     while(pivot !== endNode) {
         text = '';
         if (pivot.nextSibling === null) {
             if (pivot.parentNode === null) {
                 break;
             } else {
                 pivot = pivot.parentNode;
             }
         } else {
             pivot = pivot.nextSibling;
             text = traversal(pivot);
         }
         middleText += text;
     }
   
     return middleText;
   
     // 遍历节点选择文字
     function traversal(root) {
         if (pivot === endNode) {
             return '';
         }
         if (root.nodeType === 3) {
             return root.nodeValue;
         } else {
             var text = '';
             var childNodes = root.childNodes;
             for (var i = 0; i < childNodes.length; i++) {
                 if (childNodes[i] === endNode) {
                     pivot = endNode;
                     break;
                 }
                 text += traversal(childNodes[i]);
             }
             return text;
         }
     }

   }

   function isNodeBefore(startNode, endNode) {
   var startParents = getParents(startNode), endParents = getParents(endNode);
   var count = Math.min(startParents.length, endParents.length);
   var commonParent, startParent, endParent;
   for (var i = 0; i < count; i++) {
   startParent = startParents[startParents.length - i - 1];
   endParent = endParents[endParents.length - i - 1];
   if (startParent === endParent) {
   commonParent = startParent;
   } else {
   var startPos = convertToArray(commonParent.childNodes).indexOf(startParent);
   var endPos = convertToArray(commonParent.childNodes).indexOf(endParent);
   return startPos < endPos;
   }
   }
   return true;
   }

难得能用上一点点数据结构的知识

完整代码

尽管惨不忍睹，我还是献丑放上来。不被婊怎么进步，虽然我觉得也不会有人觉得值得花功夫婊。(以后再也不贴大段代码了，调格式好累。这次就当充数了。结果调格式的过程中自己给自己增加了点击量)

转载于:https://www.cnblogs.com/linden5/p/7580642.html