简单的富文本编辑器插件

来源：互联网发布：仿手机淘宝编辑：程序博客网时间：2024/05/16 06:53

一般移动端都不用什么富文本编辑器的，用户没那么多心情去编辑~

有时要做一些简单的功能，如果要嵌入常用富文本编辑器，那就太耗带宽和表情了。

比如有个需求，在微信环境下的，提交昨天时能填入文本信息，能上传图片就行。

如果懂得富文本编辑器的原理，就可以自己写一个了，任凭客户改需求……

原理

其实就是在页面插入一个iframe，然后对这个iframe的内容用js进行操作。iframe实际就是个网页，通过设置document的designMode = "on"，就可以变成可编辑状态了。

简单的封装

知道了原理，其他就没什么了~无法就是找到光标位置，然后innerHTML

根据自己的编程习惯，就可以简单写个js插件，以后可以迭代。

var WechatEditor = {browser: "noIE", //默认为标准浏览器editor: null, //iframeeditorDoc: null, //iframe的documenteditorWindow: null //iframe的window}WechatEditor.ready = function(fn) {if(document.addEventListener) {//标准浏览器  WechatEditor.browser = "noIE";document.addEventListener('DOMContentLoaded', function() {//注销事件，避免反复触发  document.removeEventListener('DOMContentLoaded', arguments.callee, false);//执行函数   fn();}, false);} else if(document.attachEvent) {//IE浏览器  WechatEditor.browser = "IE";document.attachEvent('onreadystatechange', function() {if(document.readyState == 'complete') {document.detachEvent('onreadystatechange', arguments.callee);//执行函数   fn();}});}}//创建可编辑文本框WechatEditor.createIframe = function(iframe_id) {WechatEditor.editor = document.getElementById(iframe_id);　　WechatEditor.editorDoc = WechatEditor.editor.contentWindow.document;　　WechatEditor.editorWindow = WechatEditor.editor.contentWindow;　　　　WechatEditor.editorDoc.designMode = "on";　　　　WechatEditor.editorDoc.open();var style = "<style>body{margin:0px; padding: 0px;}</style>";WechatEditor.editorDoc.write('<html><head>' + style + '</head><body id="editorBody"></body></html>');　　WechatEditor.editorDoc.close();}//获取选中的文本WechatEditor.getSelection = function() {if(WechatEditor.browser == "noIE") {//如果光标没有选中任何地方,就插入到最后边if(WechatEditor.editorWindow.getSelection().rangeCount <= 0) {WechatEditor.editorWindow.focus();}return WechatEditor.editorWindow.getSelection().getRangeAt(0);} else if(WechatEditor.browser == "IE") {return WechatEditor.editorWindow.selection.createRange();}}//替换选中的文本WechatEditor.changeSelection = function(html) {if(WechatEditor.browser == "noIE") {var range = WechatEditor.getSelection();range.deleteContents(); //删除选中文本//将文本html转换成DOM对象var temp = WechatEditor.editorDoc.createElement("DIV");　　temp.innerHTML = html + "";//获取DOM对象所有子节点var elems = [];　　for(var i = 0; i < temp.childNodes.length; i++)　　 {　　elems.push(temp.childNodes[i]);　　}for(var i = elems.length - 1; i >= 0; i--)　　 {//　　temp.removeChild(elems[i]);　　range.insertNode(elems[i]);　　}} else if(WechatEditor.browser == "IE") {return WechatEditor.editorWindow.selection.createRange();}}//获取html内容WechatEditor.html = function() {return WechatEditor.editorDoc.getElementById("editorBody").innerHTML;}

插件使用

<p>在这里编辑提交你的作业：</p><div><div><button id="bt_insertImg" type="button" class="mui-btn mui-btn-outlined">插入图片</button></div><iframe id="wechat_editor" frameborder="0" tabindex="" style="padding: 8px;margin-top: 8px;width: 100%; height: 306px;background-color: #FFFFFF;"></iframe></div><button id="bt_submitHomework" style="margin-top: 10px;" type="button">提交作业</button>

WechatEditor.ready(function(){WechatEditor.createIframe("wechat_editor");})//上传照片document.getElementById("bt_insertImg").addEventListener("tap",function(){//省略微信上传图片代码……var html = '<br /><img style="max-width:100%" src="' + data.url + '"/><br /><br />';WechatEditor.changeSelection(html);});

0 0