富文本编辑器&FileReader

最近在做一个web版的管理Tool，其中包括一个编辑框，要求能够编辑文字，插入图片，最后导出做成一个Html。对于资深人士看来，这很容易啊，不就是一个富文本编辑框吗?这其实就是一个概念的问题，对有经验的人来说，脑子里面有了概念，就能一下子抓到点上，快速地进行分析。但是对于我来说就没有富文本编辑框的概念，加之由于公司内有做网页的比较少，能够求教的人不多，因此我只好一步一步慢慢研究，总之走了很多弯路。其中一些硌人的障碍就不说了。下面我就简短地总结一下有关经验吧。


一.编辑框

大多数富文本编辑框都是用iFrame做的。只要我们将designMode属性设置成"on"，则个iframe就具备了编辑功能。

先写一个简单的框架：

<html>
<head>
</head>
<body>
    <textarea></textarea>
    <iframe id="iframe"></iframe>
　　<sprint>
          createIframe:function(id){
              $ = this= document.getElementById("id");
              var doc =  $.contentDocument ||$.contentWindow.document; 
              doc.designMode = 'on';
              doc.open();
              doc.write('<html><head><style>body{ margin:3px; word-wrap:break-word; word-break: break-all; }</style></head><body>GoodNessEditor</body></html>');
              $.contentWindow.focus();
              doc.close();
          }
　　　　　　windown.onload = functon(){
              refurn new createIframe("iframe");
          }
    </sprint>
</body>
</html>

 从上面代码我们可以得知，iframe的使用需要进行以下几个步骤：

1.要获取iframe的document文档。

var doc =  $.contentDocument ||$.contentWindow.document;

2.将文档设成设计模式。即：将designMode属性设置成"on"。

3.打开文档（open）,写入默认的document，关闭文档（close）。

  --当然也可以直接指定iframe的src来设定iframe的内容。

ifram.src = "www.baidu.com";

二.工具栏

如果iframe是存放document的一个容器，那我会很好奇如何通过命令让容器里的document实现靠左、靠右、剪切、加粗、插入图片。这时就会用到execCommand命令。

一般execCommand都带有一下三个参数：

execCommand（String aCommandName, Boolean aShowDefaultUI, String aValueArgument）

aCommandName  指令名称

aShowDefaultUI    是否使用默认UI

aValueArgument   具体命令（如是插入图片则输入url，如果插入文字则输入字符串）

    因为我这次所做的编辑器非常简单，只用到了图片插入以及插入文字。所以只使用到两种命令：

图片插入
execCommand("insertimage",falser,url);
字符串插入
execCommand("InsertInputText ",falser,text);

知道这两种命令，接下来似乎就比较简单了。只要取到相应的图片URL以及要插入的字符串，就可以执行命令。

但素，我是说但素，这两年程序员坐下来，我早已知道扣代码这种事，从来就没有能够让人省心的事。坑爹处处有啊你说是不是。

在执行这两个命令之前，我们需要做两件事：

1.获取本地图片URL

2.获取本地文本中的字符串

三、FileReader读取本地资源

读取图片

我也翻找过不少网上使用较多的富文本编辑器，在导入图片这一项上，基本都是使用网络资源，而不是只用本地资源。如果要使用本地资源，读取本地图片的URL，因此就涉及到Html5的FileReader。

首先，我们需要使用fileupload来选择图片：

<input type="file" onchange="fileSelect(this.files)" />

<script>
    function fileSelect(files)(){
       var file = files[0],//因为可以选择多个文件，所以我们只需选取头一件即可
             url;

       //判断文件是否存在
       if(file){
           if(file.tyoe.indexOf("image") < 0 ){
                //判断是否为图片
                alert("Please input image!");
                return ;
           }
           if (window.webkitURL.createObjectURL) {
　　          //Chrome8+
　　          src = window.webkitURL.createObjectURL(file);
　         } else{//IE8+
              var reader = new FileReader();
              reader.onload = function(){
                  url = e.target.result;
              }
             reader.readAsDataURL(file);
           }
       }
    }
</script>

上面我们用到了两种图片读取方法。

一种是Html5原生的FileReader。但是这种方法是将图片读取成一个超长的二进制文件，如果图片过大，所生成的二进制文件也更大，对浏览器是一个承重的负担，因此不大建议使用。

当然FileReader不只有一个方法，它有以下几个方法：

readAsBinaryString（file）   将文件读取为二进制码

readAsText（file，encode） 将文件读取为字符串

readAsDataURL（file）        将文件读取为DataURL

FileReader事件

onabort              ---------数据读取中断时触发
onerror              ---------数据读取出错时触发
onloadstart          --------数据读取开始时触发
onprocess            --------数据读取中
onload               --------数据读取成功完成时触发
onloadend            --------数据读取完成时触发，无论成功失败

FileReader属性

filereader.result        ---------读取结果

filereader.readystate    ---------读取状态（empty loading down）

另一种读取方法是Chrome和safari为代表的webkit浏览器所拥有的图片文件读取方式：window.webkitURL.createObjectURL(file).

 --通过这种方法，将得到一个已编码过的相对路径，相比而言，体积大大减少。

读取到本地图片的URL后，我么就可以用execCommand指令将图片读入iframe中。

<script>
    .......前略
    url = window.webkitURL.createObjectURL(file)；
    var iframe = document.getElementById("iframe");
    var doc = iframe.contentDocument ||iframe.contentWindow.document;
    doc.execCommand("insertimage",false,url);
    iframe.contentWindow.focus();
</script>

读取本地文本文件

同样我们也可以用readerAsText来读取本地文件

<script>
   function readText(files){
      var file = files[0];
      if (file) {
        
        var reader = new FileReader();
        var textResult;

        reader.onloadend = function (e) {
            textResult = e.target.result;
        }
        reader.readAsText(file, 'utf-8');
    }
   }

</script>

本地文本字符串后，就可以用execCommand指令将字符串读入iframe中..................

<script>
 .....前略
    doc.execCommand("insertinputtext",false,text);
    doc.designMode = "off";
    iframe.contentWindow.focus();
</script>

如果你是这么想的，那你就太天真了！！！！！！！！！！！

我测试了一下如果用execCommand("insertinputtext",false,text)指令，就可能回出现无法将读取的字符串插入iframe的情况，而且几率极高，插好多回都不一定能成功一次。后来想了一下，有可能是这个指令需要遍历iframe中所有的节点，然后再body的最后一个节点插入字符串。这就导致该指令的执行效率非常之低。很坑爹是不是！！！！所以与其遍历所有节点，不如直接将字符串插入想要的节点中去。于是我就用到了以下方法。

<script>
  .......前略
  doc.getElementByTagName('body')[0].innerText = text;
</script>

如此一来，代码的执行效率就提高了。

四、保存HTML文件

这样一来，一个简单的富文本编辑器就算完成了，如果想增加其它功能，就请查找具体的execCommand命令。

但是，我还想再增加一个特殊的功能，就是将iframe的document文件保存到本地。

想当然的，肯定也会想到使用execCommand指令中的"saveAs"指令。

但是很遗憾的告诉你，在一些比如chrome,FF上，saveAs指令是无效的。即便你使用它，也无法按照你的想象般弹出文件选择框出来。当然像IE之类的浏览器就不在我们的讨论范围之内了。

我调查了一下为什么chrome无法使用saveAs指令的原因，是因为chrome为了提高浏览器的安全性，而禁止用JS将页面的文件保存到本地。

那么，既然用不了浏览器自身的API，那就只好另寻它径了。我不能保存，但我总能下载吧。

首先可以讲iframe的内容取出来。

<script>
    var iframe = document.getElementById('RTE_iframe');
    var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
    var bodyHtml = "\n<body>" + iframeDocument.body.innerHTML + "</body>\n";
    var headHtml = "<head>" + iframeDocument.head.innerHTML + "</head>\n";
    var htmlFile = "<html>\n" + headHtml + bodyHtml + "</html>";
</script>

之后就是要将这些东西下载到本地。

<script>
  var BlobBuilder = BlobBuilder || WebKitBlobBuilder || MozBlobBuilder;
  var URL = URL || webkitURL || window;
  function saveAs(blob, filename) {
        var type = blob.type;
        var force_saveable_type = 'application/octet-stream';
        if (type && type != force_saveable_type) { // 强制下载，而非在浏览器中打开
            var slice = blob.slice || blob.webkitSlice || blob.mozSlice;
            blob = slice.call(blob, 0, blob.size, force_saveable_type);
        }

        var url = URL.createObjectURL(blob);
        var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
        save_link.href = url;
        save_link.download = filename;

        var event = document.createEvent('MouseEvents');
        event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
        save_link.dispatchEvent(event);
        URL.revokeObjectURL(url);
    }

    var bb = new BlobBuilder;
    bb.append(htmlFile);
    saveAs(bb.getBlob('text/plain;charset=utf-8'), "test.html");
</script>

这样，就能够将iframe中的内容保存到本地了。

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/nonkicat/p/2517335.html