web端实现富文本编辑器

  第一次查询这个问题时 是在开发一个小程序，想在小程序中实现一个类似简书的富文本编辑器。查了许多资料、问了许多人 最终都没能解决，只能做一个不算方便的编辑器

小程序文本编辑器

  这个编辑器也可以编辑文章 但是和正真的富文本编辑器还是有很大的差距，但由于小程序的限制又没有很好的解决方案。所以我开始向着网页端寻找

  网页端有不少的富文本编辑器插件 比如百度的UMeditor  及轻量化的Squire 功能都挺好用的 

百度UMeditor Squire

接下来 说说原生js+css+html富文本编辑器的实现吧！

实现的方式有两种 一种是在iframe中实现 一种实在div中实现 个人感觉div中实现的要好一些

说说div中编辑器的实现吧 略略略

编辑器的实现主要时依赖元素的contenteditable属性 将元素变为可编辑状态 这样状态下的元素就像一个textarea 

---

不多说 先上git地址

https://github.com/Jy9/textRedact

这个demo只是实现了一个比较简单的文本编辑 

主要使用execCommand 的一些命令 来实现各种功能

首先添加一个div 将div contenteditable属性设置为true

<div contenteditable='true' data-text='在这里输入文本'></div>

data-text 是为了实现类似texteara中placeholder的效果配合css中

[contentEditable=true]:empty:not(:focus):before { content: attr(data-text); color: #eee; }

设置完成后就开始写js的代码 利用execCommand 改变输入时的状态

比如 加粗

document.execCommand("bold", false, null);

斜体

document.execCommand('italic',true,null)

...

然后再改变输入状态的同时 改变按钮的状态 方便随时知道开启的状态有哪些

$("#Strik").click(function() {

    //加粗

    document.execCommand("bold", false, null);        //设置字体的加粗状态

    if($("#Strik>img").attr("src") == "./icon/加粗.png"){        //更改加粗图标状态

        $("#Strik>img").attr("src","./icon/加粗@.png")

    }else{

        $("#Strik>img").attr("src","./icon/加粗.png")

    }

    $("#import").focus();          //在更改完状态后记得让光标保持在输入框内

});

这样一个简单的加粗功能就可以用了

功能有了 但是万一因为人为改变光标的位置了 怎么去监控现有的状态呢？

这里我用了getSelection().getRangeAt(0).endContainer.parentElement 获取到光标所在的元素

代码。。。。

$("#import").click(function(e){ // 设置最后光标对象

    var dom = $(getSelection().getRangeAt(0).endContainer.parentElement); //在点击输入框时获取光标所在的元素 并转换为jq对象

    clearStyle();    //将所有按钮的状态恢复到原始状态

    getStyle(dom)    //获取现在使用的状态 并将按钮状态矫正

})

在getStyle()中 利用递归 将所有状态找出来 并设置

function getStyle(dom){ 

    var tagName = dom.prop("tagName");

    if(tagName != "DIV"){ if(tagName=="I"){

        $("#Italic>img").attr("src","./icon/斜体@.png")

    }else if(tagName=="B"){

        $("#Strik>img").attr("src","./icon/加粗@.png")

    }else if(tagName=="U"){

        $("#Underline>img").attr("src","./icon/下划线@.png")

    }else if(tagName=="STRIKE"){

        $("#StrikeThrough>img").attr("src","./icon/删除线@.png")

    }

    getStyle(dom.parent());

    }

}

一个简单的所见即所得的富文本编辑就这样华丽丽的完成了  虽然有些简陋

另外 我在这个demo的添加图片时 用到了我的另一个插件 imageUpload 这个插件将input选择的图片转换成了file 和 base64 两种格式 方便上传及本地显示 

git : https://github.com/Jy9/imageUpload