js原生实现富文本编辑器

今天说三点：1.怎么实现的。

　　　　　　2.怎么用。

　　　　　　3.踩到的坑。

　　在很久以前，我一直觉得富文本编辑器是一个很牛的东西，直到昨天为止，我知道了富文本编辑器的原理。

　　先放效果图，给大家瞄一眼。

　　这是一个很傻的编辑器，之所以很傻是因为只是开发玩玩而已，功能简单。

说原理。

　　首先编辑部分是一个div，div之所以能编辑是因为一个H5属性 contentEditable="true" （bool 表示元素能否编辑）;

　　有了这个属性后，元素就会变成类似textarea一样的文本域。

　　其次工具栏中的按钮是动态生成的a标签里套着img标签。img是按钮图标。

按钮功能的实现：

　　核心函数是document.execCommand(aCommandName, aShowDefaultUI, aValueArgument);

　　这个函数有三个参数，第一个参数是命令，而命令大多数的意思是在这行或被选中 的元素发生影响（粗体，斜体等）、插入新元素（添加链接）或影响整行（缩进）。

　　　　　　　　　　　　第二个参数是 是否展示用户界面，一般为 false。Mozilla 没有实现。

　　　　　　　　　　　　第三个参数是 一些命令需要一些额外的参数值（如insertimage需要提供这个image的url）。默认为null。

　　然后通过onclick赋给相应的按钮，实现相应按钮的功能。

      举个栗子：

    <a href="javascript:;" id="edit-btn"><img src="粗体.jpg" alt=""></a>
    //一个加粗的按钮
    <script>
        var btn = document.getElementById('edit-btn');
        ben.onclick = function() {
            var aa = document.execCommand("bold", false, null);
            console.log(aa);//若log输出true说明点击按钮后按钮生效；
        }
    </script>

 

　　差不多就是这样子。

　　具体命令查阅MDN : https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand#命令

 

　　编辑器效果：www.wangzhihui.cc/myedit.html (代码都在查看源码中，有详细的注释)

 2.怎么用。(估计也没人用2333)

　　直接在相应部位写html并引入相关css。js

<link rel="stylesheet" href="http://www.wangzhihui.cc/edit.css">
    <div id="myedit">
        <div id="edit-tool">
        <input id="printContent" class="edit-btn" type="button" value="发表文章">
        </div>
        <div id="editor"  value="Click to Editor..."></div>
    </div>
<script src="http://www.wangzhihui.cc/edit.js"></script>

 

　　按钮会动态创建，如果需要二次开发js、css。

　　css很简单不用说，说一下二次开发按钮功能。

var btnConfigs = "bold|null|粗体 italic|null|斜体 strikeThrough|null|删除线 formatBlock|H1|H1 formatBlock|H2|H2 formatBlock|H3|H3 formatBlock|BLOCKQUOTE|引用 formatBlock|div|结束引用 undo|null|撤销 redo|null|重做 formatBlock|img|图片".split(" ");

　　所有功能都存在btnConfigs中，如果添加功能只要在字符串中添加相应 命令|参数|提示名字  设置顺序是按钮顺序。
3.踩到的坑
　　最重要的一点就是失去选中问题。刚开始自动生成按钮的时候按钮使用ul>li做的，但是选中文字之后点击li会失去焦点。还好身边有学长教了一下，点击锚点链接，或者图片就不会失去焦点，所以将li改成了a标签
　　然后就是未能完成的图片功能，上传图片过程是先用获取图片，然后将文件上传储存到服务器，返回服务器的图片位置，将位置src赋值给execCommand的第三个参数。但是实现不了。
　　刚开始想用图片预览方式，试一试能否在网页中实现预览。
　　然而预览功能的实现的过程是，input获取文件，然后get到这个文件的files，然后再创建一个文件对象，通过文件对象的方法readAsDataURL（），将文件base64编译成dataUrl，再内嵌到网页中。但是execCommand第三个参数并不能传dataURL
　　所以没有实现图片预览。

/*图片预览*/
function readAsDataURL(){  
    var file = document.getElementById("file1").files;
    var result=document.getElementById("result");  
    for(i = 0; i< file.length; i ++) {
        var reader  = new FileReader();    
        reader.readAsDataURL(file[i]);  
        reader.onload=function(e){  
              console.log(this);
              result.innerHTML = '<img src="' + this.result +'" alt="" />' + '<br />';  
          }        
       }
}

---

其实一个富文本编辑器实现起来挺简单的，但是更多的则是对用户的体验方面，如何让编辑器用着更爽。还有一些功能也不是execCommonds命令能解决的。一些编辑器的功能还是很牛的。
就这样。

下一个准备实现音乐播放器。

加油，你是最胖的！

ylwxhn