第一次查询这个问题时 是在开发一个小程序，想在小程序中实现一个类似的富文本编辑器。查了许多资料、问了许多人 最终都没能解决，只能做一个不算方便的编辑器
这个编辑器也可以编辑文章 但是和正真的富文本编辑器还是有很大的差距，但由于小程序的限制又没有很好的解决方案。所以我开始向着网页端寻找
网页端有不少的富文本编辑器插件 比如百度的UMeditor 及轻量化的Squire 功能都挺好用的
接下来 说说原生js+css+html富文本编辑器的实现吧！
实现的方式有两种 一种是在iframe中实现 一种实在div中实现 个人感觉div中实现的要好一些
说说div中编辑器的实现吧 略略略
编辑器的实现主要时依赖元素的contenteditable属性 将元素变为可编辑状态 这样状态下的元素就像一个textarea
不多说 先上git地址
https://github.com/Jy9/textRedact
这个demo只是实现了一个比较简单的文本编辑
主要使用execCommand 的一些命令 来实现各种功能
首先添加一个div 将div contenteditable属性设置为true
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
