H5富文本编辑器原理解析：

核心属性：

    1、contentEditable="true"; //属性规定是否可编辑元素的内容

  2、window.document.designMode = "On";//让整个页面都可以编辑，通常会把要编辑的文档放在一个<iframe>元素中，而这个元素就充当了一个超级的编辑框.

3、iframeWindow.document.execCommand(sCommand,false,value);

当一个HTML文档切换到设计模式 designMode时，文档对象暴露 execCommand方法，该方法允许运行命令来操纵可编辑区域的内容。

   大多数命令影响文档的选择（粗体，斜体等），而其他命令插入新元素（添加链接）或影响整行（缩进）。当使用contentEditable时，调用

execCommand() 将影响当前活动的可编辑元素

我使用的是闭包 的方式实现的一个简易的富文本编辑器  组件。只对外开放一个全局变量 editorIframe 避免内部变量被污染。

var editorIframe=(function(){function extend(target, source) {for (var objin source) {target[obj] = source[obj];}return target;}function addEvent(element,eventName,fn){(element.attachEvent)? (element.attachEvent('on' + eventName,fn)): (element.addEventListener(eventName,fn,false));}function removeEvent(element,eventName,fn){(element.detachEvent)? (element.detachEvent('on' + eventName, fn)): (element.removeEventListener(eventName,fn,false));}
function editorIframe(options){var defaultoptions={operate:{'backColor':'red','bold':'true','copy':'','delete':'true','italic':'true','underline':'',},//*.....操作功能
        //editBox:1,
        iframeElementStyle:"width:400px;height:300px;border:1px solid #999",//编辑器样式
        buttonElementStyle:"",//按钮样式
        iframeSrc:"about:blank", //iframe 链接
        placeholder:"请输入",//placeholder
        parentContainer:document.body,//父容器
    };this.options=extend(defaultoptions,options)||{};this.render();
}
editorIframe.prototype={render:function(){//渲染页面
        var _this=this;// 编辑框渲染
        var iframeElement= document.createElement('iframe');iframeElement.setAttribute("id","iframe1");iframeElement.style.cssText = this.options.iframeElementStyle;iframeElement.src = this.options.iframeSrc;addEvent(iframeElement,'load',function(){removeEvent(iframeElement,'load',arguments.callee);var iframeWindow= iframeElement.contentWindow;iframeWindow.document.open();iframeWindow.document.writeln('<p><span>'+_this.options.placeholder+'</span></p>');iframeWindow.document.close();(iframeWindow.document.designMode)?(iframeWindow.document.designMode = 'On'):(iframeWindow.document.body.contentEditable = true);//按钮渲染
            var sCommands=_this.options.operate;var divElement= document.createElement('div');for (var iin sCommands){var buttonElement= document.createElement('button');buttonElement.style.cssText = _this.options.buttonElementStyle;buttonElement.onclick = (function(sCommand,value){return function(){(function(sCommand,value){try{var returnValue= iframeWindow.document.execCommand(sCommand,false,value);}catch(e){}})(sCommand,value);};})(i,sCommands[i]);buttonElement.appendChild(document.createTextNode(i));divElement.appendChild(buttonElement);}var firstEl=_this.options.parentContainer.firstChild;//得到页面的第一个元素
            _this.options.parentContainer.insertBefore(divElement,firstEl);});_this.options.parentContainer.appendChild(iframeElement);},value:function(str){var iframeElement= document.querySelector('#iframe1');if(!str){return iframeElement.contentDocument.body.innerHTML;}else{iframeElement.contentDocument.body.innerHTML=str;}}
};return editorIframe;
})();

调用方法也很简单：

var defaultoptions={operate:{'bold':'true','copy':'','delete':'true','italic':'true','underline':''
    },//*.....操作功能
    //editBox:1,
    iframeElementStyle:"width:400px;height:300px;border:1px solid #999;margin:12px 0",//编辑器样式
    buttonElementStyle:"",iframeSrc:"about:blank", //iframe 链接
    placeholder:"placeholder",//placeholder
    parentContainer:document.querySelector("#container")//父容器
};
var edit=new editorIframe(defaultoptions);
edit.value("这是我写的第一个富文本编辑器");//赋值方法与jquery类似 传值为赋值 反之为获取

***更多属性请参照

document.execCommand 属性

原生手写富文本编辑器组件相关推荐

微信小程序富文本编辑器组件 editor
微信小程序富文本编辑器组件 editor <view class="container"><view class="titlebox"> ...
自己写富文本编辑器jss_JSS选择器和语法规则
自己写富文本编辑器jss JSS is a JavaScript library that allows you to create objects that follow a CSS-like sy ...
tui-editor富文本编辑器组件
tui-editor富文本编辑器记录项目中使用富文本编辑器安装 npm init & npm install --save tui-editor 创建组件文档 tuieditor 在 de ...
小程序editor 富文本编辑器组件
效果: 关于editor 富文本编辑器组件复制到组件common 里面.json 引用即可链接:https://pan.baidu.com/s/1_QIp28IOVuyVFfKfFZwxKQ 提取 ...
vue中使用kindeditor编辑器_vue富文本编辑器组件vue-quill-edit使用教程
这篇文章主要为大家详细介绍了vue富文本编辑器组件vue-quill-edit使用教程,具有一定的参考价值,可以用来参考一下. 感兴趣的小伙伴,下面一起跟随512笔记的小编两巴掌来看看吧! 之前使用的 ...
使用微信小程序富文本编辑器组件 editor
先看下官方文档 https://developers.weixin.qq.com/miniprogram/dev/component/editor.html 富文本组件文档文档上的代码比较少建议在开 ...
uniapp微信小程序富文本编辑器组件
前言最近需要实现一个微信小程序的富文本编辑器,由于使用的是uniapp框架开发的小程序,因此就改造了一下微信小程序官方案例,并封装成了一个组件. uniapp-editor gitee仓库实现效果 ...
小程序富文本编辑器组件
效果图只是功能的一部分话不多说,先上代码 html部分: <page-container show="{{showPage}}" z-index="999999 ...
Vue2 封装的 Quill 富文本编辑器组件 Vue-Quill-Editor
1.安装 npm install vue-quill-editor --save 2.使用 import { quillEditor } from 'vue-quill-editor' 3.组件中 & ...

原生手写富文本编辑器组件

document.execCommand 属性

原生手写富文本编辑器组件相关推荐

最新文章

热门文章