ueditor源代码重点难点分析 - HelloWorld开发者社区

网上好像几乎没有研究ueditor源码的文章，原因可能是ueditor源码太复杂了，接近浏览器代码和word/excel源码。本文分析ueditor源码整体流程逻辑以及重点难点细节。

首先，编辑器是如何实现输入的？本人开始始终不得其解，在源码找不到输入事件绑定的处理函数，后来在白云峰同学的提醒下才顿悟，整个iframe网页就相当于是一个元素：</p> <body class="view" contenteditable="true" spellcheck="false" style="overflow-y: hidden; height: 500px; cursor: text;"> </body> <p>页面调用ueditor： </p> <script id="editor" type="text/plain" style="width:100%;height:500px;" ></script> // iframe的container元素 <p>　　var editor = UE.getEditor('editor');</p> <p>多次调用可以多实例运行，每个实例都是单独的，编辑器实例保存在UE实例中，从UE.instants[]也可以获取到每个编辑器实例，0就是第一个实例，以此类推，<br>因此可以不用变量引用编辑器实例：<br>UE.getEditor('editor');<br>　　setTimeout(function(){<br>　　　　UE.instants.ueditorInstant0.setContent('<div>欢迎使用编辑器</div>');<br>　　},1000);</p> <p>执行ueditor文件之后产生三个全局对象：<br>UEDITORUI - 所有工具按钮插件的api<br>UE - api入口<br>UEDITOR_CONFIG - 配置数据</p> <p>先看ueditor的全局api接口：</p> <p>window.UE = baidu.editor = window.UE || {}; // UE实例提供ueditor的入口接口，也就是api入口，调用UE的方法才创建真正的编辑器实例 </p> <p>var Editor = UE.Editor = function (options) { // 这是编辑器构造函数</p> <p>/* 尝试异步加载后台配置 */<br>me.loadServerConfig(); //所谓异步加载就是用js构造<tag src=url加载文件，正常是直接在网页写<tag src=url 加载文件<br>UE.Editor.prototype.loadServerConfig = function(){<br>//用ajax请求<a href="https://www.helloworld.net/redirect?target=http://localhost/plugins/ueditor/ueditor/php/controller.php?action=config&&noCache=1525847581688，返回后台php配置参数，主要是涉及upload的配置参数，其实前端的配置数据可以直接写一个js文件直接从网页写" rel="nofollow noopener noreferrer" target="_blank">http://localhost/plugins/ueditor/ueditor/php/controller.php?action=config&&noCache=1525847581688，返回后台php配置参数，主要是涉及upload的配置参数，其实前端的配置数据可以直接写一个js文件直接从网页写</a><script src=加载。<br>　　element.onload = element.onreadystatechange = function () { // 这是构造<tag src=url加载文件之后再通过onload事件触发执行一个回调<br>}<br>} </p> <p>if(!utils.isEmptyObject(UE.I18N)){ // i18n是语言国际化，就是多语言包<br>//修改默认的语言类型<br>　　me.options.lang = checkCurLang(UE.I18N);<br>　　UE.plugin.load(me);<br>　　langReadied(me);<br>}else{<br>　　utils.loadFile(document, {<br>　　src: me.options.langPath + me.options.lang + "/" + me.options.lang + ".js", //加载zh-cn.js中英文对照语言包<br>}, function () { // 这个匿名函数回调会执行一次，具体是在哪一次加载文件时执行的不清楚<br>　　UE.plugin.load(me); // 这是加载内部插件，执行ueditor文件时会执行UE.plugin.register()注册所有的插件，然后在这里加载所有的插件<br>　　UE.plugin = function(){<br>　　　　var _plugins = {};<br>　　　　return {<br>　　　　　　register : function(pluginName,fn,oldOptionName,afterDisabled){<br>　　　　　　　　_plugins[pluginName] = {<br>　　　　　　　　optionName : oldOptionName || pluginName,<br>　　　　　　　　execFn : fn,<br>//当插件被禁用时执行<br>　　　　　　　　afterDisabled : afterDisabled<br>　　　　　　　　}<br>　　　　　　},<br>　　　　load : function(editor){ // 这就是load()函数，加载插件，所有的插件在执行ueditor文件时已经注册<br>　　　　　　utils.each(_plugins,function(plugin){ //_plugins是执行register方法产生的插件集合<br>　　　　　　　　var _export = plugin.execFn.call(editor); //execFn是plugin的构造函数，执行构造函数产生plugin object {}<br>　　　　　　　　utils.each(_export,function(v,k){ // 针对plugin的每一个属性处理一次，把plugin的方法函数保存到编辑器实例中<br>　　　　　　　　　　switch(k.toLowerCase()){<br>　　　　　　　　　　　　case 'commands':<br>　　　　　　　　　　　　　　utils.each(v,function(execFn,execName){<br>　　　　　　　　　　　　　　　　editor.commands[execName] = execFn //editor.commands{}含所有的按钮操作指令<br>　　　　　　　　　　　　　　});<br>　　　　　　　　　　});<br>　　　　　　　　　　utils.each(UE.plugins,function(plugin){ // 插件好像分两部分有两种写法，这是针对旧写法插件进行处理<br>　　　　　　　　　　　　plugin.call(editor); //执行插件构造函数<br>　　　　　　　　　　}); </p> <p>　　　　　　langReadied(me);<br>　　　　});<br>　　　　　　//loadFile代码：<br>　　　　　　return function (doc, obj, fn) { // fn就是传入的匿名函数，用<script src=url加载执行js文件之后再执行这个回调函数<br>　　　　　　　　doc.getElementsByTagName("head")[0].appendChild(element); // 构造<script src=加载执行zh-cn.js文件<br>　　　　　　}<br>　　}<br>　　UE.instants['ueditorInstant' + me.uid] = me; // 如果多实例运行，均存储在UE中，每个实例按id区分，多实例运行可以利用UE.instants[id]找实例，把每个编辑器实例保存在自己定义的全局对象中也可以<br>}</p> <p>Editor.prototype = {<br>　　render: function (container) { // container是iframe holder，之前已经构造iframe相关的几个div插入网页，render方法构造iframe代码并且把iframe插入网页生效<br>　　　　var me = this,<br>　　　　options = me.options, // options是实例里面的参数，包含config参数<br>　　　　var html = 'iframe里面的html代码';<br>　　　　container.appendChild(domUtils.createElement(document, 'iframe', { // 插入iframe，并执行以下js代码<br>　　　　　　editor = window.parent.UE.instants['ueditorInstant0']; // ueditor实例保存在iframe的父窗口也就是当前网页窗口<br>　　　　　　editor._setup(document);<br>　　　　}));<br>　　},<br>　　_setup: function (doc) {<br>　　　　doc.body.contentEditable = true; // iframe html相当于一个input<br>　　}<br>} </p> <p>先建立一个UE实例放在全局，入口初始化方法是getEditor。</p> <p>再看编辑器初始化入口：</p> <p>UE.getEditor = function (id, opt) {<br>　　var editor = instances[id];<br>　　if (!editor) {<br>　　　　editor = instances[id] = new UE.ui.Editor(opt); // UE是api入口实例，editor是编辑器实例<br>　　　　editor.render(id); //执行新的render，构造几个/几层container元素，再执行old render，构造iframe代码插入网页<br>　　}<br>　　return editor;<br>}; </p> <p>UE.ui.Editor = function (options) {<br>　　var editor = new UE.Editor(options); // 这是真正的编辑器实例<br>　　var oldRender = editor.render; // UE.editor的render方法(构造iframe插入网页)<br>　　editor.render = function (holder) { // 重新构造一个render，构造几个容器元素，然后再调old render构造iframe<br>　　　　utils.domReady(function () { //事件触发异步调度执行<br>　　　　　　editor.langIsReady ? renderUI() : editor.addListener("langReady", renderUI);<br>　　　　　　　　function renderUI() { //事件触发异步调度执行<br>　　　　　　　　　　new EditorUI(editor.options); // 没有接收实例，在其它程序位置不能引用这个实例，在实例的方法中用this引用实例，在事件handler中引用实例(实例“复制”到handler方法中)，这是创建实例后如何使用实例的高级方法<br>　　　　　　　　　　　　function EditorUI(options) {<br>　　　　　　　　　　　　　　this.initOptions(options);<br>　　　　　　　　　　　　　　　　UIBase.prototype = {<br>　　　　　　　　　　　　　　　　　　initOptions:function (options) {<br>　　　　　　　　　　　　　　　　　　//把options复制到EditorUI实例中<br>　　　　　　　　　　　　　　　　　　}<br>　　　　　　　　　　　　　　this.initEditorUI();<br>　　　　　　　　　　　　　　　　EditorUI.prototype = {<br>　　　　　　　　　　　　　　　　　　initEditorUI:function () {<br>　　　　　　　　　　　　　　　　　　　　//用addeventlistener绑定鼠标操作事件和处理函数<br>　　　　　　　　　　　　　　　　　　}<br>　　　　　　　　　　　　　　　　}<br>　　　　　　　　　　var newDiv = document.createElement('div'); //在这里创建div插入网页替换<script>元素，并且复制css代码<br>　　　　　　　　　　holder.parentNode.insertBefore(newDiv, holder);<br>　　　　　　　　　　newDiv.style.cssText = holder.style.cssText;<br>　　　　　　　　　　holder = newDiv;<br>　　　　　　　　　　holder.innerHTML = 'xxx';<br>　　　　　　　　　　editor.ui.render(holder); //重新构造iframe外层html代码以及iframe元素代码，render方法代码如下：<br>　　　　　　　　　　　　UIBase.prototype = {<br>　　　　　　　　　　　　　　render:function (holder) {<br>　　　　　　　　　　　　} </p> <p>　　　　　　　　　　opt.initialFrameHeight = opt.minFrameHeight = holder.offset; //是在这里设置跟随页面写的height<br>　　　　　　　　　　oldRender.call(editor, editor.ui.getDom('iframeholder')); //再执行oldrender，构造iframe插入网页<br>　　　　　　　　　　editor.fireEvent("afteruiready"); // 没有on这个事件的，有何用？<br>　　　　　　　　});<br>　　　　　　};<br>　　　　　　return editor; //如果没有返回语句，产生的实例是new UE.ui.Editor(opt)实例，由于有返回语句，产生的实例是返回的实例new UE.Editor(options)实例<br>　　}</p> <p>执行ueditor文件时注册所有的插件，执行UE.getEditor()产生new UE.Editor(options)编辑器实例，初始化编辑器，加载插件，绑定鼠标操作事件handler，构造div和iframe。<br>ueditor的功能组件以plugin插件形式设计，插件代码是ueditor最主要的功能代码，其功能和复杂程度类似word/excel。</p> <p>ueditor就是一个textarea框，输入文字内容，自动产生html元素，插入图片产生img元素，最终产生的数据是html代码串，提交到后台保存到数据库。</p> <p>正常显示时是显示iframe里面的html网页，预览html代码时，是显示一个与iframe平级的div，隐藏iframe元素节点不显示： </p> <div class="CodeMirror-scroll cm-s-default" tabindex="-1" style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;"> <p>插入html代码时，先构造一个div，然后用div.innerHTML=插入的html字符串解析html字符串成为DOM元素对象，再把div.firstChild插入到网页中一个<p>元素里面<br>生效，比如插入<div>hello</div>，显示hello，不会把<div>显示出来。</p> <p>再看结束编辑获取编辑器内容的代码：</p> <p>getContent: function (cmd, fn,notSetCursor,ignoreBlank,formatter) {<br>　　var root = UE.htmlparser(me.body.innerHTML,ignoreBlank); // html -> root -> html 解析处理过程非常复杂<br>　　return root.toHtml(formatter); </p> <p>　　　　var htmlparser = UE.htmlparser = function (htmlstr,ignoreBlank) { </p> <p>　　　　　　var re_tag = /<(?:(?:\/([^>]+)>)|(?:!--([\S|\s]*?)-->)|(?:([^\s\/<>]+)\s*((?:(?:"[^"]*")|(?:'[^']*')|[^"'<>])*)\/?>))/g, //html标签的正则匹配表达式，比如<TD vAlign=top background=../AAA.JPG> </p> <p>　　　　　　htmlstr = htmlstr.replace(new RegExp('[\\r\\t\\n'+(ignoreBlank?'':' ')+']*<\/?(\\w+)\\s*(?:[^>]*)>[\\r\\t\\n'+(ignoreBlank?'':' ')+']*','g'), function(a,b){ // 正则匹配替换 </p> <p>　　　　　　toHtml:function (formatter) {<br>　　　　　　　　var arr = [];<br>　　　　　　　　nodeToHtml(this, arr, formatter, 0); </p> <p>　　　　　　　　　　function nodeToHtml(node, arr, formatter, current) {<br>　　　　　　　　　　　　switch (node.type) {<br>　　　　　　　　　　　　　　case 'root':<br>　　　　　　　　　　　　　　　　for (var i = 0, ci; ci = node.children[i++];) {<br>　　　　　　　　　　　　　　　　　　nodeToHtml(ci, arr, formatter, current) // 递归子节点 </p> <p>　　　　　　　　　　　　　　　　　　return arr.join('') </p> <p>可见获取编辑器的内容就是获取iframe网页的内容body.innerHTML现成的html代码，很简单，但解析处理非常复杂，有内置过滤规则处理，有点类似框架的<br>template/vnode解析处理，要递归解析处理所有的子节点。</p> <p>编辑器头部是工具按钮，都是以插件形式实现的，下面以点击“模板”工具按钮为例分析ueditor的工具按钮插件是如何实现的。</p> <p>点击模板(template)按钮是插入模板，会显示一个弹窗对话框：</p> <div id="edui221" class="edui-dialog edui-for-template edui-default edui-state-centered" style="left: 10px; top: 88px; z-index: 110;"> <p>里面是一个iframe加载一个网页： </p> <iframe id="edui221\_iframe" class="%%-iframe" height="100%" width="100%" frameborder="0" src="https://my.oschina.net/ueditor/dialogs/template/template.html"></iframe> <p>这个网页就是一个列表，选择之后关闭弹窗，把选择的内容插入编辑器中。</p> <p>注意dialog会话弹窗层iframe不在编辑器层iframe里面，而是在当前网页里面，当前网页有几个container容器，其中一个放编辑器iframe，一个放dialog iframe，还有编辑器的头部/底部都是单独的容器，都不在编辑器容器里面。凡是跨iframe都有传递数据问题，因此dialog弹窗也有传递数据问题，后面会分析它如何传递数据。</p> <p>iframe网页会执行internal.js建立环境：</p> <p>dialog = parent.$EDITORUI[window.frameElement.id.replace( /_iframe$/, '' )]; // dialog实例是从父网页获取的，含父网页中编辑器实例<br>editor = dialog.editor; //当前打开dialog的编辑器实例</p> <p>dialog.onok = function () {<br>　　me.execCommand( "template", obj ); //执行template命令， obj.html就是选取的template代码，me是editor实例 </p> <p>　　　　//重写execCommand命令，用于处理框选时的处理<br>　　　　var oldExecCommand = me.execCommand;<br>　　　　me.execCommand = function (cmd, datatat) {<br>　　　　　　result = oldExecCommand.apply(me, arguments); // oldExecCommand代码如下 </p> <p>　　　　　　　　execCommand: function (cmdName) {<br>　　　　　　　　　　result = this._callCmdFn('execCommand', arguments); </p> <p>　　　　　　　　　　　　_callCmdFn: function (fnName, args) {<br>　　　　　　　　　　　　　　return cmdFn.apply(this, args); </p> <p>　　　　　　　　　　　　　　　　UE.plugins['template'] = function () {<br>　　　　　　　　　　　　　　　　　　UE.commands['template'] = {<br>　　　　　　　　　　　　　　　　　　　　execCommand:function (cmd, obj) { // cmd=template<br>　　　　　　　　　　　　　　　　　　　　　　obj.html && this.execCommand("inserthtml", obj.html);//再次递归editor实例的execCommand，但这次是执行inserthtml命令，会执行到以下代码 </p> <p>UE.commands['inserthtml'] = {<br>　　execCommand: function (command,html,notNeedFilter){ // 把选取的template插入编辑器网页<br>　　　　range = me.selection.getRange(); // 获取编辑器中dialog会话弹窗之前光标选中的区域，也就是template插入的位置 </p> <p>　　　　　　getRange:function () {<br>　　　　　　　　var range = new baidu.editor.dom.Range( me.document ); // 创建range对象，数据结构与js原生selection对象一样<br>　　　　　　　　var sel = me.getNative(); // 调window.getSelection()返回点击选取的节点数据，此时已经点击工具按钮，之前点击选取的光标状态已经不在，获取不到点击选取数据，单步看获取的数据是空的，因此要使用之前保存的selection数据。 </p> <p>　　　　　　　　　　getNative:function () {<br>　　　　　　　　　　　　return domUtils.getWindow( doc ).getSelection();<br>　　　　　　　　　　}, </p> <p>　　　　　　　　if ( this._bakRange && domUtils.inDoc( this._bakRange.startContainer, this.document ) ){<br>　　　　　　　　　　return this._bakRange; //之前在编辑器点击选取触发执行getNative保存的selection数据，container=text,offset=1(没有意义)<br>　　　　　　　　}<br>　　　　　　} </p> <p>　　　//如果当前位置选中了fillchar要干掉，要不会产生空行<br>　　　if(range.inFillChar()){ // 插入第一个子节点第一次执行时range是#text填充符<br>　　　　child = range.startContainer; // 是text节点<br>　　　　if(domUtils.isFillChar(child)){ // 插入第一个子节点第一次执行时start container是#text填充符<br>　　　　　　range.setStartBefore(child).collapse(true); //设置container=p，offset=0(#text节点在p中的index)，collapse(折叠)意思是设置end=start，如果选中一段再插入就有start container/end container问题。 setStartBefore(child)意思就是要插入到child之前，但要获取child在父节点中的offset，插入时在父节点中按offset再获取child，再插入到child之前<br>domUtils.remove(child); // 删除#text节点，那么在p节点内部offset=0是br节点 </p> <p>　　　　}else if(domUtils.isFillChar(child,true)){<br>　　　　　　child.nodeValue = child.nodeValue.replace(fillCharReg,'');<br>　　　　　　range.startOffset--;<br>　　　　　　range.collapsed && range.collapse(true)<br>　　　　}<br>　　}</p> <p>　　while ( child = div.firstChild ) { // 递归循环div的子节点把div的子节点一个一个插入(div不插入)，如果把div整个插入，就多了div层，其实可以用frag，把frag整个插入即可，但插入第一个子节点时start container是p节点，插入之后要调整start container=body，从第二个子节点开始都是插入body，所以还不能整个一次插入，挺复杂的。 </p> <p>　　　　if(hadBreak){ //第一次执行时hadBreak=0，不执行这段，之后再执行时hadBreak=1，会执行这段，hadBreak表示已经切割container元素，<br>　　　　　　var p = me.document.createElement('p');<br>　　　　　　while(child && (child.nodeType == 3 || !dtd.$block[child.tagName])){ // 如果要插入的节点是#text节点则套一层p，为何？<br>　　　　　　　　nextNode = child.nextSibling;<br>　　　　　　　　p.appendChild(child); //child是引用div子节点，那么div子节点插入到p就从div移动到p，div中已经没有child，所以循环n次之后div就变空了<br>　　　　　　　　child = nextNode;<br>　　　　　　} // 如果是文本节点就插入到p元素里面，如果有一批文本节点就循环全部插入到p元素里面，再把p做为child节点<br>　　　　　　if(p.firstChild){<br>　　　　　　　　child = p //<br>　　　　　　}<br>　　　　} //第n次执行时插入的node是内容节点，不会外套一层p，这段不起作用 </p> <p>　　　　range.insertNode( child ); // 第一次插入子节点时把node插入到<p>的<br>之前，之后插入到body里面<p>之前 </p> <p>　　　　　　insertNode:function (node) { // 编辑器头尾有空格文本节点，第一次执行时是插入填充节点，第n次执行时是插入内容节点<br>　　　　　　　　var first = node, length = 1;<br>　　　　　　　　var start = this.startContainer, //单步看插入第二个子节点时，是<body>，offset是2指向<p><br>　　　　　　　　offset = this.startOffset;<br>　　　　　　　　var nextNode = start.childNodes[ offset ]; // <body><h1></h1><p><br></p> body[2]=<p><br>　　　　　　　　if (nextNode) {<br>　　　　　　　　　　start.insertBefore(node, nextNode);<br>　　　　　　　　} else {<br>　　　　　　　　　　start.appendChild(node);<br>　　　　　　　　} </p> <p>　　　　　　　　return this.setStartBefore(first); // 第一个子节点插入之后，根据第一个子节点调整插入指针，第一个子节点此时还在p中，<br>　　　　　　　　　　　　　　　　　　　　　　　　　　range.startContainer = p<br>　　　　　　　　　　　　　　　　　　　　　　　　　　range.startOffset = 0 (node在p中的index) </p> <p>　　　　　　　　　　　　　　　　　　　　　　　　此时p变为<p>node<br></p> </p> <p>　　　　nextNode = child.nextSibling; // child插入之后的nextsibling就是原来的占位节点br </p> <p>　　　　if ( !hadBreak && child.nodeType == domUtils.NODE_ELEMENT && domUtils.isBlockElm( child ) ){ // 第一次循环插入<h1>子节点时hadBreak=0会执行一次 </p> <p>　　　　　　parent = domUtils.findParent( child,function ( node ){ return domUtils.isBlockElm( node ); } ); // 递归向上找父节点，parent是p<br>　　　　　　domUtils.breakParent( child, pre || tmp ); // 把p切开变为<p></p>node<p><br></p><br>　　　　　　//去掉break后前一个多余的节点 <p>|</p> ==> <p></p><div></div><p>|</p><br>　　　　　　var pre = child.previousSibling;<br>　　　　　　domUtils.trimWhiteTextNode(pre);<br>　　　　　　if(!pre.childNodes.length){ // 如果node前面的p是空的则删除，变为node<p><br></p><br>　　　　　　　　domUtils.remove(pre);<br>　　　　　　}<br>　　　　　　next.appendChild(me.document.createElement('br')); // 在p添加一个br<br>　　　　　　hadBreak = 1; // 切割元素问题只在第一次循环插入子节点时处理一次<br>　　　　} </p> <p>　　　　if(!div.firstChild && next && domUtils.isBlockElm(next)){ // 如果div变空，就是所有子节点都循环处理完了<br>　　　　　　range.setStart(next,0).collapse(true); // 把start container设置为插入节点后面的next占位节点(应该是p)，offset=0(p里面的第一个子节点)，<br>　　　　　　break;<br>　　　　}<br>　　　　range.setEndAfter( child ).collapse(); //关键在这，此时第一个子节点已经插入到<p>里面，<p>已经分裂成node<p><br></p>，因此node.parentNode=body，<br>container变为body，offset是node在body中的index=2。虽然是setendcontainer，但updatecollapse会更新startcontainer=endcontainer，所以实际上就是设置startcontainer=body，一旦第一个子节点插入成功，后续再插入时都是插入到之前插入的node的nextSibling节点p，offset是p在body里面的index，按offset找p节点，把node插入到p之前(insertBefore)。 </p> <p>}</p> <p>inserthtml命令的函数代码就是把template插入编辑器网页，处理流程逻辑非常复杂深奥，涉及到很细小的细节比如空白换行符处理以及很细微的浏览器兼容性问题。经过长时间细致debug看数据研究源代码，最后发现插入子节点的过程原理如下：</p> <p>假定回车换行，然后插入模板，把模板插入到当前行位置，这是最简单的情况，回车换行时编辑器会自动产生<p><br></p>。</p> <p>插入div的第一个子节点时是插入到<p>中，更准确地说是插入到p中的offset=0位置之前，也就是填充节点之前。</p> <p>插入之后，把<p>节点分裂成两个<p>如下所示：</p> <p></p>node<p><br></p> <p>然后把空的<p>节点也删除，就变成了node<p><br></p>，之后再插入其它子节点时，是插入到<body>中，offset位置是<p>节点在<body>中的index，也就是插入到body中<p>节点之前，每次插入一个node之后，node的nextSibling就是<p>节点占位元素。</p> <p> 这段代码是最复杂的插入程序，插入本来很简单，但编辑器插入非常复杂，因为可以在编辑器点击或选取任何位置区域做为插入位置，那么就复杂了，选取的区域是否要保留？是插入到选取区域的头部还是尾部？如果插入到一个元素的中间，那么元素要被分割成两个元素，而有些元素比如<a>元素是不能分割的。因此插入处理流程逻辑以及细节非常复杂，还涉及到#text不可见文本节点，我们在开发应用时一般不会涉及到这么细节这么复杂的问题。</p> <p>下面是insertHtml程序用到的几段函数代码：</p> <p>根据start container判断当前选区range内容是否占位符：<br>inFillChar : function(){<br>　　var start = this.startContainer;<br>　　if(this.collapsed && start.nodeType == 3<br>　　　　&& start.nodeValue.replace(new RegExp('^' + domUtils.fillChar),'').length + 1 == start.nodeValue.length<br>　　//domUtils.fillChar是空格，这个表达式其实意思是找开头是否有空格，那么上述#text文本节点符合这个判断表达式<br>　　){<br>　　　　return true;<br>　　}<br>　　return false;</p> <p>判断给定的节点是否是一个“填充”节点：<br>isFillChar:function (node,isInStart) {<br>　　if(node.nodeType != 3)<br>　　　　return false;<br>　　var text = node.nodeValue;<br>　　if(isInStart){<br>　　　　return new RegExp('^' + domUtils.fillChar).test(text) // 以空格开头<br>　　}<br>　　return !text.replace(new RegExp(domUtils.fillChar,'g'), '').length // 在字符串找所有的空格去掉 </p> <p>对于上述#text文本节点，其nodevalue是""，去掉空格之后长度为0，因此判断为填充节点，返回true。</p> <p>这两个方法都是根据nodetype=3和nodevalue含空格来判断，有何区别？一个是判断range，一个是判断node。</p> <p>如果占位元素是填充节点，就插入到填充节点之前，再删除填充节点，因为如果填充节点是<br>，会换行。</p> <p>将Range开始位置设置到node节点之前:<br>setStartBefore:function (node) {<br>　　return this.setStart(node.parentNode, domUtils.getNodeIndex(node)); //返回修改之后的range<br>}, </p> <p>检测节点node在父节点中的索引位置：<br>getNodeIndex:function (node, ignoreTextNode) {<br>　　var preNode = node,<br>　　i = 0;<br>　　while (preNode = preNode.previousSibling) {<br>　　　　if (ignoreTextNode && preNode.nodeType == 3) {<br>　　　　　　if(preNode.nodeType != preNode.nextSibling.nodeType ){<br>　　　　　　　　i++;<br>　　　　　　}<br>　　　　　　continue;<br>　　　　}<br>　　　　i++;<br>　　}<br>　　return i;<br>　　}, </p> <p>如果选中一段，再插入，又要保留选中的段，就比较复杂，可以插入到选中段的开头，也可以插入到选中段的尾部，也就是说选中的段可以在插入段的前面或后面。<br>编辑器range含start container和end container，就是选中的段的头尾节点。 </p> <p>collapse:function (toStart) {<br>　　var me = this;<br>　　if (toStart) { //插入到range的头部<br>　　　　me.endContainer = me.startContainer;<br>　　　　me.endOffset = me.startOffset;<br>　　} else { //插入到range的尾部<br>　　　　me.startContainer = me.endContainer;<br>　　　　me.startOffset = me.endOffset;<br>　　}<br>　　me.collapsed = true;<br>　　return me; </p> <p>设置Range的开始容器节点和偏移量<br>* @method setStart<br>* @remind 如果给定的节点是元素节点，那么offset指的是其子元素中索引为offset的元素，<br>* 如果是文本节点，那么offset指的是其文本内容的第offset个字符<br>* @remind 如果提供的容器节点是一个不能包含子元素的节点，则该选区的开始容器将被设置<br>* 为该节点的父节点，此时，其距离开始容器的偏移量也变成了该节点在其父节点<br>* 中的索引<br>setStart:function (node, offset) { // node是p，offset是里面子节点的offset，0是第一个子节点，但也可能是node在父元素中的offset<br>　　return setEndPoint(true, node, offset, this);<br>},</p> <p>function setEndPoint(toStart, node, offset, range) {<br>　　//如果node是自闭合标签要处理<br>　　if (node.nodeType == 1 && (dtd.$empty[node.tagName] || dtd.$nonChild[node.tagName])) {<br>　　　　offset = domUtils.getNodeIndex(node) + (toStart ? 0 : 1);<br>　　　　node = node.parentNode;<br>　　}<br>　　if (toStart) {<br>　　　　range.startContainer = node;<br>　　　　range.startOffset = offset;<br>　　　　if (!range.endContainer) {<br>　　　　　　range.collapse(true);<br>　　　　}<br>　　} else {<br>　　　　range.endContainer = node;<br>　　　　range.endOffset = offset;<br>　　　　if (!range.startContainer) {<br>　　　　　　range.collapse(false);<br>　　　　}<br>　　}<br>　　updateCollapse(range);<br>　　return range;</p> <p>下面研究点击对话框“确定”按钮之后是如何处理的？如何能执行dialog.onok?</p> <p>debug看dialog iframe网页代码中“确定”按钮代码是： </p> <div id="edui223\_body" unselectable="on" class="edui-button-body edui-default" onmousedown="return $EDITORUI\["edui223"\].\_onMouseDown(event, this);" onclick="return $EDITORUI\["edui223"\].\_onClick(event, this);"> <div class="edui-box edui-icon edui-default"></div> <div class="edui-box edui-label edui-default">确认</div> </div> <p>点击“确定”按钮是执行$EDITORUI["edui223"]._onClick(event, this)，这段代码是如何产生的？</p> <p>dialog插件定义代码：<br>// ui/dialog.js<br>(function (){<br>　　Dialog = baidu.editor.ui.Dialog = function (options){<br>　　　　this.initOptions(utils.extend({<br>　　　　　　onok: function (){},<br>　　　　　　oncancel: function (){},<br>　　　　　　onclose: function (t, ok){<br>　　　　　　return ok ? this.onok() : this.oncancel();<br>　　　　},<br>　　},options));<br>　　this.initDialog();<br>};<br>Dialog.prototype = {<br>　　initDialog: function (){ </p> <p>　　},<br>　　_hide: function (){<br>　　　　wrapNode.style.display = 'none';<br>　　},<br>　　open: function (){<br>　　　　this.render();<br>　　　　this.open();<br>　　},<br>　　close: function (ok){<br>　　　　this._hide();<br>　　} </p> <p>debug看工具按钮比如模板按钮是； </p> <div id="edui225\_body" unselectable="on" title="模板" class="edui-button-body edui-default" onmousedown="return $EDITORUI\["edui225"\].\_onMouseDown(event, this);" onclick="return $EDITORUI\["edui225"\].\_onClick(event, this);"> <div class="edui-box edui-icon edui-default"></div> <div class="edui-box edui-label edui-default"></div> </div> <p>按钮html代码是由button对象的代码构造出来的：<br>Button = baidu.editor.ui.Button = function (options){}<br>Button.prototype = {<br>　　getHtmlTpl: function (){<br>　　　　return '<div id="##" class="edui-box %%">' +<br>'<div id="##\_state" stateful>' +<br>'<div class="%%-wrap"><div id="##_body" unselectable="on" ' + (this.title ? 'title="' + this.title + '"' : '') +<br>' class="%%-body" onmousedown="return $$._onMouseDown(event, this);" onclick="return $$._onClick(event, this);">'</p> <p>加debug看$$就是$EDITORUI['edui225']。</p> <p>$EDITORUI['edui225']._onClick(event, this)代码是：<br>　　_onClick: function (){<br>　　　　if (!this.isDisabled()) {<br>　　　　　　this.fireEvent('click');<br>　　　　　　// ueditor自己的事件系统，对应editor.addListener，触发事件就是执行listener<br>　　　　　　var EventBase = UE.EventBase = function () {};<br>　　　　　　　　EventBase.prototype = { // ueditor自己的逻辑事件系统<br>　　　　　　　　　　addListener:function (types, listener) {</p> <p>　　　　　　　　　　　　//把listener存储到listeners[]中<br>　　　　　　　　　　},<br>　　　　　　　　　　fireEvent:function () { // fireEvent就是到listeners[]中找listener执行<br>　　　　　　　　　　　　t = listeners[k].apply(this, arguments);<br>　　　　　　　　　　　　r = t.apply(this, arguments);<br>　　　　　　　　　　}<br>　　　　}<br>　　　},</p> <p>插件绑定了click事件；<br>UE.plugins['template'] = function () {<br>　　this.addListener("click", function (type, evt) { //在template操作过程中并没有执行这个handler<br>　　　　var el = evt.target || evt.srcElement,<br>　　　　range = this.selection.getRange();<br>　　　　var tnode = domUtils.findParent(el, function (node) {<br>　　　　if (node.className && domUtils.hasClass(node, "ue_t")) {<br>　　　　　　return node;<br>　　　　}<br>　　}, true);<br>　　tnode && range.selectNode(tnode).shrinkBoundary().select();<br>});</p> <p>工具栏按钮点击事件绑定：<br>var btnCmds = ['undo', 'redo', 'formatmatch',<br>'bold', 'italic', 'underline', 'fontborder', 'touppercase', 'tolowercase',<br>'strikethrough', 'subscript', 'superscript', 'source', 'indent', 'outdent',<br>'blockquote', 'pasteplain', 'pagebreak',<br>'selectall', 'print','horizontal', 'removeformat', 'time', 'date', 'unlink',<br>'insertparagraphbeforetable', 'insertrow', 'insertcol', 'mergeright', 'mergedown', 'deleterow',<br>'deletecol', 'splittorows', 'splittocols', 'splittocells', 'mergecells', 'deletetable', 'drafts']; </p> <p>for (var i = 0, ci; ci = btnCmds[i++];) {<br>　　editorui[ci] = function (cmd) {<br>　　　　var ui = new editorui.Button({<br>　　　　　　onclick:function () {<br>　　　　　　editor.execCommand(cmd);<br>　　　　},</p> <p>但“模板”按钮不在其中，有dialog的按钮是在这儿定义的：</p> <p>var dialogBtns = {<br>noOk:['searchreplace', 'help', 'spechars', 'webapp','preview'],<br>ok:['attachment', 'anchor', 'link', 'insertimage', 'map', 'gmap', 'insertframe', 'wordimage',<br>'insertvideo', 'insertframe', 'edittip', 'edittable', 'edittd', 'scrawl', 'template', 'music', 'background', 'charts']<br>};</p> <p>var ui = new editorui.Button({<br>　　onclick:function () {<br>　　　　if (dialog) {<br>　　　　　　switch (cmd) {<br>　　　　　　　　default:<br>　　　　　　　　　　dialog.render(); </p> <p>UIBase.prototype = {<br>　　render:function (holder) {<br>　　　　holder.appendChild(el); //构造dialog el插入网页中占位元素（一个固定的浮动块）中<br>　　　　this.postRender(); </p> <p>　　　　　　postRender: function (){<br>　　　　　　　　this.addListener('show', function (){<br>　　　　　　　　　　me.modalMask.show(this.getDom().style.zIndex - 2);<br>　　　　　　　　});<br>　　　　　　　　this.buttons[i].postRender(); </p> <p>　　　　　　　　　　postRender: function (){<br>　　　　　　　　　　　　this.Stateful_postRender(); </p> <p>　　　　　　　　　　　　　　Stateful_postRender: function (){<br>　　　　　　　　　　　　　　　　if (this.disabled && !this.hasState('disabled')) {<br>　　　　　　　　　　　　　　　　　　this.addState('disabled'); </p> <p>　　　　　　　　　　　　　　　　　　this.setDisabled(this.disabled)<br>　　　　　　　　　　　　　　　　},<br>　　　　　　　　　　　　　　}<br>　　　　　　　　　　}<br>　　　　　　　　dialog.open(); </p> <p>　　　　　　　　　　open: function (){<br>　　　　　　　　　　　　this.showAtCenter(); // 执行这个方法显示会话弹窗 </p> <p>　　　　　　　　　　　　　　showAtCenter: function (){<br>　　　　　　　　　　　　　　　　//设置定位<br>　　　　　　　　　　　　　　　　this._show(); </p> <p>　　　　　　　　　　　　　　　　　　_show: function (){<br>　　　　　　　　　　　　　　　　　　　　//dialog和编辑器两个平级浮动块要比z-index，要高过编辑器的zindxe<br>　　　　　　　　　　　　　　　　　　　　this.editor.container.style.zIndex && (this.getDom().style.zIndex = this.editor.container.style.zIndex * 1 + 10);<br>　　　　　　　　　　　　　　　　　　　　this.fireEvent('show');<br>　　　　　　　　　　　　　　　　　　　　baidu.editor.ui.uiUtils.getFixedLayer().style.zIndex = this.getDom().style.zIndex - 4;<br>　　　　　　　　　　　　　　　　　　}<br>　　　　　　　　　　　　　　　　}<br>　　　　　　　　　　　　　　}<br>　　　　　　　　　　　　}<br>　　　　　　　　}</p> <p>下面来分析一下编辑器初始化代码，因为在编辑器点击一下，然后点击模板按钮插入模板，是要插入到之前点击的位置，那么之前在编辑框内点击时编辑器如何获取位置或selection选取区域以及如何保存是个问题。</p> <p>_setup: function (doc) {<br>　　me.selection = new dom.Selection(doc);<br>　　this.selection.getNative()<br>　　this._initEvents(); </p> <p>　　　　_initEvents: function () {<br>　　　　　　domUtils.on(doc, ['click', 'contextmenu', 'mousedown', 'keydown', 'keyup', 'keypress', 'mouseup', 'mouseover', 'mouseout', 'selectstart'], me._proxyDomEvent);<br>　　　　　　domUtils.on(win, ['focus', 'blur'], me._proxyDomEvent); </p> <p>　　　　　　　　_proxyDomEvent: function (evt) {<br>　　　　　　　　　　this.fireEvent(evt.type.replace(/^on/, ''), evt)<br>　　　　　　　　} </p> <p>　　　　　　domUtils.on(doc, ['mouseup', 'keydown'], function (evt) {<br>　　　　　　　　me._selectionChange(250, evt); </p> <p>　　　　　　　　　　_selectionChange: function (delay, evt) {<br>　　　　　　　　　　　　me.fireEvent('selectionchange', !!evt);<br>　　　　　　　　　　}<br>　　　　　　} </p> <p>　　//编辑器不能为空内容　　if (domUtils.isEmptyNode(me.body)) { <strong>me.body.innerHTML = '<p>' + (browser.ie ? '' : '<br/>') + '</p>';</strong></p> <p> <strong>}</strong> 　//如果要求focus, 就把光标定位到内容开始<br>　　if (options.focus) {<br>　　　　setTimeout(function () {<br>　　　　　　me.focus(me.options.focusInEnd);<br>　　　　　　//如果自动清除开着，就不需要做selectionchange;<br>　　　　　　!me.options.autoClearinitialContent && me._selectionChange();<br>　　　　}, 0);<br>　　}从初始化事件代码看，绑定物理事件清清楚楚，对于mouseup事件，是按selectionchange事件去找handler执行，这个selectionchange事件有几十个handler都要执行，因为源码中有几十个editor.addListener('selectionchange',handler)语句，<br>就不知道是哪个handler是处理range的，代码在哪里？要在89个函数中查找分析哪个函数是响应点击选取处理range的，难度很大，源代码非常复杂深奥高超。</p> <p>经过不懈的努力，还好所幸最后终于发现有一个处理mouseup物理事件的handler代码处理了range：</p> <p>UE.plugins['table'] = function () {<br>　　me.ready(function () {<br>　　　　me.addListener("mouseup", mouseUpEvent); </p> <p>　　　　　　function mouseUpEvent(type, evt) { </p> <p>　　　　　　range = new dom.Range(me.document);<br>　　　　　　range.setStart(target, 0).setCursor(false, true); </p> <p>　　　　　　me._selectionChange(250, evt); 　//变化选区<br>　　　　　　　　_selectionChange: function (delay, evt) { </p> <p>　　　　　　　　　　me.selection.cache(); // 获取选区保存到cache </p> <p>　　　　　　　　　　　　/**缓存当前选区的range和选区的开始节点<br>　　　　　　　　　　　　cache:function () {<br>　　　　　　　　　　　　　　this.clear(); // 先清除历史range再保留最近的range<br>　　　　　　　　　　　　　　this._cachedRange = this.getRange(); </p> <p>　　　　　　　　　　　　　　　　getRange:function () {<br>　　　　　　　　　　　　　　　　　　var sel = me.getNative();<br>　　　　　　　　　　　　　　　　　　//由于已经清除历史range，此刻cache是空的，无cache数据可用，则执行下面代码<br>　　　　　　　　　　　　　　　　　　if ( sel && sel.rangeCount ) { //根据sel数据设置range数据最后返回range数据<br>　　　　　　　　　　　　　　　　　　　　var firstRange = sel.getRangeAt( 0 ); 　var lastRange = sel.getRangeAt( sel.rangeCount - 1 );<br>　　　　　　　　　　　　　　　　　　　　range.setStart( firstRange.startContainer, firstRange.startOffset ).setEnd( lastRange.endContainer, lastRange.endOffset );<br>　　　　　　　　　　　　　　　　　　　　if ( range.collapsed && domUtils.isBody( range.startContainer ) && !range.startOffset ) {<br>　　　　　　　　　　　　　　　　　　　　　　optimze( range );<br>　　　　　　　　　　　　　　　　　　　　}<br>　　　　　　　　　　　　　　　　　　　　return this._bakRange = range;<br>　　　　　　　　　　　　　　　　　　}</p> <p>因此，在编辑框内点击或选取时，是执行mouseUpEvent处理range，获取和保存当前点击位置或选取的区域，之后再插入模板时要获取插入位置，就是从cache取这个保存的range数据，插入模板时不可能再调用getRange()获取点击位置或选取区域，因为点击工具按钮之后，之前在编辑框内的点击或选取的光标状态已经改变不存在了。</p> <p>下面看几个ueditor源码中的正则匹配表达式，学习一下正则：</p> <p>var re_tag = /<(?:(?:\/([^>]+)>)|(?:!--([\S|\s]*?)-->)|(?:([^\s\/<>]+)\s*((?:(?:"[^"]*")|(?:'[^']*')|[^"'<>])*)\/?>))/g,</p> <p>匹配以下html标签写法：<br></xxx> //比如</br> </p>  <p><xxx "xxx" /><br><xxx 'xxx' /><br><xxx xxx /></p> <p>re_attr = /([\w\-:.]+)(?:(?:\s*=\s*(?:(?:"([^"]*)")|(?:'([^']*)')|([^\s>]+)))|(?=\s|$))/g;</p> <p>匹配以下html标签属性写法：<br>xxx:xxx-xxx.xxx = "xxx"<br>xxx = 'xxx'<br>xxx = xxx<br>xxx</p> <p>是不是晕？ ?:可以忽略，就好看一点了。</p> <p>源码中运用正则替换修改字符串的例子：</p> <p>htmlstr = htmlstr.replace(new RegExp('[\\r\\t\\n'+(ignoreBlank?'':' ')+']*<\/?(\\w+)\\s*(?:[^>]*)>[\\r\\t\\n'+(ignoreBlank?'':' ')+']*','g'), function(a,b){<br>以 \n <div >xxx</div > \n 为例，匹配到两次，第一次匹配 \n <div>，第二次匹配 </div> \n，调用function两次，a参数就是匹配的串，b参数是匹配的串里面的子匹配串<br>(\\w+)文字符串，就是div，replace方法里面如果写function，function返回的就是替换内容。</p> <p>return a.replace(new RegExp('^[\\r\\n'+(ignoreBlank?'':' ')+']+'),'').replace(new RegExp('[\\r\\n'+(ignoreBlank?'':' ')+']+$'),'');<br>按pattern找到串之后去掉头尾的换行符返回做为替换内容，结果就是把源字符串中标签头尾的换行符去掉，返回修改之后的字符串。</p> <p>本文到这里差不多就结束了，ueditor的工具按钮都以plugin插件方式定义，机制都一样，只是功能不同，本文不再一一分析，本文只以插入模板这个工具按钮为例进行了重点分析，其它插件应该都是类似的。</p> <p>通过源代码分析学习，本人感觉ueditor是学习网页元素处理的顶峰，而前端框架是学习用对象编程技术实现组件机制和语义化表达式解析的顶峰，webuploader则是学习模块化编程的典范，只不过模块化编程现在已经被放弃了被webpack取代了。</p> <p>本人水平有限，文中错误之处欢迎大家指正和交流。</p> </div> </article> <div class="tags-box" data-v-1bdff09d><a href="/tag/iframe.html" target="_blank" class="item" data-v-1bdff09d>iframe</a><a href="/tag/ueditor.html" target="_blank" class="item" data-v-1bdff09d>ueditor</a><a href="/tag/node.html" target="_blank" class="item" data-v-1bdff09d>node</a><a href="/tag/%E7%BD%91%E9%A1%B5%E4%BB%A3%E7%A0%81.html" target="_blank" class="item" data-v-1bdff09d>网页代码</a><a href="/tag/ueditor%E7%BC%96%E8%BE%91%E5%99%A8.html" target="_blank" class="item" data-v-1bdff09d>ueditor编辑器</a><a href="/tag/%E7%BC%96%E8%BE%91%E5%99%A8.html" target="_blank" class="item" data-v-1bdff09d>编辑器</a><a href="/tag/offset.html" target="_blank" class="item" data-v-1bdff09d>offset</a><a href="/tag/%E8%BF%90%E7%BB%B4%E5%BC%80%E5%8F%91.html" target="_blank" class="item" data-v-1bdff09d>运维开发</a><a href="/tag/%E8%BF%90%E7%BB%B4%E5%BC%80%E5%8F%91.html" target="_blank" class="item" data-v-1bdff09d>运维开发</a></div> <div class="blog-btns-box" data-v-7d5edd21><div class="btn-item" data-v-7d5edd21><div class="circle zan" data-v-7d5edd21><IconFont type="icon-Dianzan" class="iconfont" data-v-7d5edd21></IconFont></div> <div class="text" data-v-7d5edd21>点赞</div></div> <div class="btn-item" data-v-7d5edd21><div class="circle favorite" data-v-7d5edd21><IconFont type="icon-Like1" class="iconfont" data-v-7d5edd21></IconFont></div> <div class="text" data-v-7d5edd21>收藏</div></div></div></div> <div id="recommend-lesson"><div class="recommend-lesson-title">推荐课程</div> <div class="horizontal" data-v-ba84c88a><a target="_blank" href="/lesson/detail/9574923462" class="re-course-list" data-v-ba84c88a><img src="https://img-hello-world.oss-cn-beijing.aliyuncs.com/imgs/86018b97b99b2ad0b0e8f43ccfd5c8c8.png" alt="avatar" data-v-ba84c88a> <div class="re-info" data-v-ba84c88a><h2 data-v-ba84c88a>Andriod第三方源码分析</h2> <div class="des" data-v-ba84c88a><div class="price" data-v-ba84c88a>免费</div> <span data-v-ba84c88a>35人学习</span></div></div></a><a target="_blank" href="/lesson/detail/6955961602" class="re-course-list" data-v-ba84c88a><img src="https://img-hello-world.oss-cn-beijing.aliyuncs.com/imgs/2847450d82190c8a7d0ae4ba8a8e5629.png" alt="avatar" data-v-ba84c88a> <div class="re-info" data-v-ba84c88a><h2 data-v-ba84c88a>Android进阶之旅-(Framework源码分析)</h2> <div class="des" data-v-ba84c88a><div class="price" data-v-ba84c88a>免费</div> <span data-v-ba84c88a>26人学习</span></div></div></a></div></div> <div id="anchor" class="comment-container"><div id="comment-panel" class="comment-panel" data-v-25426b80><div class="panel-title" data-v-25426b80>评论区</div> <div class="comment-input-box" data-v-25426b80><img src="/_nuxt/img/default-avatar.38df358.png" alt class="user-avatar" data-v-25426b80> </div> </div></div> <div class="recommend-blog-list"><div class="recommend-title">推荐文章</div> <div class="art-list" data-v-6293c55f><div class="blog-item" data-v-6293c55f><div class="blog-header" data-v-6293c55f><img src="https://img-hello-world.oss-cn-beijing.aliyuncs.com/imgs/cd34cdaab69ede1e2bf28de235151c34.webp" alt="blmius" class="img" data-v-6293c55f> <a href="/blmius" target="_blank" class="name" data-v-6293c55f> blmius </a> <div class="dot" data-v-6293c55f>•</div> <div class="time" data-v-6293c55f> 2年前 </div></div> <div class="blog-content" data-v-6293c55f><div class="item-left" data-v-6293c55f><a href="/p/2802547579" target="_blank" title="MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1" class="title single-ellipsis" data-v-6293c55f> MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1 </a> <div class="intro multi-ellipsis-2" data-v-6293c55f> 文章目录问题用navicat导入数据时，报错：原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等，这样可以更容易地在不同的环境中使用MySQL。全局s </div></div> <img src="https://img-hello-world.oss-cn-beijing.aliyuncs.com/ed6c6174f1775f65a3fbe98488391419.png" class="item-right" data-v-6293c55f></div>  <div class="blog-footer flex" data-v-6293c55f><div class="iconfont footer-item icon-Show1" data-v-6293c55f><span class="num" data-v-6293c55f>3512</span></div><div class="iconfont footer-item icon-Guanbi1-copy" data-v-6293c55f><span class="num" data-v-6293c55f>0</span></div><div class="iconfont footer-item icon-Pinglun1" data-v-6293c55f><span class="num" data-v-6293c55f>0</span></div></div></div><div class="blog-item" data-v-6293c55f><div class="blog-header" data-v-6293c55f><img src="https://img-hello-world.oss-cn-beijing.aliyuncs.com/imgs/3149e13a96d0d27780fd76b05b6ea101.jfif" alt="Easter79" class="img" data-v-6293c55f> <a href="/Easter79" target="_blank" class="name" data-v-6293c55f> Easter79 </a> <div class="dot" data-v-6293c55f>•</div> <div class="time" data-v-6293c55f> 2年前 </div></div> <div class="blog-content" data-v-6293c55f><div class="item-left" data-v-6293c55f><a href="/p/0507154872" target="_blank" title="swap空间的增减方法 " class="title single-ellipsis" data-v-6293c55f> swap空间的增减方法 </a> <div class="intro multi-ellipsis-2" data-v-6293c55f> （1）增大swap空间去激活swap交换区：swapoff v /dev/vg00/lvswap扩展交换lv：lvextend L 10G /dev/vg00/lvswap重新生成swap交换区：mkswap /dev/vg00/lvswap激活新生成的交换区：swapon v /dev/vg00/lvswap </div></div> </div>  <div class="blog-footer flex" data-v-6293c55f><div class="iconfont footer-item icon-Show1" data-v-6293c55f><span class="num" data-v-6293c55f>985</span></div><div class="iconfont footer-item icon-Guanbi1-copy" data-v-6293c55f><span class="num" data-v-6293c55f>0</span></div><div class="iconfont footer-item icon-Pinglun1" data-v-6293c55f><span class="num" data-v-6293c55f>0</span></div></div></div><div class="blog-item" data-v-6293c55f><div class="blog-header" data-v-6293c55f><img src="https://img-hello-world.oss-cn-beijing.aliyuncs.com/imgs/d4566ad9edfb956dba92fc21f5e1561f.webp" alt="Jacquelyn38" class="img" data-v-6293c55f> <a href="/Jacquelyn38" target="_blank" class="name" data-v-6293c55f> Jacquelyn38 </a> <div class="dot" data-v-6293c55f>•</div> <div class="time" data-v-6293c55f> 2年前 </div></div> <div class="blog-content" data-v-6293c55f><div class="item-left" data-v-6293c55f><a href="/p/3468005401" target="_blank" title="2020年前端实用代码段，为你的工作保驾护航" class="title single-ellipsis" data-v-6293c55f> 2020年前端实用代码段，为你的工作保驾护航 </a> <div class="intro multi-ellipsis-2" data-v-6293c55f> 有空的时候，自己总结了几个代码段，在开发中也经常使用，谢谢。1、使用解构获取json数据let jsonData id: 1,status: "OK",data: 'a', 'b';let id, status, data: number jsonData;console.log(id, status, number ) </div></div> <img src="https://img-hello-world.oss-cn-beijing.aliyuncs.com/e7130dfd1edf85ccee4a9e73aa0b77dd.jpeg" class="item-right" data-v-6293c55f></div>  <div class="blog-footer flex" data-v-6293c55f><div class="iconfont footer-item icon-Show1" data-v-6293c55f><span class="num" data-v-6293c55f>1997</span></div><div class="iconfont footer-item icon-Guanbi1-copy" data-v-6293c55f><span class="num" data-v-6293c55f>0</span></div><div class="iconfont footer-item icon-Pinglun1" data-v-6293c55f><span class="num" data-v-6293c55f>0</span></div></div></div><div class="blog-item" data-v-6293c55f><div class="blog-header" data-v-6293c55f><img src="https://img-hello-world.oss-cn-beijing.aliyuncs.com/imgs/0d250ec5492da88592013bbd302402ae.jfif" alt="helloworld_34035044" class="img" data-v-6293c55f> <a href="/34035044" target="_blank" class="name" data-v-6293c55f> helloworld_34035044 </a> <div class="dot" data-v-6293c55f>•</div> <div class="time" data-v-6293c55f> 1年前 </div></div> <div class="blog-content" data-v-6293c55f><div class="item-left" data-v-6293c55f><a href="/p/9382788506" target="_blank" title="皕杰报表之UUID" class="title single-ellipsis" data-v-6293c55f> 皕杰报表之UUID </a> <div class="intro multi-ellipsis-2" data-v-6293c55f> 在我们用皕杰报表工具设计填报报表时，如何在新增行里自动增加id呢？能新增整数排序id吗？目前可以在新增行里自动增加id，但只能用uuid函数增加UUID编码，不能新增整数排序id。uuid函数说明：获取一个UUID，可以在填报表中用来创建数据ID语法：uuid()或uuid(sep)参数说明：sep布尔值，生成的uuid中是否包含分隔符''，缺省为 </div></div> </div>  <div class="blog-footer flex" data-v-6293c55f><div class="iconfont footer-item icon-Show1" data-v-6293c55f><span class="num" data-v-6293c55f>785</span></div><div class="iconfont footer-item icon-Guanbi1-copy" data-v-6293c55f><span class="num" data-v-6293c55f>0</span></div><div class="iconfont footer-item icon-Pinglun1" data-v-6293c55f><span class="num" data-v-6293c55f>0</span></div></div></div><div class="blog-item" data-v-6293c55f><div class="blog-header" data-v-6293c55f><img src="https://img-hello-world.oss-cn-beijing.aliyuncs.com/imgs/1bad3e5246214111b0d7a482fc5beec5.jfif" alt="Stella981" class="img" data-v-6293c55f> <a href="/Stella981" target="_blank" class="name" data-v-6293c55f> Stella981 </a> <div class="dot" data-v-6293c55f>•</div> <div class="time" data-v-6293c55f> 2年前 </div></div> <div class="blog-content" data-v-6293c55f><div class="item-left" data-v-6293c55f><a href="/p/1764926747" target="_blank" title="Python之time模块的时间戳、时间字符串格式化与转换 " class="title single-ellipsis" data-v-6293c55f> Python之time模块的时间戳、时间字符串格式化与转换 </a> <div class="intro multi-ellipsis-2" data-v-6293c55f> Python处理时间和时间戳的内置模块就有time，和datetime两个，本文先说time模块。关于时间戳的几个概念时间戳，根据1970年1月1日00:00:00开始按秒计算的偏移量。时间元组（struct_time），包含9个元素。 time.struct_time(tm_y </div></div> </div>  <div class="blog-footer flex" data-v-6293c55f><div class="iconfont footer-item icon-Show1" data-v-6293c55f><span class="num" data-v-6293c55f>980</span></div><div class="iconfont footer-item icon-Guanbi1-copy" data-v-6293c55f><span class="num" data-v-6293c55f>0</span></div><div class="iconfont footer-item icon-Pinglun1" data-v-6293c55f><span class="num" data-v-6293c55f>0</span></div></div></div><div class="blog-item" data-v-6293c55f><div class="blog-header" data-v-6293c55f><img src="https://img-hello-world.oss-cn-beijing.aliyuncs.com/imgs/46847d754406b0102dee7a1f54d14f92.jfif" alt="Wesley13" class="img" data-v-6293c55f> <a href="/Wesley13" target="_blank" class="name" data-v-6293c55f> Wesley13 </a> <div class="dot" data-v-6293c55f>•</div> <div class="time" data-v-6293c55f> 2年前 </div></div> <div class="blog-content" data-v-6293c55f><div class="item-left" data-v-6293c55f><a href="/p/6029686498" target="_blank" title="mysql设置时区 " class="title single-ellipsis" data-v-6293c55f> mysql设置时区 </a> <div class="intro multi-ellipsis-2" data-v-6293c55f> mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败，请联系管理员！');中国在东8区所以加8方法二：selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0 </div></div> </div>  <div class="blog-footer flex" data-v-6293c55f><div class="iconfont footer-item icon-Show1" data-v-6293c55f><span class="num" data-v-6293c55f>928</span></div><div class="iconfont footer-item icon-Guanbi1-copy" data-v-6293c55f><span class="num" data-v-6293c55f>0</span></div><div class="iconfont footer-item icon-Pinglun1" data-v-6293c55f><span class="num" data-v-6293c55f>0</span></div></div></div><div class="blog-item" data-v-6293c55f><div class="blog-header" data-v-6293c55f><img src="https://img-hello-world.oss-cn-beijing.aliyuncs.com/imgs/46847d754406b0102dee7a1f54d14f92.jfif" alt="Wesley13" class="img" data-v-6293c55f> <a href="/Wesley13" target="_blank" class="name" data-v-6293c55f> Wesley13 </a> <div class="dot" data-v-6293c55f>•</div> <div class="time" data-v-6293c55f> 2年前 </div></div> <div class="blog-content" data-v-6293c55f><div class="item-left" data-v-6293c55f><a href="/p/4384340365" target="_blank" title="00：Java简单了解 " class="title single-ellipsis" data-v-6293c55f> 00：Java简单了解 </a> <div class="intro multi-ellipsis-2" data-v-6293c55f> 浅谈Java之概述Java是SUN(StanfordUniversityNetwork)，斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟，已经成为Web应用程序的首选开发语言。Java是简单易学，完全面向对象，安全可靠，与平台无关的编程语言。 </div></div> </div>  <div class="blog-footer flex" data-v-6293c55f><div class="iconfont footer-item icon-Show1" data-v-6293c55f><span class="num" data-v-6293c55f>915</span></div><div class="iconfont footer-item icon-Guanbi1-copy" data-v-6293c55f><span class="num" data-v-6293c55f>0</span></div><div class="iconfont footer-item icon-Pinglun1" data-v-6293c55f><span class="num" data-v-6293c55f>0</span></div></div></div><div class="blog-item" data-v-6293c55f><div class="blog-header" data-v-6293c55f><img src="https://img-hello-world.oss-cn-beijing.aliyuncs.com/imgs/1bad3e5246214111b0d7a482fc5beec5.jfif" alt="Stella981" class="img" data-v-6293c55f> <a href="/Stella981" target="_blank" class="name" data-v-6293c55f> Stella981 </a> <div class="dot" data-v-6293c55f>•</div> <div class="time" data-v-6293c55f> 2年前 </div></div> <div class="blog-content" data-v-6293c55f><div class="item-left" data-v-6293c55f><a href="/p/3395108718" target="_blank" title="Django中Admin中的一些参数配置 " class="title single-ellipsis" data-v-6293c55f> Django中Admin中的一些参数配置 </a> <div class="intro multi-ellipsis-2" data-v-6293c55f> 设置在列表中显示的字段，id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable </div></div> </div>  <div class="blog-footer flex" data-v-6293c55f><div class="iconfont footer-item icon-Show1" data-v-6293c55f><span class="num" data-v-6293c55f>858</span></div><div class="iconfont footer-item icon-Guanbi1-copy" data-v-6293c55f><span class="num" data-v-6293c55f>0</span></div><div class="iconfont footer-item icon-Pinglun1" data-v-6293c55f><span class="num" data-v-6293c55f>0</span></div></div></div><div class="blog-item" data-v-6293c55f><div class="blog-header" data-v-6293c55f><img src="https://img-hello-world.oss-cn-beijing.aliyuncs.com/imgs/46847d754406b0102dee7a1f54d14f92.jfif" alt="Wesley13" class="img" data-v-6293c55f> <a href="/Wesley13" target="_blank" class="name" data-v-6293c55f> Wesley13 </a> <div class="dot" data-v-6293c55f>•</div> <div class="time" data-v-6293c55f> 2年前 </div></div> <div class="blog-content" data-v-6293c55f><div class="item-left" data-v-6293c55f><a href="/p/2102334911" target="_blank" title="MySQL部分从库上面因为大量的临时表tmp_table造成慢查询 " class="title single-ellipsis" data-v-6293c55f> MySQL部分从库上面因为大量的临时表tmp_table造成慢查询 </a> <div class="intro multi-ellipsis-2" data-v-6293c55f> 背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_ </div></div> </div>  <div class="blog-footer flex" data-v-6293c55f><div class="iconfont footer-item icon-Show1" data-v-6293c55f><span class="num" data-v-6293c55f>1123</span></div><div class="iconfont footer-item icon-Guanbi1-copy" data-v-6293c55f><span class="num" data-v-6293c55f>0</span></div><div class="iconfont footer-item icon-Pinglun1" data-v-6293c55f><span class="num" data-v-6293c55f>0</span></div></div></div><div class="blog-item" data-v-6293c55f><div class="blog-header" data-v-6293c55f><img src="https://img-hello-world.oss-cn-beijing.aliyuncs.com/imgs/ff45645a048833b06e967323e7411c91.webp" alt="Python进阶者" class="img" data-v-6293c55f> <a href="/pdcfighting" target="_blank" class="name" data-v-6293c55f> Python进阶者 </a> <div class="dot" data-v-6293c55f>•</div> <div class="time" data-v-6293c55f> 3个月前 </div></div> <div class="blog-content" data-v-6293c55f><div class="item-left" data-v-6293c55f><a href="/p/7920817787" target="_blank" title="Excel中这日期老是出来00：00：00，怎么用Pandas把这个去除" class="title single-ellipsis" data-v-6293c55f> Excel中这日期老是出来00：00：00，怎么用Pandas把这个去除 </a> <div class="intro multi-ellipsis-2" data-v-6293c55f> 大家好，我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下：这日期老是出来00：00：00，怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下：pd.toexcel之前把这 </div></div> <img src="https://img-hello-world.oss-cn-beijing.aliyuncs.com/imgs/aeaded5a375b9d90ad54a2731b017114.png" class="item-right" data-v-6293c55f></div>  <div class="blog-footer flex" data-v-6293c55f><div class="iconfont footer-item icon-Show1" data-v-6293c55f><span class="num" data-v-6293c55f>136</span></div><div class="iconfont footer-item icon-Guanbi1-copy" data-v-6293c55f><span class="num" data-v-6293c55f>0</span></div><div class="iconfont footer-item icon-Pinglun1" data-v-6293c55f><span class="num" data-v-6293c55f>0</span></div></div></div> </div></div></div> <div class="blog-right-container"><div class="personal-info" data-v-af95cca0><div class="base-info" data-v-af95cca0><img src="https://img-hello-world.oss-cn-beijing.aliyuncs.com/imgs/46847d754406b0102dee7a1f54d14f92.jfif" alt="Wesley13" class="avatar" data-v-af95cca0> <div class="info-content" data-v-af95cca0><div onc class="name-level" data-v-af95cca0><div class="name single-ellipsis" data-v-af95cca0> Wesley13 </div> <div class="level-icon level-1" data-v-429e45df data-v-af95cca0> Lv1 </div></div> </div></div> <button type="button" class="follow-btn ant-btn ant-btn-primary ant-btn-background-ghost" data-v-af95cca0><span>关注</span></button> <div class="signature" data-v-af95cca0>最大的安心是自律温柔和爱自己。</div> <div class="article-fans-stars" data-v-af95cca0><div class="item" data-v-af95cca0><div class="label" data-v-af95cca0>文章</div> <div class="value" data-v-af95cca0> 1.2w </div></div><div class="item" data-v-af95cca0><div class="label" data-v-af95cca0>粉丝</div> <div class="value" data-v-af95cca0> 19 </div></div><div class="item" data-v-af95cca0><div class="label" data-v-af95cca0>获赞</div> <div class="value" data-v-af95cca0> 1.7k </div></div></div> <div class="author-social-info" data-v-af95cca0>  </div></div> <div class="sider-box" data-v-377f20d6><h5 class="common-title" data-v-377f20d6>热门文章</h5> <div class="content-box" data-v-377f20d6><div class="hot-article-list" data-v-5fa70b3e><div class="item" data-v-5fa70b3e><a href="/p/2026823042" title="JavPlayer：AI破坏马赛克，大量马赛克破坏版影片流出 " class="abstract multi-ellipsis-2" data-v-5fa70b3e> JavPlayer：AI破坏马赛克，大量马赛克破坏版影片流出 </a></div><div class="item" data-v-5fa70b3e><a href="/p/9442853740" title="8个在线接收手机短信验证码的免费网络服务整理 " class="abstract multi-ellipsis-2" data-v-5fa70b3e> 8个在线接收手机短信验证码的免费网络服务整理 </a></div><div class="item" data-v-5fa70b3e><a href="/p/2494613557" title="IDM 激活破解工具 " class="abstract multi-ellipsis-2" data-v-5fa70b3e> IDM 激活破解工具 </a></div><div class="item" data-v-5fa70b3e><a href="/p/2766033731" title="2020年最新可用的磁力搜索引擎&种子搜索网站，持续整理分享 " class="abstract multi-ellipsis-2" data-v-5fa70b3e> 2020年最新可用的磁力搜索引擎&种子搜索网站，持续整理分享 </a></div><div class="item" data-v-5fa70b3e><a href="/p/1466098846" title="java.net.ConnectException：Connection timed out：connect 出现连接超时的问题？ " class="abstract multi-ellipsis-2" data-v-5fa70b3e> java.net.ConnectException：Connection timed out：connect 出现连接超时的问题？ </a></div></div></div></div></div></div></div> </div></div></div><script>window.__NUXT__=(function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A){return {layout:"default",data:[{}],fetch:{},error:f,state:{showSlideAuth:c,showLogin:c,fromIndex:c,urlConfig:{GET_BLOG_COLLECTION_LIST_URL:j,getAllTag:"\u002Ftag\u002FgetAllTag",CREATE_BLOG_URL:"\u002Fmanage\u002FcreateBlog",PUBLISH_BLOG_URL:"\u002Fmanage\u002FpublishBlog",UPDATE_BLOG_DETAIL:"\u002Fmanage\u002FupdateBlog",GET_BLOG_DETAIL:"\u002Fblog\u002FgetBlogDetail",GET_BLOG_NEWEST_DRAFT:k,UPDATE_CHAPTER_URL:l,GET_CHAPTER_NEWEST_DRAFT:m,PUBLISH_CHAPTER:l,CREATE_BLOG_CATE:"\u002Fcollection\u002Fadd",RENAME_COLLECTION:"\u002Fcollection\u002FrenameCollection",DELETE_COLLECTION:"\u002Fcollection\u002FdeleteCollection",GET_MY_BLOG_LIST_URL:"\u002Fadmin\u002FblogList",FOLLOW_AUTHOR:"\u002Fuser\u002Ffollow",UNFOLLOW_AUTHOR:"\u002Fuser\u002Funfollow",GET_RECOMMEND_BLOG:"\u002Fhome\u002FgetHomeBlogByAction",GET_RECOMMEND_BLOG_BY_CATE:"\u002Fhome\u002FgetHomeBlogListByTag",GET_RECOMMEND_BLOG_BY_TAG:"\u002Fhome\u002FgetBlogListByTag",GET_TAG_LIST:"\u002Fuser\u002FhotWords",GET_CATE_LIST:"\u002Ftag\u002FgetHomeTag",GET_RECOMMEND_AUTHOR:"\u002Fhome\u002FgetRecommendAuthorList",GET_DAILY_ALGORITHM:"\u002Fhome\u002Fdailyalgorithm",LOG_IN:"\u002Faccess\u002Flogin",LOG_OUT:"\u002Faccess\u002FsignOut",CHECK_USER_INFO:"\u002Faccess\u002FcheckUserInfo",REGISTER:"\u002Faccess\u002Fregister",CHANGE_PWD:"\u002Faccess\u002FchangePassword",SEND_CODE:"\u002Faccess\u002FsendCode",ACTION_AUTH:"\u002Faccess\u002FactionAuth",ACTION_AUTH2:"\u002Faccess\u002FactionAuth2",CHECK_USER_AND_BLOG:"\u002Faccess\u002FcheckUserAndBlog",CHECK_TOKEN:"\u002Faccess\u002FcheckToken",SIGN_IN:"\u002Faccess\u002FsignIn",GET_PERSONAL_INFO:"\u002Fuser\u002Fdetail\u002Finfo",GET_PERSONAL_BLOG_LIST:"\u002Fuser\u002Fdetail\u002Fbloglist",FILE_UPLOAD:"\u002Ffile\u002Fupload",DL_AND_UPLOAD:"\u002Ffile\u002FdownloadAndUploadOss",GET_MY_FOLLOW_USER_LIST:"\u002Fadmin\u002FgetMyFollowUserList",GET_MY_FANS_USER_LIST:"\u002Fadmin\u002FgetMyFansUserList",GET_MY_FOLLOW_QUESTION_LIST:"\u002Fadmin\u002FgetMyFollowQuestion",GET_MY_SUBSCIBE_SPECIAL_LIST:"\u002Fadmin\u002FgetMySubscribeSpecialList",TAKE_OFF_BLOG:"\u002Fadmin\u002FtakeOffBlog",TAKE_ON_BLOG:"\u002Fadmin\u002FtakeOnBlog",GET_HOME_RECOMMEND_SPECIAL_LIST:"\u002Fhome\u002FgetRecommendSpecialList",GET_MOST_SPECIAL_COUNT_USER_LIST:"\u002Fspecial\u002FgetSpecialMostUserList",GET_SPECIAL_CATE_LIST_URL:"\u002Fspecial\u002FgetSpecialCateList",GET_SPECIAL_LIST_URL:"\u002Fspecial\u002FgetSpecialList",GET_SPECIAL_LIST_PER_CATEGORY_URL:"\u002Fspecial\u002FgetSpecialListPerCategory",GET_CATEGORY_INFO_BY_ID_URL:"\u002Fhome\u002FgetCategoryInfoById",GET_SPECIAL_COUNT_PER_CATEGORY_URL:"\u002Fspecial\u002FgetSpecialTotalCountPerCategory",GET_SPECIAL_BANNER:"\u002Fspecial\u002FgetBannerList",GET_SPECIAL_DETAIL_CHAPTER_LIST:"\u002Fspecial\u002FgetSpecialSectionList",GET_SPECIAL_DETAIL:"\u002Fspecial\u002FgetMySpecialChapterInfo",GetChapterInfo:"\u002Fspecial\u002FgetSectionDetail",GET_SPECIAL_DETAIL_INFO:"\u002Fadmin\u002FgetSpecialDetail",ADD_CHAPTER_URL:"\u002Fadmin\u002FaddChapter",UPDATE_CHAPTER_INFO:"\u002Fadmin\u002FupdateChapterInfo",UPDATE_CHAPTER_SEQUENCE:"\u002Fadmin\u002FupdateChapterSequence",DELETE_CHAPTER_URL:"\u002Fadmin\u002FdeleteChapter",TAKE_ON_SPECIAL:"\u002Fspecial\u002FpublishSection",TAKE_OFF_SPECIAL:"\u002Fadmin\u002FtakeOffSpecial",RENAME_SPECIAL:"\u002Fadmin\u002FrenameSpecial",GET_SPECIAL_CATE_LIST:"\u002Fadmin\u002FgetSpecialCateList",UPDATE_SPECIAL_INTRO:"\u002Fadmin\u002FupdateSpecialIntro",UPDATE_SPECIAL_INFO:"\u002Fadmin\u002FupdateSpecialCateId",UPDATE_SPECIAL_TITLE:"\u002Fadmin\u002FupdateSpecialTitle",DELETE_SPECIAL:"\u002Fadmin\u002FdeleteSpecial",GET_CHAPTER_COMMENT:"\u002Fcomment\u002FgetChapterCommentList",UPDATE_SPECIALINFO:"\u002Fadmin\u002FupdateSpecialBaseInfo",SUBSCRIBE_SPECIAL:n,UN_SUBSCRIBE_SPECIAL:o,MODIFY_SPECIAL:p,GET_TUTORIAL_BIG_CATEGORY:"\u002Ftutorial\u002FgetTutorialBigCategories",GET_ALL_TUTORIALS:q,GET_CHAPTER_AND_SECTION_BY_PATH:"\u002Ftutorial\u002FgetChapterAndSectionByPath",GET_CONTENT_BY_SECTION_PATH:"\u002Ftutorial\u002FgetSectionContent",GET_TUTORIAL_OVERVIEW:r,GET_UID_BY_PROFILE_PATH:"\u002Fuser\u002FgetUidByProfilePath",GET_USER_DETAIL_USER_INFO:"\u002Fuser\u002Fdetail\u002FuserInfo",GET_SPECIAL_CATEGORY:"\u002Fuser\u002Fdetail\u002FspecialCategory",CREATE_SPECIAL_URL:"\u002Fspecial\u002FcreateSpecial",GET_MY_SPECIAL_LIST_URL:"\u002Fadmin\u002FgetMySpecialList",GET_CHAPTER_LIST_PER_SPECIAL_URL:"\u002Fadmin\u002FgetSpecialChapterList",GET_USER_RELATED_QUESTION_LIST:"\u002Fuser\u002Fdetail\u002FgetUserRelatedQuestionList",Get_BLOG_COLLECT_LIST:"\u002Fuser\u002Fdetail\u002FgetUserBlogCollectList",GET_BLOG_LIST_URL:"\u002Fuc\u002FgetUserBlogList",GET_BLOG_LIST_BY_COLLECT_ID:"\u002Fuser\u002Fdetail\u002FgetCollectBlogList",GET_SPECIAL_LIST_BY_SORT_TYPE:"\u002Fuc\u002FgetUserPublishedSpecialList",GET_USER_BASE_INFO:"\u002Fuc\u002FgetUserInfo",GET_NEWEST_BLOG_LIST:"\u002Fuser\u002Fdetail\u002FgetNewestBlogList",GET_NEWEST_COMMENT_LIST:"\u002Fuser\u002Fdetail\u002FgetNewestCommentList",GET_FAVORITE_BLOG_LIST:"\u002Fuc\u002FgetUserFavoriteBlogList",GET_FOLLOW_USER_LIST:"\u002Fuc\u002FgetFollowList",GET_FOLLOW_USER_FANS:"\u002Fuc\u002FgetFanList",GET_HOT_COMMENTS:"\u002Fuc\u002FgetHotComments",IS_USER_BLOG:"\u002Fuc\u002FisUserBlog",GET_SEARCH_WORD:"\u002Fsearch\u002FsearchWord",GET_QUESTION_COMMON_TAG:"\u002Fquestion\u002FgetHotTagList",GET_QUESTION_LIST:"\u002Fquestion\u002FgetQuestionList",GET_QUESTION_DETAIL:"\u002Fquestion\u002FgetQuestionDetail",UPDATE_QUESTION_INFO:"\u002Fquestion\u002FupdateQuestion",GET_QUESTION_BASE_INFO:"\u002Fquestion\u002FgetQuestionBaseInfo",GET_BLOG_COMMENT_LIST:"\u002Fcomment\u002FgetBlogCommentList",ADD_COMMENT:"\u002Fcomment\u002FaddComment",ADD_REPLY:"\u002Fcomment\u002FaddReply",LIKE_BLOG:"\u002Fblog\u002FzanBlog",FAVORITE_BLOG:"\u002Fblog\u002FfavoriteBlog",GET_USER_LIKE_FAVORITE_INFO:"\u002Fadmin\u002FgetUserAndBlogActionInfo",DAMIT_CHANGE_PWD:"\u002Fadmin\u002FchangePassword",UPDATE_PERSONAL:"\u002Fadmin\u002FmodifyPersonalInfo",SUBMIT_SUGGESTION:"\u002Fsuggestion\u002FsubmitSuggestion",GETALLBLOGID:"\u002Faccess\u002FgetAllBlogId",GETCONTENTBYID:"\u002Faccess\u002FgetContentById",UPDATEHTMLBYID:"\u002Faccess\u002FupdateHtmlById",CHANGE_USER_PWD:s,SEND_USER_SMS:"\u002Faccess\u002FsendSmsCode",GET_WIN_USERS:"\u002Fwin\u002FgetWinUsers",GET_FRIEND_LINKS:"\u002Fhome\u002FgetFriendLinks",GET_SITE_MAP:"\u002Fspider\u002FgetSiteMap",GET_BLOG_BY_TAG_NAME:"\u002Fblog\u002FgetBlogByTagName",GET_BLOG_BY_TAG_ID:"\u002Fsearch\u002FsearchTag",GET_RANDOM_TAGS:"\u002Fblog\u002FgetRandomTags",GET_UPLOAD_SIGNATURE:"\u002Fvod\u002FgetUploadSignature",UPLOAD_MEDIA_INFO:"\u002Fvod\u002FuploadMediaInfo",GET_BLOG_INFO:"\u002Fadmin\u002FgetBlogInfo",GET_HOME_RECOMMEND_TAGS:"\u002Ftag\u002FgetHomeRecommendTags",GET_USER_HOT_BLOG_LIST:"\u002Fuc\u002FgetUserHotBlogList",COMMENT_BLOG:"\u002Fcomment\u002Fcomment",GET_COMMENT_LIST:"\u002Fcomment\u002FgetCommentList",REPLY_COMMENT:"\u002Fcomment\u002FreplyComment",GET_COMMENT_REPLIES:"\u002Fcomment\u002FgetCommentReplies",GET_BACK_IMAGE_LIST:"\u002Fuc\u002FgetBackImageList",UPDATE_BACK_IMAGE:"\u002Fuc\u002FupdateBackImage",GET_MY_SPECIAL_LIST:"\u002Fmanage\u002FgetMySpecialList",GET_SUBCRIBED_SPECLIAL_LIST:"\u002Fmanage\u002FgetMySubscribedSpecialList",GET_MY_SPECIAL_DETAIL:"\u002Fmanage\u002FgetMySpecialDetail",SUBCRIBE_SPECLIAL:n,UNSUBCRIBED_SPECLIAL:o,CREATE_COLLECTION:"\u002Fmanage\u002FcreateCollection",GET_COLLECTION_LIST:j,UPDATE_COLLECTION:"\u002Fmanage\u002FupdateCollection",REMOVE_COLLECTION:"\u002Fmanage\u002FremoveCollection",GET_MY_BLOG_LIST:"\u002Fmanage\u002FgetMyBlogList",GET_FOLLOW_LIST:"\u002Fmanage\u002FgetFollowList",UPDATE_FOLLOW:"\u002Fmanage\u002FupdateFollow",GET_MY_INFO:"\u002Fmanage\u002FgetMyInfo",UPDATE_MY_INFO:"\u002Fmanage\u002FupdateMyInfo",GET_MY_FAVORITE_BLOG_LIST:"\u002Fmanage\u002FgetMyFavoriteBlogList",GET_MY_FAVORITE_LESSON_LIST:"\u002Flesson\u002FfavoriteList",UPDATE_FAVORITE_LESSON:"\u002Flesson\u002Ffavorite",UPDATE_CANCEL_FAVORITE_LESSON:"\u002Flesson\u002FremoveFavorite",GET_RECOMMEND_LESSON_BY_BLOG:"\u002Flesson\u002FrecommendLesson",MODIFY_PASSWORD:s,GET_MY_BLOG_DETAIL:k,GET_NEW_NOTIFICATION_COUNT:"\u002Fmanage\u002FgetNewNotificationCount",GET_NOTIFICATION_LIST:"\u002Fmanage\u002FgetNotificationList",READ_NOTIFICATION:"\u002Fmanage\u002FreadNotification",CREATE_SECTION:"\u002Fspecial\u002FcreateSection",MODIFIY_SECTION_TITLE:"\u002Fspecial\u002FmodifySectionTitle",MODIFIY_SPECIAL_TITLE:p,MODIFIY_SECTION_STATUS:"\u002Fspecial\u002FmodifySectionStatus",PUBLISH_SPECIAL:"\u002Fspecial\u002FpublishSpecial",OFFLINE_SPECIAL:"\u002Fspecial\u002FofflineSpecial",UNPUBLISHED_SPECIAL_DETAIL:"manage\u002FgetMySpecialDetail",UNPUBLISHED_SPECIAL_CHAPTER_DETAIL:m,UPDATE_BLOG_TITLE:"\u002Fmanage\u002FupdateTitle",UPDATE_BLOG_STATUS_PUBLISHED:"\u002Fmanage\u002FupdateBlogStatusPublished",DELETE_BLOG:"\u002Fmanage\u002FdeleteBlog",GET_CATELIST_TUTORIAL:"\u002Ftutorial\u002FgetCateList",GET_TUTORIAL_LIST:q,GET_TUTORIAL_DETAIL:r,GET_CHAPTER_INFO:"\u002Ftutorial\u002FgetChapterInfo",FAVORITE_SECTION:"\u002Fmanage\u002FfavoriteSection",ZAN_SECTION:"\u002Fmanage\u002FzanSection",LESSON_LIST_ALL:"\u002Flesson\u002Flist\u002Fall",LESSON_LIST_MY:"\u002Flesson\u002Flist\u002Fmy",LESSON_LIST_BUY:"\u002Flesson\u002Flist\u002Fbuy",LESSON_LIST_REC:"\u002Flesson\u002Flist\u002Frec",LESSON_CREATE:"\u002Flesson\u002Fcreate",LESSON_DETAIL_EDIT:"\u002Flesson\u002Fdetail\u002Fedit",LESSON_DETAIL:"\u002Flesson\u002Fdetail",LESSON_DELETE:"\u002Flesson\u002Fdelete",LESSON_CATEGORIES:"\u002Flesson\u002Fcategories",LESSON_DIRECTIONS:"\u002Flesson\u002Fdirections",LESSON_STORE:"\u002Flesson\u002Fstore",LESSON_CREATE_CHAPTER:"\u002Flesson\u002Fchapter",LESSON_CHAPTER_VIDEO:"\u002Flesson\u002Fchapter\u002Fvideo",LESSON_CHAPTERS:"\u002Flesson\u002Fchapters",LESSON_CHAPTERS_EDIT:"\u002Flesson\u002Fchapters\u002Fedit",LESSON_VIDEO_ENCRYPT:"\u002Flesson\u002Fvideo\u002Fencrypt",LESSON_VIDEO:"\u002Flesson\u002Fvideo",LESSON_VIDEO_M3U8:"\u002Flesson\u002Fvideo\u002Fm3u8",LESSON_COS_TOKEN:"\u002Flesson\u002Fcos\u002Ftoken",LESSON_NOTE:"\u002Flesson\u002Fnote",LESSON_RESOURCE:"\u002Flesson\u002Fresource",LESSON_LEARN_REPORT:"\u002Flesson\u002Flearn\u002Freport",ADD_STUDY_COUNT:"\u002Flesson\u002FaddStudyCount",WXPAY_NATIVE_PAY:"\u002Fwxpay\u002FnativePay",WXPAY_QUERY_ORDER_STATUS:"\u002Fwxpay\u002FqueryOrderStatus",WXPAY_ORDER:"\u002Fwxpay\u002Forder",WXPAY_ORDERS:"\u002Fwxpay\u002Forders",WXPAY_CANCELORDER:"\u002Fwxpay\u002FcancelOrder"},isLoading:c,authPhone:b,friendLink:[],showSpecial:c,specialData:f,navFixedVisible:c,deviceId:616811843004117600,blackList:[],access:{token:b,userInfo:{}},admin:{collectionList:[],specialList:[],notifyCount:{},curTab:"blog",blogDetail:{}},backstage:{blogList:{},typeCount:{collectCount:a,commentCount:a,count:a,followCount:a,subscribeCount:a,zanCount:a},isShow:c},course:{isCollapase:t},personal:{errorMsg:b,handling:c,visible:c,success:c,isSmsCoding:c,sendCodeSuccess:c,uid:f,userDetailInfo:{},personalBlogList:[],blogCount:a,personalSpecialList:[],specialCount:a,newestBlog:[],newestComment:[],personalFavoriteList:[],favoriteCount:a,personalFollowList:[],followCount:a,personalFansList:[],fansCount:a,hotComment:[],routeParams:{profile:b,pageType:b}},question:{commonTags:[],questionList:[],questionDetail:{}},recommend:{recommendBlog:{data:[]},tagList:[],categoryList:{data:[]},recommendAuthorList:{data:[]},todayAlgorithm:b,blogDetail:{blogInfo:{uuid:"2128405823",title:"ueditor源代码重点难点分析 ",intro:"网上好像几乎没有研究ueditor源码的文章，原因可能是ueditor源码太复杂了，接近浏览器代码和word\u002Fexcel源码。本文分析ueditor源码整体流程逻辑以及重点难点细节。首先，编辑器是如何实现输入的？本人开始始终不得其解，在源码找不到输入事件绑定的处理函数，后来在白云峰同学的提醒下才顿悟，整个iframe网页就相当于是一个\u003Ctextarea",content:"网上好像几乎没有研究ueditor源码的文章，原因可能是ueditor源码太复杂了，接近浏览器代码和word\u002Fexcel源码。本文分析ueditor源码整体流程逻辑以及重点难点细节。\n\n首先，编辑器是如何实现输入的？本人开始始终不得其解，在源码找不到输入事件绑定的处理函数，后来在白云峰同学的提醒下才顿悟，整个iframe网页就相当于是一个\u003Ctextarea\u003E元素：\n\n\u003Cbody class=\"view\" contenteditable=\"true\" spellcheck=\"false\" style=\"overflow-y: hidden; height: 500px; cursor: text;\"\u003E\n\n\u003C\u002Fbody\u003E\n\n页面调用ueditor： \n\u003Cscript id=\"editor\" type=\"text\u002Fplain\" style=\"width:100%;height:500px;\" \u003E\u003C\u002Fscript\u003E \u002F\u002F iframe的container元素 \n　　var editor = UE.getEditor('editor');\n\n多次调用可以多实例运行，每个实例都是单独的，编辑器实例保存在UE实例中，从UE.instants\\[\\]也可以获取到每个编辑器实例，0就是第一个实例，以此类推， \n因此可以不用变量引用编辑器实例： \nUE.getEditor('editor'); \n　　setTimeout(function(){ \n　　　　UE.instants.ueditorInstant0.setContent('\u003Cdiv\u003E欢迎使用编辑器\u003C\u002Fdiv\u003E'); \n　　},1000);\n\n执行ueditor文件之后产生三个全局对象： \nUEDITORUI - 所有工具按钮插件的api \nUE - api入口 \nUEDITOR\\_CONFIG - 配置数据\n\n \n先看ueditor的全局api接口：\n\nwindow.UE = baidu.editor = window.UE || {}; \u002F\u002F UE实例提供ueditor的入口接口，也就是api入口，调用UE的方法才创建真正的编辑器实例 \n \nvar Editor = UE.Editor = function (options) { \u002F\u002F 这是编辑器构造函数\n\n\u002F\\* 尝试异步加载后台配置 \\*\u002F \nme.loadServerConfig(); \u002F\u002F所谓异步加载就是用js构造\u003Ctag src=url加载文件，正常是直接在网页写\u003Ctag src=url 加载文件 \nUE.Editor.prototype.loadServerConfig = function(){ \n\u002F\u002F用ajax请求http:\u002F\u002Flocalhost\u002Fplugins\u002Fueditor\u002Fueditor\u002Fphp\u002Fcontroller.php?action=config&&noCache=1525847581688，返回后台php配置参数，主要是涉及upload的配置参数，其实前端的配置数据可以直接写一个js文件直接从网页写\u003Cscript src=加载。 \n　　element.onload = element.onreadystatechange = function () { \u002F\u002F 这是构造\u003Ctag src=url加载文件之后再通过onload事件触发执行一个回调 \n} \n} \n \nif(!utils.isEmptyObject(UE.I18N)){ \u002F\u002F i18n是语言国际化，就是多语言包 \n\u002F\u002F修改默认的语言类型 \n　　me.options.lang = checkCurLang(UE.I18N); \n　　UE.plugin.load(me); \n　　langReadied(me); \n}else{ \n　　utils.loadFile(document, { \n　　src: me.options.langPath + me.options.lang + \"\u002F\" + me.options.lang + \".js\", \u002F\u002F加载zh-cn.js中英文对照语言包 \n}, function () { \u002F\u002F 这个匿名函数回调会执行一次，具体是在哪一次加载文件时执行的不清楚 \n　　UE.plugin.load(me); \u002F\u002F 这是加载内部插件，执行ueditor文件时会执行UE.plugin.register()注册所有的插件，然后在这里加载所有的插件 \n　　UE.plugin = function(){ \n　　　　var \\_plugins = {}; \n　　　　return { \n　　　　　　register : function(pluginName,fn,oldOptionName,afterDisabled){ \n　　　　　　　　\\_plugins\\[pluginName\\] = { \n　　　　　　　　optionName : oldOptionName || pluginName, \n　　　　　　　　execFn : fn, \n\u002F\u002F当插件被禁用时执行 \n　　　　　　　　afterDisabled : afterDisabled \n　　　　　　　　} \n　　　　　　}, \n　　　　load : function(editor){ \u002F\u002F 这就是load()函数，加载插件，所有的插件在执行ueditor文件时已经注册 \n　　　　　　utils.each(\\_plugins,function(plugin){ \u002F\u002F\\_plugins是执行register方法产生的插件集合 \n　　　　　　　　var \\_export = plugin.execFn.call(editor); \u002F\u002FexecFn是plugin的构造函数，执行构造函数产生plugin object {} \n　　　　　　　　utils.each(\\_export,function(v,k){ \u002F\u002F 针对plugin的每一个属性处理一次，把plugin的方法函数保存到编辑器实例中 \n　　　　　　　　　　switch(k.toLowerCase()){ \n　　　　　　　　　　　　case 'commands': \n　　　　　　　　　　　　　　utils.each(v,function(execFn,execName){ \n　　　　　　　　　　　　　　　　editor.commands\\[execName\\] = execFn \u002F\u002Feditor.commands{}含所有的按钮操作指令 \n　　　　　　　　　　　　　　}); \n　　　　　　　　　　}); \n　　　　　　　　　　utils.each(UE.plugins,function(plugin){ \u002F\u002F 插件好像分两部分有两种写法，这是针对旧写法插件进行处理 \n　　　　　　　　　　　　plugin.call(editor); \u002F\u002F执行插件构造函数 \n　　　　　　　　　　}); \n \n　　　　　　langReadied(me); \n　　　　}); \n　　　　　　\u002F\u002FloadFile代码： \n　　　　　　return function (doc, obj, fn) { \u002F\u002F fn就是传入的匿名函数，用\u003Cscript src=url加载执行js文件之后再执行这个回调函数 \n　　　　　　　　doc.getElementsByTagName(\"head\")\\[0\\].appendChild(element); \u002F\u002F 构造\u003Cscript src=加载执行zh-cn.js文件 \n　　　　　　} \n　　} \n　　UE.instants\\['ueditorInstant' + me.uid\\] = me; \u002F\u002F 如果多实例运行，均存储在UE中，每个实例按id区分，多实例运行可以利用UE.instants\\[id\\]找实例，把每个编辑器实例保存在自己定义的全局对象中也可以 \n}\n\nEditor.prototype = { \n　　render: function (container) { \u002F\u002F container是iframe holder，之前已经构造iframe相关的几个div插入网页，render方法构造iframe代码并且把iframe插入网页生效 \n　　　　var me = this, \n　　　　options = me.options, \u002F\u002F options是实例里面的参数，包含config参数 \n　　　　var html = 'iframe里面的html代码'; \n　　　　container.appendChild(domUtils.createElement(document, 'iframe', { \u002F\u002F 插入iframe，并执行以下js代码 \n　　　　　　editor = window.parent.UE.instants\\['ueditorInstant0'\\]; \u002F\u002F ueditor实例保存在iframe的父窗口也就是当前网页窗口 \n　　　　　　editor.\\_setup(document); \n　　　　})); \n　　}, \n　　\\_setup: function (doc) { \n　　　　doc.body.contentEditable = true; \u002F\u002F iframe html相当于一个input \n　　} \n} \n\n先建立一个UE实例放在全局，入口初始化方法是getEditor。\n\n再看编辑器初始化入口：\n\nUE.getEditor = function (id, opt) { \n　　var editor = instances\\[id\\]; \n　　if (!editor) { \n　　　　editor = instances\\[id\\] = new UE.ui.Editor(opt); \u002F\u002F UE是api入口实例，editor是编辑器实例 \n　　　　editor.render(id); \u002F\u002F执行新的render，构造几个\u002F几层container元素，再执行old render，构造iframe代码插入网页 \n　　} \n　　return editor; \n}; \n \nUE.ui.Editor = function (options) { \n　　var editor = new UE.Editor(options); \u002F\u002F 这是真正的编辑器实例 \n　　var oldRender = editor.render; \u002F\u002F UE.editor的render方法(构造iframe插入网页) \n　　editor.render = function (holder) { \u002F\u002F 重新构造一个render，构造几个容器元素，然后再调old render构造iframe \n　　　　utils.domReady(function () { \u002F\u002F事件触发异步调度执行 \n　　　　　　editor.langIsReady ? renderUI() : editor.addListener(\"langReady\", renderUI); \n　　　　　　　　function renderUI() { \u002F\u002F事件触发异步调度执行 \n　　　　　　　　　　new EditorUI(editor.options); \u002F\u002F 没有接收实例，在其它程序位置不能引用这个实例，在实例的方法中用this引用实例，在事件handler中引用实例(实例“复制”到handler方法中)，这是创建实例后如何使用实例的高级方法 \n　　　　　　　　　　　　function EditorUI(options) { \n　　　　　　　　　　　　　　this.initOptions(options); \n　　　　　　　　　　　　　　　　UIBase.prototype = { \n　　　　　　　　　　　　　　　　　　initOptions:function (options) { \n　　　　　　　　　　　　　　　　　　\u002F\u002F把options复制到EditorUI实例中 \n　　　　　　　　　　　　　　　　　　} \n　　　　　　　　　　　　　　this.initEditorUI(); \n　　　　　　　　　　　　　　　　EditorUI.prototype = { \n　　　　　　　　　　　　　　　　　　initEditorUI:function () { \n　　　　　　　　　　　　　　　　　　　　\u002F\u002F用addeventlistener绑定鼠标操作事件和处理函数 \n　　　　　　　　　　　　　　　　　　} \n　　　　　　　　　　　　　　　　} \n　　　　　　　　　　var newDiv = document.createElement('div'); \u002F\u002F在这里创建div插入网页替换\u003Cscript\u003E元素，并且复制css代码 \n　　　　　　　　　　holder.parentNode.insertBefore(newDiv, holder); \n　　　　　　　　　　newDiv.style.cssText = holder.style.cssText; \n　　　　　　　　　　holder = newDiv; \n　　　　　　　　　　holder.innerHTML = 'xxx'; \n　　　　　　　　　　editor.ui.render(holder); \u002F\u002F重新构造iframe外层html代码以及iframe元素代码，render方法代码如下： \n　　　　　　　　　　　　UIBase.prototype = { \n　　　　　　　　　　　　　　render:function (holder) { \n　　　　　　　　　　　　} \n \n \n　　　　　　　　　　opt.initialFrameHeight = opt.minFrameHeight = holder.offset; \u002F\u002F是在这里设置跟随页面写的height \n　　　　　　　　　　oldRender.call(editor, editor.ui.getDom('iframeholder')); \u002F\u002F再执行oldrender，构造iframe插入网页 \n　　　　　　　　　　editor.fireEvent(\"afteruiready\"); \u002F\u002F 没有on这个事件的，有何用？ \n　　　　　　　　}); \n　　　　　　}; \n　　　　　　return editor; \u002F\u002F如果没有返回语句，产生的实例是new UE.ui.Editor(opt)实例，由于有返回语句，产生的实例是返回的实例new UE.Editor(options)实例 \n　　}\n\n执行ueditor文件时注册所有的插件，执行UE.getEditor()产生new UE.Editor(options)编辑器实例，初始化编辑器，加载插件，绑定鼠标操作事件handler，构造div和iframe。 \nueditor的功能组件以plugin插件形式设计，插件代码是ueditor最主要的功能代码，其功能和复杂程度类似word\u002Fexcel。\n\nueditor就是一个textarea框，输入文字内容，自动产生html元素，插入图片产生img元素，最终产生的数据是html代码串，提交到后台保存到数据库。\n\n正常显示时是显示iframe里面的html网页，预览html代码时，是显示一个与iframe平级的div，隐藏iframe元素节点不显示： \n\u003Cdiv class=\"CodeMirror-scroll cm-s-default\" tabindex=\"-1\" style=\"position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;\"\u003E\n\n插入html代码时，先构造一个div，然后用div.innerHTML=插入的html字符串解析html字符串成为DOM元素对象，再把div.firstChild插入到网页中一个\u003Cp\u003E元素里面 \n生效，比如插入\u003Cdiv\u003Ehello\u003C\u002Fdiv\u003E，显示hello，不会把\u003Cdiv\u003E显示出来。\n\n再看结束编辑获取编辑器内容的代码：\n\ngetContent: function (cmd, fn,notSetCursor,ignoreBlank,formatter) { \n　　var root = UE.htmlparser(me.body.innerHTML,ignoreBlank); \u002F\u002F html -\u003E root -\u003E html 解析处理过程非常复杂 \n　　return root.toHtml(formatter); \n \n　　　　var htmlparser = UE.htmlparser = function (htmlstr,ignoreBlank) { \n \n　　　　　　var re\\_tag = \u002F\u003C(?:(?:\\\\\u002F(\\[^\u003E\\]+)\u003E)|(?:!--(\\[\\\\S|\\\\s\\]\\*?)--\u003E)|(?:(\\[^\\\\s\\\\\u002F\u003C\u003E\\]+)\\\\s\\*((?:(?:\"\\[^\"\\]\\*\")|(?:'\\[^'\\]\\*')|\\[^\"'\u003C\u003E\\])\\*)\\\\\u002F?\u003E))\u002Fg, \u002F\u002Fhtml标签的正则匹配表达式，比如\u003CTD vAlign=top background=..\u002FAAA.JPG\u003E \n \n　　　　　　htmlstr = htmlstr.replace(new RegExp('\\[\\\\\\\\r\\\\\\\\t\\\\\\\\n'+(ignoreBlank?'':' ')+'\\]\\*\u003C\\\\\u002F?(\\\\\\\\w+)\\\\\\\\s\\*(?:\\[^\u003E\\]\\*)\u003E\\[\\\\\\\\r\\\\\\\\t\\\\\\\\n'+(ignoreBlank?'':' ')+'\\]\\*','g'), function(a,b){ \u002F\u002F 正则匹配替换 \n \n　　　　　　toHtml:function (formatter) { \n　　　　　　　　var arr = \\[\\]; \n　　　　　　　　nodeToHtml(this, arr, formatter, 0); \n \n　　　　　　　　　　function nodeToHtml(node, arr, formatter, current) { \n　　　　　　　　　　　　switch (node.type) { \n　　　　　　　　　　　　　　case 'root': \n　　　　　　　　　　　　　　　　for (var i = 0, ci; ci = node.children\\[i++\\];) { \n　　　　　　　　　　　　　　　　　　nodeToHtml(ci, arr, formatter, current) \u002F\u002F 递归子节点 \n \n　　　　　　　　　　　　　　　　　　return arr.join('') \n\n可见获取编辑器的内容就是获取iframe网页的内容body.innerHTML现成的html代码，很简单，但解析处理非常复杂，有内置过滤规则处理，有点类似框架的 \ntemplate\u002Fvnode解析处理，要递归解析处理所有的子节点。\n\n编辑器头部是工具按钮，都是以插件形式实现的，下面以点击“模板”工具按钮为例分析ueditor的工具按钮插件是如何实现的。\n\n点击模板(template)按钮是插入模板，会显示一个弹窗对话框：\n\n\u003Cdiv id=\"edui221\" class=\"edui-dialog edui-for-template edui-default edui-state-centered\" style=\"left: 10px; top: 88px; z-index: 110;\"\u003E\n\n里面是一个iframe加载一个网页： \n\u003Ciframe id=\"edui221\\_iframe\" class=\"%%-iframe\" height=\"100%\" width=\"100%\" frameborder=\"0\" src=\"https:\u002F\u002Fmy.oschina.net\u002Fueditor\u002Fdialogs\u002Ftemplate\u002Ftemplate.html\"\u003E\u003C\u002Fiframe\u003E\n\n这个网页就是一个列表，选择之后关闭弹窗，把选择的内容插入编辑器中。\n\n注意dialog会话弹窗层iframe不在编辑器层iframe里面，而是在当前网页里面，当前网页有几个container容器，其中一个放编辑器iframe，一个放dialog iframe，还有编辑器的头部\u002F底部都是单独的容器，都不在编辑器容器里面。凡是跨iframe都有传递数据问题，因此dialog弹窗也有传递数据问题，后面会分析它如何传递数据。\n\niframe网页会执行internal.js建立环境：\n\ndialog = parent.$EDITORUI\\[window.frameElement.id.replace( \u002F\\_iframe$\u002F, '' )\\]; \u002F\u002F dialog实例是从父网页获取的，含父网页中编辑器实例 \neditor = dialog.editor; \u002F\u002F当前打开dialog的编辑器实例\n\ndialog.onok = function () { \n　　me.execCommand( \"template\", obj ); \u002F\u002F执行template命令， obj.html就是选取的template代码，me是editor实例 \n \n \n　　　　\u002F\u002F重写execCommand命令，用于处理框选时的处理 \n　　　　var oldExecCommand = me.execCommand; \n　　　　me.execCommand = function (cmd, datatat) { \n　　　　　　result = oldExecCommand.apply(me, arguments); \u002F\u002F oldExecCommand代码如下 \n \n　　　　　　　　execCommand: function (cmdName) { \n　　　　　　　　　　result = this.\\_callCmdFn('execCommand', arguments); \n \n　　　　　　　　　　　　\\_callCmdFn: function (fnName, args) { \n　　　　　　　　　　　　　　return cmdFn.apply(this, args); \n \n　　　　　　　　　　　　　　　　UE.plugins\\['template'\\] = function () { \n　　　　　　　　　　　　　　　　　　UE.commands\\['template'\\] = { \n　　　　　　　　　　　　　　　　　　　　execCommand:function (cmd, obj) { \u002F\u002F cmd=template \n　　　　　　　　　　　　　　　　　　　　　　obj.html && this.execCommand(\"inserthtml\", obj.html);\u002F\u002F再次递归editor实例的execCommand，但这次是执行inserthtml命令，会执行到以下代码 \n\nUE.commands\\['inserthtml'\\] = { \n　　execCommand: function (command,html,notNeedFilter){ \u002F\u002F 把选取的template插入编辑器网页 \n　　　　range = me.selection.getRange(); \u002F\u002F 获取编辑器中dialog会话弹窗之前光标选中的区域，也就是template插入的位置 \n \n　　　　　　getRange:function () { \n　　　　　　　　var range = new baidu.editor.dom.Range( me.document ); \u002F\u002F 创建range对象，数据结构与js原生selection对象一样 \n　　　　　　　　var sel = me.getNative(); \u002F\u002F 调window.getSelection()返回点击选取的节点数据，此时已经点击工具按钮，之前点击选取的光标状态已经不在，获取不到点击选取数据，单步看获取的数据是空的，因此要使用之前保存的selection数据。 \n \n　　　　　　　　　　getNative:function () { \n　　　　　　　　　　　　return domUtils.getWindow( doc ).getSelection(); \n　　　　　　　　　　}, \n \n　　　　　　　　if ( this.\\_bakRange && domUtils.inDoc( this.\\_bakRange.startContainer, this.document ) ){ \n　　　　　　　　　　return this.\\_bakRange; \u002F\u002F之前在编辑器点击选取触发执行getNative保存的selection数据，container=text,offset=1(没有意义) \n　　　　　　　　} \n　　　　　　} \n \n　　　\u002F\u002F如果当前位置选中了fillchar要干掉，要不会产生空行 \n　　　if(range.inFillChar()){ \u002F\u002F 插入第一个子节点第一次执行时range是#text填充符 \n　　　　child = range.startContainer; \u002F\u002F 是text节点 \n　　　　if(domUtils.isFillChar(child)){ \u002F\u002F 插入第一个子节点第一次执行时start container是#text填充符 \n　　　　　　range.setStartBefore(child).collapse(true); \u002F\u002F设置container=p，offset=0(#text节点在p中的index)，collapse(折叠)意思是设置end=start，如果选中一段再插入就有start container\u002Fend container问题。 setStartBefore(child)意思就是要插入到child之前，但要获取child在父节点中的offset，插入时在父节点中按offset再获取child，再插入到child之前 \ndomUtils.remove(child); \u002F\u002F 删除#text节点，那么在p节点内部offset=0是br节点 \n\n　　　　}else if(domUtils.isFillChar(child,true)){ \n　　　　　　child.nodeValue = child.nodeValue.replace(fillCharReg,''); \n　　　　　　range.startOffset--; \n　　　　　　range.collapsed && range.collapse(true) \n　　　　} \n　　}\n\n　　while ( child = div.firstChild ) { \u002F\u002F 递归循环div的子节点把div的子节点一个一个插入(div不插入)，如果把div整个插入，就多了div层，其实可以用frag，把frag整个插入即可，但插入第一个子节点时start container是p节点，插入之后要调整start container=body，从第二个子节点开始都是插入body，所以还不能整个一次插入，挺复杂的。 \n \n　　　　if(hadBreak){ \u002F\u002F第一次执行时hadBreak=0，不执行这段，之后再执行时hadBreak=1，会执行这段，hadBreak表示已经切割container元素， \n　　　　　　var p = me.document.createElement('p'); \n　　　　　　while(child && (child.nodeType == 3 || !dtd.$block\\[child.tagName\\])){ \u002F\u002F 如果要插入的节点是#text节点则套一层p，为何？ \n　　　　　　　　nextNode = child.nextSibling; \n　　　　　　　　p.appendChild(child); \u002F\u002Fchild是引用div子节点，那么div子节点插入到p就从div移动到p，div中已经没有child，所以循环n次之后div就变空了 \n　　　　　　　　child = nextNode; \n　　　　　　} \u002F\u002F 如果是文本节点就插入到p元素里面，如果有一批文本节点就循环全部插入到p元素里面，再把p做为child节点 \n　　　　　　if(p.firstChild){ \n　　　　　　　　child = p \u002F\u002F \n　　　　　　} \n　　　　} \u002F\u002F第n次执行时插入的node是内容节点，不会外套一层p，这段不起作用 \n \n　　　　range.insertNode( child ); \u002F\u002F 第一次插入子节点时把node插入到\u003Cp\u003E的\u003Cbr\u003E之前，之后插入到body里面\u003Cp\u003E之前 \n \n　　　　　　insertNode:function (node) { \u002F\u002F 编辑器头尾有空格文本节点，第一次执行时是插入填充节点，第n次执行时是插入内容节点 \n　　　　　　　　var first = node, length = 1; \n　　　　　　　　var start = this.startContainer, \u002F\u002F单步看插入第二个子节点时，是\u003Cbody\u003E，offset是2指向\u003Cp\u003E \n　　　　　　　　offset = this.startOffset; \n　　　　　　　　var nextNode = start.childNodes\\[ offset \\]; \u002F\u002F \u003Cbody\u003E\u003Ch1\u003E\u003C\u002Fh1\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E body\\[2\\]=\u003Cp\u003E \n　　　　　　　　if (nextNode) { \n　　　　　　　　　　start.insertBefore(node, nextNode); \n　　　　　　　　} else { \n　　　　　　　　　　start.appendChild(node); \n　　　　　　　　} \n \n　　　　　　　　return this.setStartBefore(first); \u002F\u002F 第一个子节点插入之后，根据第一个子节点调整插入指针，第一个子节点此时还在p中， \n　　　　　　　　　　　　　　　　　　　　　　　　　　range.startContainer = p \n　　　　　　　　　　　　　　　　　　　　　　　　　　range.startOffset = 0 (node在p中的index) \n \n　　　　　　　　　　　　　　　　　　　　　　　　此时p变为\u003Cp\u003Enode\u003Cbr\u003E\u003C\u002Fp\u003E \n \n　　　　nextNode = child.nextSibling; \u002F\u002F child插入之后的nextsibling就是原来的占位节点br \n \n　　　　if ( !hadBreak && child.nodeType == domUtils.NODE\\_ELEMENT && domUtils.isBlockElm( child ) ){ \u002F\u002F 第一次循环插入\u003Ch1\u003E子节点时hadBreak=0会执行一次 \n \n　　　　　　parent = domUtils.findParent( child,function ( node ){ return domUtils.isBlockElm( node ); } ); \u002F\u002F 递归向上找父节点，parent是p \n　　　　　　domUtils.breakParent( child, pre || tmp ); \u002F\u002F 把p切开变为\u003Cp\u003E\u003C\u002Fp\u003Enode\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E \n　　　　　　\u002F\u002F去掉break后前一个多余的节点 \u003Cp\u003E|\u003C\u002Fp\u003E ==\u003E \u003Cp\u003E\u003C\u002Fp\u003E\u003Cdiv\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E|\u003C\u002Fp\u003E \n　　　　　　var pre = child.previousSibling; \n　　　　　　domUtils.trimWhiteTextNode(pre); \n　　　　　　if(!pre.childNodes.length){ \u002F\u002F 如果node前面的p是空的则删除，变为node\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E \n　　　　　　　　domUtils.remove(pre); \n　　　　　　} \n　　　　　　next.appendChild(me.document.createElement('br')); \u002F\u002F 在p添加一个br \n　　　　　　hadBreak = 1; \u002F\u002F 切割元素问题只在第一次循环插入子节点时处理一次 \n　　　　} \n \n　　　　if(!div.firstChild && next && domUtils.isBlockElm(next)){ \u002F\u002F 如果div变空，就是所有子节点都循环处理完了 \n　　　　　　range.setStart(next,0).collapse(true); \u002F\u002F 把start container设置为插入节点后面的next占位节点(应该是p)，offset=0(p里面的第一个子节点)， \n　　　　　　break; \n　　　　} \n　　　　range.setEndAfter( child ).collapse(); \u002F\u002F关键在这，此时第一个子节点已经插入到\u003Cp\u003E里面，\u003Cp\u003E已经分裂成node\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E，因此node.parentNode=body， \ncontainer变为body，offset是node在body中的index=2。虽然是setendcontainer，但updatecollapse会更新startcontainer=endcontainer，所以实际上就是设置startcontainer=body，一旦第一个子节点插入成功，后续再插入时都是插入到之前插入的node的nextSibling节点p，offset是p在body里面的index，按offset找p节点，把node插入到p之前(insertBefore)。 \n \n}\n\n \ninserthtml命令的函数代码就是把template插入编辑器网页，处理流程逻辑非常复杂深奥，涉及到很细小的细节比如空白换行符处理以及很细微的浏览器兼容性问题。经过长时间细致debug看数据研究源代码，最后发现插入子节点的过程原理如下：\n\n假定回车换行，然后插入模板，把模板插入到当前行位置，这是最简单的情况，回车换行时编辑器会自动产生\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E。\n\n插入div的第一个子节点时是插入到\u003Cp\u003E中，更准确地说是插入到p中的offset=0位置之前，也就是填充节点之前。\n\n插入之后，把\u003Cp\u003E节点分裂成两个\u003Cp\u003E如下所示：\n\n\u003Cp\u003E\u003C\u002Fp\u003Enode\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\n\n然后把空的\u003Cp\u003E节点也删除，就变成了node\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E，之后再插入其它子节点时，是插入到\u003Cbody\u003E中，offset位置是\u003Cp\u003E节点在\u003Cbody\u003E中的index，也就是插入到body中\u003Cp\u003E节点之前，每次插入一个node之后，node的nextSibling就是\u003Cp\u003E节点占位元素。\n\n 这段代码是最复杂的插入程序，插入本来很简单，但编辑器插入非常复杂，因为可以在编辑器点击或选取任何位置区域做为插入位置，那么就复杂了，选取的区域是否要保留？是插入到选取区域的头部还是尾部？如果插入到一个元素的中间，那么元素要被分割成两个元素，而有些元素比如\u003Ca\u003E元素是不能分割的。因此插入处理流程逻辑以及细节非常复杂，还涉及到#text不可见文本节点，我们在开发应用时一般不会涉及到这么细节这么复杂的问题。\n\n下面是insertHtml程序用到的几段函数代码：\n\n根据start container判断当前选区range内容是否占位符： \ninFillChar : function(){ \n　　var start = this.startContainer; \n　　if(this.collapsed && start.nodeType == 3 \n　　　　&& start.nodeValue.replace(new RegExp('^' + domUtils.fillChar),'').length + 1 == start.nodeValue.length \n　　\u002F\u002FdomUtils.fillChar是空格，这个表达式其实意思是找开头是否有空格，那么上述#text文本节点符合这个判断表达式 \n　　){ \n　　　　return true; \n　　} \n　　return false;\n\n判断给定的节点是否是一个“填充”节点： \nisFillChar:function (node,isInStart) { \n　　if(node.nodeType != 3) \n　　　　return false; \n　　var text = node.nodeValue; \n　　if(isInStart){ \n　　　　return new RegExp('^' + domUtils.fillChar).test(text) \u002F\u002F 以空格开头 \n　　} \n　　return !text.replace(new RegExp(domUtils.fillChar,'g'), '').length \u002F\u002F 在字符串找所有的空格去掉 \n \n对于上述#text文本节点，其nodevalue是\"\"，去掉空格之后长度为0，因此判断为填充节点，返回true。\n\n这两个方法都是根据nodetype=3和nodevalue含空格来判断，有何区别？一个是判断range，一个是判断node。\n\n \n如果占位元素是填充节点，就插入到填充节点之前，再删除填充节点，因为如果填充节点是\u003Cbr\u003E，会换行。\n\n将Range开始位置设置到node节点之前: \nsetStartBefore:function (node) { \n　　return this.setStart(node.parentNode, domUtils.getNodeIndex(node)); \u002F\u002F返回修改之后的range \n}, \n \n检测节点node在父节点中的索引位置： \ngetNodeIndex:function (node, ignoreTextNode) { \n　　var preNode = node, \n　　i = 0; \n　　while (preNode = preNode.previousSibling) { \n　　　　if (ignoreTextNode && preNode.nodeType == 3) { \n　　　　　　if(preNode.nodeType != preNode.nextSibling.nodeType ){ \n　　　　　　　　i++; \n　　　　　　} \n　　　　　　continue; \n　　　　} \n　　　　i++; \n　　} \n　　return i; \n　　}, \n \n如果选中一段，再插入，又要保留选中的段，就比较复杂，可以插入到选中段的开头，也可以插入到选中段的尾部，也就是说选中的段可以在插入段的前面或后面。 \n编辑器range含start container和end container，就是选中的段的头尾节点。 \n \ncollapse:function (toStart) { \n　　var me = this; \n　　if (toStart) { \u002F\u002F插入到range的头部 \n　　　　me.endContainer = me.startContainer; \n　　　　me.endOffset = me.startOffset; \n　　} else { \u002F\u002F插入到range的尾部 \n　　　　me.startContainer = me.endContainer; \n　　　　me.startOffset = me.endOffset; \n　　} \n　　me.collapsed = true; \n　　return me; \n \n \n设置Range的开始容器节点和偏移量 \n\\* @method setStart \n\\* @remind 如果给定的节点是元素节点，那么offset指的是其子元素中索引为offset的元素， \n\\* 如果是文本节点，那么offset指的是其文本内容的第offset个字符 \n\\* @remind 如果提供的容器节点是一个不能包含子元素的节点，则该选区的开始容器将被设置 \n\\* 为该节点的父节点，此时，其距离开始容器的偏移量也变成了该节点在其父节点 \n\\* 中的索引 \nsetStart:function (node, offset) { \u002F\u002F node是p，offset是里面子节点的offset，0是第一个子节点，但也可能是node在父元素中的offset \n　　return setEndPoint(true, node, offset, this); \n},\n\nfunction setEndPoint(toStart, node, offset, range) { \n　　\u002F\u002F如果node是自闭合标签要处理 \n　　if (node.nodeType == 1 && (dtd.$empty\\[node.tagName\\] || dtd.$nonChild\\[node.tagName\\])) { \n　　　　offset = domUtils.getNodeIndex(node) + (toStart ? 0 : 1); \n　　　　node = node.parentNode; \n　　} \n　　if (toStart) { \n　　　　range.startContainer = node; \n　　　　range.startOffset = offset; \n　　　　if (!range.endContainer) { \n　　　　　　range.collapse(true); \n　　　　} \n　　} else { \n　　　　range.endContainer = node; \n　　　　range.endOffset = offset; \n　　　　if (!range.startContainer) { \n　　　　　　range.collapse(false); \n　　　　} \n　　} \n　　updateCollapse(range); \n　　return range;\n\n下面研究点击对话框“确定”按钮之后是如何处理的？如何能执行dialog.onok?\n\ndebug看dialog iframe网页代码中“确定”按钮代码是： \n\u003Cdiv id=\"edui223\\_body\" unselectable=\"on\" class=\"edui-button-body edui-default\" onmousedown=\"return $EDITORUI\\["edui223"\\].\\_onMouseDown(event, this);\" onclick=\"return $EDITORUI\\["edui223"\\].\\_onClick(event, this);\"\u003E \n\u003Cdiv class=\"edui-box edui-icon edui-default\"\u003E\u003C\u002Fdiv\u003E \n\u003Cdiv class=\"edui-box edui-label edui-default\"\u003E确认\u003C\u002Fdiv\u003E \n\u003C\u002Fdiv\u003E\n\n点击“确定”按钮是执行$EDITORUI\\["edui223"\\].\\_onClick(event, this)，这段代码是如何产生的？\n\ndialog插件定义代码： \n\u002F\u002F ui\u002Fdialog.js \n(function (){ \n　　Dialog = baidu.editor.ui.Dialog = function (options){ \n　　　　this.initOptions(utils.extend({ \n　　　　　　onok: function (){}, \n　　　　　　oncancel: function (){}, \n　　　　　　onclose: function (t, ok){ \n　　　　　　return ok ? this.onok() : this.oncancel(); \n　　　　}, \n　　},options)); \n　　this.initDialog(); \n}; \nDialog.prototype = { \n　　initDialog: function (){ \n \n　　}, \n　　\\_hide: function (){ \n　　　　wrapNode.style.display = 'none'; \n　　}, \n　　open: function (){ \n　　　　this.render(); \n　　　　this.open(); \n　　}, \n　　close: function (ok){ \n　　　　this.\\_hide(); \n　　} \n\ndebug看工具按钮比如模板按钮是； \n\u003Cdiv id=\"edui225\\_body\" unselectable=\"on\" title=\"模板\" class=\"edui-button-body edui-default\" onmousedown=\"return $EDITORUI\\["edui225"\\].\\_onMouseDown(event, this);\" onclick=\"return $EDITORUI\\["edui225"\\].\\_onClick(event, this);\"\u003E \n\u003Cdiv class=\"edui-box edui-icon edui-default\"\u003E\u003C\u002Fdiv\u003E \n\u003Cdiv class=\"edui-box edui-label edui-default\"\u003E\u003C\u002Fdiv\u003E \n\u003C\u002Fdiv\u003E\n\n按钮html代码是由button对象的代码构造出来的： \nButton = baidu.editor.ui.Button = function (options){} \nButton.prototype = { \n　　getHtmlTpl: function (){ \n　　　　return '\u003Cdiv id=\"##\" class=\"edui-box %%\"\u003E' + \n'\u003Cdiv id=\"##\\_state\" stateful\u003E' + \n'\u003Cdiv class=\"%%-wrap\"\u003E\u003Cdiv id=\"##\\_body\" unselectable=\"on\" ' + (this.title ? 'title=\"' + this.title + '\"' : '') + \n' class=\"%%-body\" onmousedown=\"return $$.\\_onMouseDown(event, this);\" onclick=\"return $$.\\_onClick(event, this);\"\u003E'\n\n加debug看$$就是$EDITORUI\\['edui225'\\]。\n\n$EDITORUI\\['edui225'\\].\\_onClick(event, this)代码是： \n　　\\_onClick: function (){ \n　　　　if (!this.isDisabled()) { \n　　　　　　this.fireEvent('click'); \n　　　　　　\u002F\u002F ueditor自己的事件系统，对应editor.addListener，触发事件就是执行listener \n　　　　　　var EventBase = UE.EventBase = function () {}; \n　　　　　　　　EventBase.prototype = { \u002F\u002F ueditor自己的逻辑事件系统 \n　　　　　　　　　　addListener:function (types, listener) {\n\n　　　　　　　　　　　　\u002F\u002F把listener存储到listeners\\[\\]中 \n　　　　　　　　　　}, \n　　　　　　　　　　fireEvent:function () { \u002F\u002F fireEvent就是到listeners\\[\\]中找listener执行 \n　　　　　　　　　　　　t = listeners\\[k\\].apply(this, arguments); \n　　　　　　　　　　　　r = t.apply(this, arguments); \n　　　　　　　　　　} \n　　　　} \n　　　},\n\n插件绑定了click事件； \nUE.plugins\\['template'\\] = function () { \n　　this.addListener(\"click\", function (type, evt) { \u002F\u002F在template操作过程中并没有执行这个handler \n　　　　var el = evt.target || evt.srcElement, \n　　　　range = this.selection.getRange(); \n　　　　var tnode = domUtils.findParent(el, function (node) { \n　　　　if (node.className && domUtils.hasClass(node, \"ue\\_t\")) { \n　　　　　　return node; \n　　　　} \n　　}, true); \n　　tnode && range.selectNode(tnode).shrinkBoundary().select(); \n});\n\n工具栏按钮点击事件绑定： \nvar btnCmds = \\['undo', 'redo', 'formatmatch', \n'bold', 'italic', 'underline', 'fontborder', 'touppercase', 'tolowercase', \n'strikethrough', 'subscript', 'superscript', 'source', 'indent', 'outdent', \n'blockquote', 'pasteplain', 'pagebreak', \n'selectall', 'print','horizontal', 'removeformat', 'time', 'date', 'unlink', \n'insertparagraphbeforetable', 'insertrow', 'insertcol', 'mergeright', 'mergedown', 'deleterow', \n'deletecol', 'splittorows', 'splittocols', 'splittocells', 'mergecells', 'deletetable', 'drafts'\\]; \n \nfor (var i = 0, ci; ci = btnCmds\\[i++\\];) { \n　　editorui\\[ci\\] = function (cmd) { \n　　　　var ui = new editorui.Button({ \n　　　　　　onclick:function () { \n　　　　　　editor.execCommand(cmd); \n　　　　},\n\n但“模板”按钮不在其中，有dialog的按钮是在这儿定义的：\n\n \nvar dialogBtns = { \nnoOk:\\['searchreplace', 'help', 'spechars', 'webapp','preview'\\], \nok:\\['attachment', 'anchor', 'link', 'insertimage', 'map', 'gmap', 'insertframe', 'wordimage', \n'insertvideo', 'insertframe', 'edittip', 'edittable', 'edittd', 'scrawl', 'template', 'music', 'background', 'charts'\\] \n};\n\n \nvar ui = new editorui.Button({ \n　　onclick:function () { \n　　　　if (dialog) { \n　　　　　　switch (cmd) { \n　　　　　　　　default: \n　　　　　　　　　　dialog.render(); \n \nUIBase.prototype = { \n　　render:function (holder) { \n　　　　holder.appendChild(el); \u002F\u002F构造dialog el插入网页中占位元素（一个固定的浮动块）中 \n　　　　this.postRender(); \n \n　　　　　　postRender: function (){ \n　　　　　　　　this.addListener('show', function (){ \n　　　　　　　　　　me.modalMask.show(this.getDom().style.zIndex - 2); \n　　　　　　　　}); \n　　　　　　　　this.buttons\\[i\\].postRender(); \n \n　　　　　　　　　　postRender: function (){ \n　　　　　　　　　　　　this.Stateful\\_postRender(); \n \n　　　　　　　　　　　　　　Stateful\\_postRender: function (){ \n　　　　　　　　　　　　　　　　if (this.disabled && !this.hasState('disabled')) { \n　　　　　　　　　　　　　　　　　　this.addState('disabled'); \n \n　　　　　　　　　　　　　　　　　　this.setDisabled(this.disabled) \n　　　　　　　　　　　　　　　　}, \n　　　　　　　　　　　　　　} \n　　　　　　　　　　} \n　　　　　　　　dialog.open(); \n \n　　　　　　　　　　open: function (){ \n　　　　　　　　　　　　this.showAtCenter(); \u002F\u002F 执行这个方法显示会话弹窗 \n \n　　　　　　　　　　　　　　showAtCenter: function (){ \n　　　　　　　　　　　　　　　　\u002F\u002F设置定位 \n　　　　　　　　　　　　　　　　this.\\_show(); \n \n　　　　　　　　　　　　　　　　　　\\_show: function (){ \n　　　　　　　　　　　　　　　　　　　　\u002F\u002Fdialog和编辑器两个平级浮动块要比z-index，要高过编辑器的zindxe \n　　　　　　　　　　　　　　　　　　　　this.editor.container.style.zIndex && (this.getDom().style.zIndex = this.editor.container.style.zIndex \\* 1 + 10); \n　　　　　　　　　　　　　　　　　　　　this.fireEvent('show'); \n　　　　　　　　　　　　　　　　　　　　baidu.editor.ui.uiUtils.getFixedLayer().style.zIndex = this.getDom().style.zIndex - 4; \n　　　　　　　　　　　　　　　　　　} \n　　　　　　　　　　　　　　　　} \n　　　　　　　　　　　　　　} \n　　　　　　　　　　　　} \n　　　　　　　　}\n\n下面来分析一下编辑器初始化代码，因为在编辑器点击一下，然后点击模板按钮插入模板，是要插入到之前点击的位置，那么之前在编辑框内点击时编辑器如何获取位置或selection选取区域以及如何保存是个问题。\n\n\\_setup: function (doc) { \n　　me.selection = new dom.Selection(doc); \n　　this.selection.getNative() \n　　this.\\_initEvents(); \n \n　　　　\\_initEvents: function () { \n　　　　　　domUtils.on(doc, \\['click', 'contextmenu', 'mousedown', 'keydown', 'keyup', 'keypress', 'mouseup', 'mouseover', 'mouseout', 'selectstart'\\], me.\\_proxyDomEvent); \n　　　　　　domUtils.on(win, \\['focus', 'blur'\\], me.\\_proxyDomEvent); \n \n　　　　　　　　\\_proxyDomEvent: function (evt) { \n　　　　　　　　　　this.fireEvent(evt.type.replace(\u002F^on\u002F, ''), evt) \n　　　　　　　　} \n \n　　　　　　domUtils.on(doc, \\['mouseup', 'keydown'\\], function (evt) { \n　　　　　　　　me.\\_selectionChange(250, evt); \n \n　　　　　　　　　　\\_selectionChange: function (delay, evt) { \n　　　　　　　　　　　　me.fireEvent('selectionchange', !!evt); \n　　　　　　　　　　} \n　　　　　　} \n \n　　\u002F\u002F编辑器不能为空内容　　if (domUtils.isEmptyNode(me.body)) { __me.body.innerHTML = '\u003Cp\u003E' + (browser.ie ? '' : '\u003Cbr\u002F\u003E') + '\u003C\u002Fp\u003E';__\n\n __}__ 　\u002F\u002F如果要求focus, 就把光标定位到内容开始 \n　　if (options.focus) { \n　　　　setTimeout(function () { \n　　　　　　me.focus(me.options.focusInEnd); \n　　　　　　\u002F\u002F如果自动清除开着，就不需要做selectionchange; \n　　　　　　!me.options.autoClearinitialContent && me.\\_selectionChange(); \n　　　　}, 0); \n　　}从初始化事件代码看，绑定物理事件清清楚楚，对于mouseup事件，是按selectionchange事件去找handler执行，这个selectionchange事件有几十个handler都要执行，因为源码中有几十个editor.addListener('selectionchange',handler)语句， \n就不知道是哪个handler是处理range的，代码在哪里？要在89个函数中查找分析哪个函数是响应点击选取处理range的，难度很大，源代码非常复杂深奥高超。\n\n经过不懈的努力，还好所幸最后终于发现有一个处理mouseup物理事件的handler代码处理了range：\n\nUE.plugins\\['table'\\] = function () { \n　　me.ready(function () { \n　　　　me.addListener(\"mouseup\", mouseUpEvent); \n \n　　　　　　function mouseUpEvent(type, evt) { \n \n　　　　　　range = new dom.Range(me.document); \n　　　　　　range.setStart(target, 0).setCursor(false, true); \n \n　　　　　　me.\\_selectionChange(250, evt); 　\u002F\u002F变化选区 \n　　　　　　　　\\_selectionChange: function (delay, evt) { \n \n　　　　　　　　　　me.selection.cache(); \u002F\u002F 获取选区保存到cache \n \n　　　　　　　　　　　　\u002F\\*\\*缓存当前选区的range和选区的开始节点 \n　　　　　　　　　　　　cache:function () { \n　　　　　　　　　　　　　　this.clear(); \u002F\u002F 先清除历史range再保留最近的range \n　　　　　　　　　　　　　　this.\\_cachedRange = this.getRange(); \n \n　　　　　　　　　　　　　　　　getRange:function () { \n　　　　　　　　　　　　　　　　　　var sel = me.getNative(); \n　　　　　　　　　　　　　　　　　　\u002F\u002F由于已经清除历史range，此刻cache是空的，无cache数据可用，则执行下面代码 \n　　　　　　　　　　　　　　　　　　if ( sel && sel.rangeCount ) { \u002F\u002F根据sel数据设置range数据最后返回range数据 \n　　　　　　　　　　　　　　　　　　　　var firstRange = sel.getRangeAt( 0 ); 　var lastRange = sel.getRangeAt( sel.rangeCount - 1 ); \n　　　　　　　　　　　　　　　　　　　　range.setStart( firstRange.startContainer, firstRange.startOffset ).setEnd( lastRange.endContainer, lastRange.endOffset ); \n　　　　　　　　　　　　　　　　　　　　if ( range.collapsed && domUtils.isBody( range.startContainer ) && !range.startOffset ) { \n　　　　　　　　　　　　　　　　　　　　　　optimze( range ); \n　　　　　　　　　　　　　　　　　　　　} \n　　　　　　　　　　　　　　　　　　　　return this.\\_bakRange = range; \n　　　　　　　　　　　　　　　　　　}\n\n因此，在编辑框内点击或选取时，是执行mouseUpEvent处理range，获取和保存当前点击位置或选取的区域，之后再插入模板时要获取插入位置，就是从cache取这个保存的range数据，插入模板时不可能再调用getRange()获取点击位置或选取区域，因为点击工具按钮之后，之前在编辑框内的点击或选取的光标状态已经改变不存在了。\n\n下面看几个ueditor源码中的正则匹配表达式，学习一下正则：\n\nvar re\\_tag = \u002F\u003C(?:(?:\\\\\u002F(\\[^\u003E\\]+)\u003E)|(?:!--(\\[\\\\S|\\\\s\\]\\*?)--\u003E)|(?:(\\[^\\\\s\\\\\u002F\u003C\u003E\\]+)\\\\s\\*((?:(?:\"\\[^\"\\]\\*\")|(?:'\\[^'\\]\\*')|\\[^\"'\u003C\u003E\\])\\*)\\\\\u002F?\u003E))\u002Fg,\n\n匹配以下html标签写法： \n\u003C\u002Fxxx\u003E \u002F\u002F比如\u003C\u002Fbr\u003E \n\u003C!--xxx--\u003E \n\u003Cxxx \"xxx\" \u002F\u003E \n\u003Cxxx 'xxx' \u002F\u003E \n\u003Cxxx xxx \u002F\u003E\n\nre\\_attr = \u002F(\\[\\\\w\\\\-:.\\]+)(?:(?:\\\\s\\*=\\\\s\\*(?:(?:\"(\\[^\"\\]\\*)\")|(?:'(\\[^'\\]\\*)')|(\\[^\\\\s\u003E\\]+)))|(?=\\\\s|$))\u002Fg;\n\n匹配以下html标签属性写法： \nxxx:xxx-xxx.xxx = \"xxx\" \nxxx = 'xxx' \nxxx = xxx \nxxx\n\n是不是晕？ ?:可以忽略，就好看一点了。\n\n源码中运用正则替换修改字符串的例子：\n\nhtmlstr = htmlstr.replace(new RegExp('\\[\\\\\\\\r\\\\\\\\t\\\\\\\\n'+(ignoreBlank?'':' ')+'\\]\\*\u003C\\\\\u002F?(\\\\\\\\w+)\\\\\\\\s\\*(?:\\[^\u003E\\]\\*)\u003E\\[\\\\\\\\r\\\\\\\\t\\\\\\\\n'+(ignoreBlank?'':' ')+'\\]\\*','g'), function(a,b){ \n以 \\\\n \u003Cdiv \u003Exxx\u003C\u002Fdiv \u003E \\\\n 为例，匹配到两次，第一次匹配 \\\\n \u003Cdiv\u003E，第二次匹配 \u003C\u002Fdiv\u003E \\\\n，调用function两次，a参数就是匹配的串，b参数是匹配的串里面的子匹配串 \n(\\\\\\\\w+)文字符串，就是div，replace方法里面如果写function，function返回的就是替换内容。\n\nreturn a.replace(new RegExp('^\\[\\\\\\\\r\\\\\\\\n'+(ignoreBlank?'':' ')+'\\]+'),'').replace(new RegExp('\\[\\\\\\\\r\\\\\\\\n'+(ignoreBlank?'':' ')+'\\]+$'),''); \n按pattern找到串之后去掉头尾的换行符返回做为替换内容，结果就是把源字符串中标签头尾的换行符去掉，返回修改之后的字符串。\n\n本文到这里差不多就结束了，ueditor的工具按钮都以plugin插件方式定义，机制都一样，只是功能不同，本文不再一一分析，本文只以插入模板这个工具按钮为例进行了重点分析，其它插件应该都是类似的。\n\n通过源代码分析学习，本人感觉ueditor是学习网页元素处理的顶峰，而前端框架是学习用对象编程技术实现组件机制和语义化表达式解析的顶峰，webuploader则是学习模块化编程的典范，只不过模块化编程现在已经被放弃了被webpack取代了。\n\n本人水平有限，文中错误之处欢迎大家指正和交流。",html:"\u003Cp\u003E网上好像几乎没有研究ueditor源码的文章，原因可能是ueditor源码太复杂了，接近浏览器代码和word\u002Fexcel源码。本文分析ueditor源码整体流程逻辑以及重点难点细节。\u003C\u002Fp\u003E\n\u003Cp\u003E首先，编辑器是如何实现输入的？本人开始始终不得其解，在源码找不到输入事件绑定的处理函数，后来在白云峰同学的提醒下才顿悟，整个iframe网页就相当于是一个\u003Ctextarea\u003E元素：\u003C\u002Fp\u003E\n\u003Cbody class=\"view\" contenteditable=\"true\" spellcheck=\"false\" style=\"overflow-y: hidden; height: 500px; cursor: text;\"\u003E\n\n\u003C\u002Fbody\u003E\n\n\u003Cp\u003E页面调用ueditor： \u003C\u002Fp\u003E\n\u003Cscript id=\"editor\" type=\"text\u002Fplain\" style=\"width:100%;height:500px;\" \u003E\u003C\u002Fscript\u003E \u002F\u002F iframe的container元素 \n\u003Cp\u003E　　var editor = UE.getEditor('editor');\u003C\u002Fp\u003E\n\u003Cp\u003E多次调用可以多实例运行，每个实例都是单独的，编辑器实例保存在UE实例中，从UE.instants[]也可以获取到每个编辑器实例，0就是第一个实例，以此类推，\u003Cbr\u003E因此可以不用变量引用编辑器实例：\u003Cbr\u003EUE.getEditor('editor');\u003Cbr\u003E　　setTimeout(function(){\u003Cbr\u003E　　　　UE.instants.ueditorInstant0.setContent('\u003Cdiv\u003E欢迎使用编辑器\u003C\u002Fdiv\u003E');\u003Cbr\u003E　　},1000);\u003C\u002Fp\u003E\n\u003Cp\u003E执行ueditor文件之后产生三个全局对象：\u003Cbr\u003EUEDITORUI - 所有工具按钮插件的api\u003Cbr\u003EUE - api入口\u003Cbr\u003EUEDITOR_CONFIG - 配置数据\u003C\u002Fp\u003E\n\u003Cp\u003E先看ueditor的全局api接口：\u003C\u002Fp\u003E\n\u003Cp\u003Ewindow.UE = baidu.editor = window.UE || {}; \u002F\u002F UE实例提供ueditor的入口接口，也就是api入口，调用UE的方法才创建真正的编辑器实例 \u003C\u002Fp\u003E\n\u003Cp\u003Evar Editor = UE.Editor = function (options) { \u002F\u002F 这是编辑器构造函数\u003C\u002Fp\u003E\n\u003Cp\u003E\u002F* 尝试异步加载后台配置 *\u002F\u003Cbr\u003Eme.loadServerConfig(); \u002F\u002F所谓异步加载就是用js构造<tag src=url加载文件，正常是直接在网页写<tag src=url 加载文件\u003Cbr\u003EUE.Editor.prototype.loadServerConfig = function(){\u003Cbr\u003E\u002F\u002F用ajax请求\u003Ca href=\"http:\u002F\u002Flocalhost\u002Fplugins\u002Fueditor\u002Fueditor\u002Fphp\u002Fcontroller.php?action=config&&noCache=1525847581688%EF%BC%8C%E8%BF%94%E5%9B%9E%E5%90%8E%E5%8F%B0php%E9%85%8D%E7%BD%AE%E5%8F%82%E6%95%B0%EF%BC%8C%E4%B8%BB%E8%A6%81%E6%98%AF%E6%B6%89%E5%8F%8Aupload%E7%9A%84%E9%85%8D%E7%BD%AE%E5%8F%82%E6%95%B0%EF%BC%8C%E5%85%B6%E5%AE%9E%E5%89%8D%E7%AB%AF%E7%9A%84%E9%85%8D%E7%BD%AE%E6%95%B0%E6%8D%AE%E5%8F%AF%E4%BB%A5%E7%9B%B4%E6%8E%A5%E5%86%99%E4%B8%80%E4%B8%AAjs%E6%96%87%E4%BB%B6%E7%9B%B4%E6%8E%A5%E4%BB%8E%E7%BD%91%E9%A1%B5%E5%86%99\"\u003Ehttp:\u002F\u002Flocalhost\u002Fplugins\u002Fueditor\u002Fueditor\u002Fphp\u002Fcontroller.php?action=config&&noCache=1525847581688，返回后台php配置参数，主要是涉及upload的配置参数，其实前端的配置数据可以直接写一个js文件直接从网页写\u003C\u002Fa\u003E<script src=加载。\u003Cbr\u003E　　element.onload = element.onreadystatechange = function () { \u002F\u002F 这是构造<tag src=url加载文件之后再通过onload事件触发执行一个回调\u003Cbr\u003E}\u003Cbr\u003E} \u003C\u002Fp\u003E\n\u003Cp\u003Eif(!utils.isEmptyObject(UE.I18N)){ \u002F\u002F i18n是语言国际化，就是多语言包\u003Cbr\u003E\u002F\u002F修改默认的语言类型\u003Cbr\u003E　　me.options.lang = checkCurLang(UE.I18N);\u003Cbr\u003E　　UE.plugin.load(me);\u003Cbr\u003E　　langReadied(me);\u003Cbr\u003E}else{\u003Cbr\u003E　　utils.loadFile(document, {\u003Cbr\u003E　　src: me.options.langPath + me.options.lang + "\u002F" + me.options.lang + ".js", \u002F\u002F加载zh-cn.js中英文对照语言包\u003Cbr\u003E}, function () { \u002F\u002F 这个匿名函数回调会执行一次，具体是在哪一次加载文件时执行的不清楚\u003Cbr\u003E　　UE.plugin.load(me); \u002F\u002F 这是加载内部插件，执行ueditor文件时会执行UE.plugin.register()注册所有的插件，然后在这里加载所有的插件\u003Cbr\u003E　　UE.plugin = function(){\u003Cbr\u003E　　　　var _plugins = {};\u003Cbr\u003E　　　　return {\u003Cbr\u003E　　　　　　register : function(pluginName,fn,oldOptionName,afterDisabled){\u003Cbr\u003E　　　　　　　　_plugins[pluginName] = {\u003Cbr\u003E　　　　　　　　optionName : oldOptionName || pluginName,\u003Cbr\u003E　　　　　　　　execFn : fn,\u003Cbr\u003E\u002F\u002F当插件被禁用时执行\u003Cbr\u003E　　　　　　　　afterDisabled : afterDisabled\u003Cbr\u003E　　　　　　　　}\u003Cbr\u003E　　　　　　},\u003Cbr\u003E　　　　load : function(editor){ \u002F\u002F 这就是load()函数，加载插件，所有的插件在执行ueditor文件时已经注册\u003Cbr\u003E　　　　　　utils.each(_plugins,function(plugin){ \u002F\u002F_plugins是执行register方法产生的插件集合\u003Cbr\u003E　　　　　　　　var _export = plugin.execFn.call(editor); \u002F\u002FexecFn是plugin的构造函数，执行构造函数产生plugin object {}\u003Cbr\u003E　　　　　　　　utils.each(_export,function(v,k){ \u002F\u002F 针对plugin的每一个属性处理一次，把plugin的方法函数保存到编辑器实例中\u003Cbr\u003E　　　　　　　　　　switch(k.toLowerCase()){\u003Cbr\u003E　　　　　　　　　　　　case 'commands':\u003Cbr\u003E　　　　　　　　　　　　　　utils.each(v,function(execFn,execName){\u003Cbr\u003E　　　　　　　　　　　　　　　　editor.commands[execName] = execFn \u002F\u002Feditor.commands{}含所有的按钮操作指令\u003Cbr\u003E　　　　　　　　　　　　　　});\u003Cbr\u003E　　　　　　　　　　});\u003Cbr\u003E　　　　　　　　　　utils.each(UE.plugins,function(plugin){ \u002F\u002F 插件好像分两部分有两种写法，这是针对旧写法插件进行处理\u003Cbr\u003E　　　　　　　　　　　　plugin.call(editor); \u002F\u002F执行插件构造函数\u003Cbr\u003E　　　　　　　　　　}); \u003C\u002Fp\u003E\n\u003Cp\u003E　　　　　　langReadied(me);\u003Cbr\u003E　　　　});\u003Cbr\u003E　　　　　　\u002F\u002FloadFile代码：\u003Cbr\u003E　　　　　　return function (doc, obj, fn) { \u002F\u002F fn就是传入的匿名函数，用<script src=url加载执行js文件之后再执行这个回调函数\u003Cbr\u003E　　　　　　　　doc.getElementsByTagName("head")[0].appendChild(element); \u002F\u002F 构造<script src=加载执行zh-cn.js文件\u003Cbr\u003E　　　　　　}\u003Cbr\u003E　　}\u003Cbr\u003E　　UE.instants['ueditorInstant' + me.uid] = me; \u002F\u002F 如果多实例运行，均存储在UE中，每个实例按id区分，多实例运行可以利用UE.instants[id]找实例，把每个编辑器实例保存在自己定义的全局对象中也可以\u003Cbr\u003E}\u003C\u002Fp\u003E\n\u003Cp\u003EEditor.prototype = {\u003Cbr\u003E　　render: function (container) { \u002F\u002F container是iframe holder，之前已经构造iframe相关的几个div插入网页，render方法构造iframe代码并且把iframe插入网页生效\u003Cbr\u003E　　　　var me = this,\u003Cbr\u003E　　　　options = me.options, \u002F\u002F options是实例里面的参数，包含config参数\u003Cbr\u003E　　　　var html = 'iframe里面的html代码';\u003Cbr\u003E　　　　container.appendChild(domUtils.createElement(document, 'iframe', { \u002F\u002F 插入iframe，并执行以下js代码\u003Cbr\u003E　　　　　　editor = window.parent.UE.instants['ueditorInstant0']; \u002F\u002F ueditor实例保存在iframe的父窗口也就是当前网页窗口\u003Cbr\u003E　　　　　　editor._setup(document);\u003Cbr\u003E　　　　}));\u003Cbr\u003E　　},\u003Cbr\u003E　　_setup: function (doc) {\u003Cbr\u003E　　　　doc.body.contentEditable = true; \u002F\u002F iframe html相当于一个input\u003Cbr\u003E　　}\u003Cbr\u003E} \u003C\u002Fp\u003E\n\u003Cp\u003E先建立一个UE实例放在全局，入口初始化方法是getEditor。\u003C\u002Fp\u003E\n\u003Cp\u003E再看编辑器初始化入口：\u003C\u002Fp\u003E\n\u003Cp\u003EUE.getEditor = function (id, opt) {\u003Cbr\u003E　　var editor = instances[id];\u003Cbr\u003E　　if (!editor) {\u003Cbr\u003E　　　　editor = instances[id] = new UE.ui.Editor(opt); \u002F\u002F UE是api入口实例，editor是编辑器实例\u003Cbr\u003E　　　　editor.render(id); \u002F\u002F执行新的render，构造几个\u002F几层container元素，再执行old render，构造iframe代码插入网页\u003Cbr\u003E　　}\u003Cbr\u003E　　return editor;\u003Cbr\u003E}; \u003C\u002Fp\u003E\n\u003Cp\u003EUE.ui.Editor = function (options) {\u003Cbr\u003E　　var editor = new UE.Editor(options); \u002F\u002F 这是真正的编辑器实例\u003Cbr\u003E　　var oldRender = editor.render; \u002F\u002F UE.editor的render方法(构造iframe插入网页)\u003Cbr\u003E　　editor.render = function (holder) { \u002F\u002F 重新构造一个render，构造几个容器元素，然后再调old render构造iframe\u003Cbr\u003E　　　　utils.domReady(function () { \u002F\u002F事件触发异步调度执行\u003Cbr\u003E　　　　　　editor.langIsReady ? renderUI() : editor.addListener("langReady", renderUI);\u003Cbr\u003E　　　　　　　　function renderUI() { \u002F\u002F事件触发异步调度执行\u003Cbr\u003E　　　　　　　　　　new EditorUI(editor.options); \u002F\u002F 没有接收实例，在其它程序位置不能引用这个实例，在实例的方法中用this引用实例，在事件handler中引用实例(实例“复制”到handler方法中)，这是创建实例后如何使用实例的高级方法\u003Cbr\u003E　　　　　　　　　　　　function EditorUI(options) {\u003Cbr\u003E　　　　　　　　　　　　　　this.initOptions(options);\u003Cbr\u003E　　　　　　　　　　　　　　　　UIBase.prototype = {\u003Cbr\u003E　　　　　　　　　　　　　　　　　　initOptions:function (options) {\u003Cbr\u003E　　　　　　　　　　　　　　　　　　\u002F\u002F把options复制到EditorUI实例中\u003Cbr\u003E　　　　　　　　　　　　　　　　　　}\u003Cbr\u003E　　　　　　　　　　　　　　this.initEditorUI();\u003Cbr\u003E　　　　　　　　　　　　　　　　EditorUI.prototype = {\u003Cbr\u003E　　　　　　　　　　　　　　　　　　initEditorUI:function () {\u003Cbr\u003E　　　　　　　　　　　　　　　　　　　　\u002F\u002F用addeventlistener绑定鼠标操作事件和处理函数\u003Cbr\u003E　　　　　　　　　　　　　　　　　　}\u003Cbr\u003E　　　　　　　　　　　　　　　　}\u003Cbr\u003E　　　　　　　　　　var newDiv = document.createElement('div'); \u002F\u002F在这里创建div插入网页替换\u003Cscript\u003E元素，并且复制css代码\u003Cbr\u003E　　　　　　　　　　holder.parentNode.insertBefore(newDiv, holder);\u003Cbr\u003E　　　　　　　　　　newDiv.style.cssText = holder.style.cssText;\u003Cbr\u003E　　　　　　　　　　holder = newDiv;\u003Cbr\u003E　　　　　　　　　　holder.innerHTML = 'xxx';\u003Cbr\u003E　　　　　　　　　　editor.ui.render(holder); \u002F\u002F重新构造iframe外层html代码以及iframe元素代码，render方法代码如下：\u003Cbr\u003E　　　　　　　　　　　　UIBase.prototype = {\u003Cbr\u003E　　　　　　　　　　　　　　render:function (holder) {\u003Cbr\u003E　　　　　　　　　　　　} \u003C\u002Fp\u003E\n\u003Cp\u003E　　　　　　　　　　opt.initialFrameHeight = opt.minFrameHeight = holder.offset; \u002F\u002F是在这里设置跟随页面写的height\u003Cbr\u003E　　　　　　　　　　oldRender.call(editor, editor.ui.getDom('iframeholder')); \u002F\u002F再执行oldrender，构造iframe插入网页\u003Cbr\u003E　　　　　　　　　　editor.fireEvent(\"afteruiready\"); \u002F\u002F 没有on这个事件的，有何用？\u003Cbr\u003E　　　　　　　　});\u003Cbr\u003E　　　　　　};\u003Cbr\u003E　　　　　　return editor; \u002F\u002F如果没有返回语句，产生的实例是new UE.ui.Editor(opt)实例，由于有返回语句，产生的实例是返回的实例new UE.Editor(options)实例\u003Cbr\u003E　　}\u003C\u002Fp\u003E\n\u003Cp\u003E执行ueditor文件时注册所有的插件，执行UE.getEditor()产生new UE.Editor(options)编辑器实例，初始化编辑器，加载插件，绑定鼠标操作事件handler，构造div和iframe。\u003Cbr\u003Eueditor的功能组件以plugin插件形式设计，插件代码是ueditor最主要的功能代码，其功能和复杂程度类似word\u002Fexcel。\u003C\u002Fp\u003E\n\u003Cp\u003Eueditor就是一个textarea框，输入文字内容，自动产生html元素，插入图片产生img元素，最终产生的数据是html代码串，提交到后台保存到数据库。\u003C\u002Fp\u003E\n\u003Cp\u003E正常显示时是显示iframe里面的html网页，预览html代码时，是显示一个与iframe平级的div，隐藏iframe元素节点不显示： \u003C\u002Fp\u003E\n\u003Cdiv class=\"CodeMirror-scroll cm-s-default\" tabindex=\"-1\" style=\"position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;\"\u003E\n\n\u003Cp\u003E插入html代码时，先构造一个div，然后用div.innerHTML=插入的html字符串解析html字符串成为DOM元素对象，再把div.firstChild插入到网页中一个\u003Cp\u003E元素里面\u003Cbr\u003E生效，比如插入\u003Cdiv\u003Ehello\u003C\u002Fdiv\u003E，显示hello，不会把\u003Cdiv\u003E显示出来。\u003C\u002Fp\u003E\n\u003Cp\u003E再看结束编辑获取编辑器内容的代码：\u003C\u002Fp\u003E\n\u003Cp\u003EgetContent: function (cmd, fn,notSetCursor,ignoreBlank,formatter) {\u003Cbr\u003E　　var root = UE.htmlparser(me.body.innerHTML,ignoreBlank); \u002F\u002F html -\u003E root -\u003E html 解析处理过程非常复杂\u003Cbr\u003E　　return root.toHtml(formatter); \u003C\u002Fp\u003E\n\u003Cp\u003E　　　　var htmlparser = UE.htmlparser = function (htmlstr,ignoreBlank) { \u003C\u002Fp\u003E\n\u003Cp\u003E　　　　　　var re_tag = \u002F\u003C(?:(?:\\\u002F([^\u003E]+)\u003E)|(?:!--([\\S|\\s]*?)--\u003E)|(?:([^\\s\\\u002F\u003C\u003E]+)\\s*((?:(?:\"[^\"]*\")|(?:'[^']*')|[^\"'\u003C\u003E])*)\\\u002F?\u003E))\u002Fg, \u002F\u002Fhtml标签的正则匹配表达式，比如\u003CTD vAlign=top background=..\u002FAAA.JPG\u003E \u003C\u002Fp\u003E\n\u003Cp\u003E　　　　　　htmlstr = htmlstr.replace(new RegExp('[\\\\r\\\\t\\\\n'+(ignoreBlank?'':' ')+']*\u003C\\\u002F?(\\\\w+)\\\\s*(?:[^\u003E]*)\u003E[\\\\r\\\\t\\\\n'+(ignoreBlank?'':' ')+']*','g'), function(a,b){ \u002F\u002F 正则匹配替换 \u003C\u002Fp\u003E\n\u003Cp\u003E　　　　　　toHtml:function (formatter) {\u003Cbr\u003E　　　　　　　　var arr = [];\u003Cbr\u003E　　　　　　　　nodeToHtml(this, arr, formatter, 0); \u003C\u002Fp\u003E\n\u003Cp\u003E　　　　　　　　　　function nodeToHtml(node, arr, formatter, current) {\u003Cbr\u003E　　　　　　　　　　　　switch (node.type) {\u003Cbr\u003E　　　　　　　　　　　　　　case 'root':\u003Cbr\u003E　　　　　　　　　　　　　　　　for (var i = 0, ci; ci = node.children[i++];) {\u003Cbr\u003E　　　　　　　　　　　　　　　　　　nodeToHtml(ci, arr, formatter, current) \u002F\u002F 递归子节点 \u003C\u002Fp\u003E\n\u003Cp\u003E　　　　　　　　　　　　　　　　　　return arr.join('') \u003C\u002Fp\u003E\n\u003Cp\u003E可见获取编辑器的内容就是获取iframe网页的内容body.innerHTML现成的html代码，很简单，但解析处理非常复杂，有内置过滤规则处理，有点类似框架的\u003Cbr\u003Etemplate\u002Fvnode解析处理，要递归解析处理所有的子节点。\u003C\u002Fp\u003E\n\u003Cp\u003E编辑器头部是工具按钮，都是以插件形式实现的，下面以点击“模板”工具按钮为例分析ueditor的工具按钮插件是如何实现的。\u003C\u002Fp\u003E\n\u003Cp\u003E点击模板(template)按钮是插入模板，会显示一个弹窗对话框：\u003C\u002Fp\u003E\n\u003Cdiv id=\"edui221\" class=\"edui-dialog edui-for-template edui-default edui-state-centered\" style=\"left: 10px; top: 88px; z-index: 110;\"\u003E\n\n\u003Cp\u003E里面是一个iframe加载一个网页： \u003C\u002Fp\u003E\n\u003Ciframe id=\"edui221\\_iframe\" class=\"%%-iframe\" height=\"100%\" width=\"100%\" frameborder=\"0\" src=\"https:\u002F\u002Fmy.oschina.net\u002Fueditor\u002Fdialogs\u002Ftemplate\u002Ftemplate.html\"\u003E\u003C\u002Fiframe\u003E\n\n\u003Cp\u003E这个网页就是一个列表，选择之后关闭弹窗，把选择的内容插入编辑器中。\u003C\u002Fp\u003E\n\u003Cp\u003E注意dialog会话弹窗层iframe不在编辑器层iframe里面，而是在当前网页里面，当前网页有几个container容器，其中一个放编辑器iframe，一个放dialog iframe，还有编辑器的头部\u002F底部都是单独的容器，都不在编辑器容器里面。凡是跨iframe都有传递数据问题，因此dialog弹窗也有传递数据问题，后面会分析它如何传递数据。\u003C\u002Fp\u003E\n\u003Cp\u003Eiframe网页会执行internal.js建立环境：\u003C\u002Fp\u003E\n\u003Cp\u003Edialog = parent.$EDITORUI[window.frameElement.id.replace( \u002F_iframe$\u002F, '' )]; \u002F\u002F dialog实例是从父网页获取的，含父网页中编辑器实例\u003Cbr\u003Eeditor = dialog.editor; \u002F\u002F当前打开dialog的编辑器实例\u003C\u002Fp\u003E\n\u003Cp\u003Edialog.onok = function () {\u003Cbr\u003E　　me.execCommand( \"template\", obj ); \u002F\u002F执行template命令， obj.html就是选取的template代码，me是editor实例 \u003C\u002Fp\u003E\n\u003Cp\u003E　　　　\u002F\u002F重写execCommand命令，用于处理框选时的处理\u003Cbr\u003E　　　　var oldExecCommand = me.execCommand;\u003Cbr\u003E　　　　me.execCommand = function (cmd, datatat) {\u003Cbr\u003E　　　　　　result = oldExecCommand.apply(me, arguments); \u002F\u002F oldExecCommand代码如下 \u003C\u002Fp\u003E\n\u003Cp\u003E　　　　　　　　execCommand: function (cmdName) {\u003Cbr\u003E　　　　　　　　　　result = this._callCmdFn('execCommand', arguments); \u003C\u002Fp\u003E\n\u003Cp\u003E　　　　　　　　　　　　_callCmdFn: function (fnName, args) {\u003Cbr\u003E　　　　　　　　　　　　　　return cmdFn.apply(this, args); \u003C\u002Fp\u003E\n\u003Cp\u003E　　　　　　　　　　　　　　　　UE.plugins['template'] = function () {\u003Cbr\u003E　　　　　　　　　　　　　　　　　　UE.commands['template'] = {\u003Cbr\u003E　　　　　　　　　　　　　　　　　　　　execCommand:function (cmd, obj) { \u002F\u002F cmd=template\u003Cbr\u003E　　　　　　　　　　　　　　　　　　　　　　obj.html && this.execCommand(\"inserthtml\", obj.html);\u002F\u002F再次递归editor实例的execCommand，但这次是执行inserthtml命令，会执行到以下代码 \u003C\u002Fp\u003E\n\u003Cp\u003EUE.commands['inserthtml'] = {\u003Cbr\u003E　　execCommand: function (command,html,notNeedFilter){ \u002F\u002F 把选取的template插入编辑器网页\u003Cbr\u003E　　　　range = me.selection.getRange(); \u002F\u002F 获取编辑器中dialog会话弹窗之前光标选中的区域，也就是template插入的位置 \u003C\u002Fp\u003E\n\u003Cp\u003E　　　　　　getRange:function () {\u003Cbr\u003E　　　　　　　　var range = new baidu.editor.dom.Range( me.document ); \u002F\u002F 创建range对象，数据结构与js原生selection对象一样\u003Cbr\u003E　　　　　　　　var sel = me.getNative(); \u002F\u002F 调window.getSelection()返回点击选取的节点数据，此时已经点击工具按钮，之前点击选取的光标状态已经不在，获取不到点击选取数据，单步看获取的数据是空的，因此要使用之前保存的selection数据。 \u003C\u002Fp\u003E\n\u003Cp\u003E　　　　　　　　　　getNative:function () {\u003Cbr\u003E　　　　　　　　　　　　return domUtils.getWindow( doc ).getSelection();\u003Cbr\u003E　　　　　　　　　　}, \u003C\u002Fp\u003E\n\u003Cp\u003E　　　　　　　　if ( this._bakRange && domUtils.inDoc( this._bakRange.startContainer, this.document ) ){\u003Cbr\u003E　　　　　　　　　　return this._bakRange; \u002F\u002F之前在编辑器点击选取触发执行getNative保存的selection数据，container=text,offset=1(没有意义)\u003Cbr\u003E　　　　　　　　}\u003Cbr\u003E　　　　　　} \u003C\u002Fp\u003E\n\u003Cp\u003E　　　\u002F\u002F如果当前位置选中了fillchar要干掉，要不会产生空行\u003Cbr\u003E　　　if(range.inFillChar()){ \u002F\u002F 插入第一个子节点第一次执行时range是#text填充符\u003Cbr\u003E　　　　child = range.startContainer; \u002F\u002F 是text节点\u003Cbr\u003E　　　　if(domUtils.isFillChar(child)){ \u002F\u002F 插入第一个子节点第一次执行时start container是#text填充符\u003Cbr\u003E　　　　　　range.setStartBefore(child).collapse(true); \u002F\u002F设置container=p，offset=0(#text节点在p中的index)，collapse(折叠)意思是设置end=start，如果选中一段再插入就有start container\u002Fend container问题。 setStartBefore(child)意思就是要插入到child之前，但要获取child在父节点中的offset，插入时在父节点中按offset再获取child，再插入到child之前\u003Cbr\u003EdomUtils.remove(child); \u002F\u002F 删除#text节点，那么在p节点内部offset=0是br节点 \u003C\u002Fp\u003E\n\u003Cp\u003E　　　　}else if(domUtils.isFillChar(child,true)){\u003Cbr\u003E　　　　　　child.nodeValue = child.nodeValue.replace(fillCharReg,'');\u003Cbr\u003E　　　　　　range.startOffset--;\u003Cbr\u003E　　　　　　range.collapsed && range.collapse(true)\u003Cbr\u003E　　　　}\u003Cbr\u003E　　}\u003C\u002Fp\u003E\n\u003Cp\u003E　　while ( child = div.firstChild ) { \u002F\u002F 递归循环div的子节点把div的子节点一个一个插入(div不插入)，如果把div整个插入，就多了div层，其实可以用frag，把frag整个插入即可，但插入第一个子节点时start container是p节点，插入之后要调整start container=body，从第二个子节点开始都是插入body，所以还不能整个一次插入，挺复杂的。 \u003C\u002Fp\u003E\n\u003Cp\u003E　　　　if(hadBreak){ \u002F\u002F第一次执行时hadBreak=0，不执行这段，之后再执行时hadBreak=1，会执行这段，hadBreak表示已经切割container元素，\u003Cbr\u003E　　　　　　var p = me.document.createElement('p');\u003Cbr\u003E　　　　　　while(child && (child.nodeType == 3 || !dtd.$block[child.tagName])){ \u002F\u002F 如果要插入的节点是#text节点则套一层p，为何？\u003Cbr\u003E　　　　　　　　nextNode = child.nextSibling;\u003Cbr\u003E　　　　　　　　p.appendChild(child); \u002F\u002Fchild是引用div子节点，那么div子节点插入到p就从div移动到p，div中已经没有child，所以循环n次之后div就变空了\u003Cbr\u003E　　　　　　　　child = nextNode;\u003Cbr\u003E　　　　　　} \u002F\u002F 如果是文本节点就插入到p元素里面，如果有一批文本节点就循环全部插入到p元素里面，再把p做为child节点\u003Cbr\u003E　　　　　　if(p.firstChild){\u003Cbr\u003E　　　　　　　　child = p \u002F\u002F\u003Cbr\u003E　　　　　　}\u003Cbr\u003E　　　　} \u002F\u002F第n次执行时插入的node是内容节点，不会外套一层p，这段不起作用 \u003C\u002Fp\u003E\n\u003Cp\u003E　　　　range.insertNode( child ); \u002F\u002F 第一次插入子节点时把node插入到\u003Cp\u003E的\u003Cbr\u003E之前，之后插入到body里面\u003Cp\u003E之前 \u003C\u002Fp\u003E\n\u003Cp\u003E　　　　　　insertNode:function (node) { \u002F\u002F 编辑器头尾有空格文本节点，第一次执行时是插入填充节点，第n次执行时是插入内容节点\u003Cbr\u003E　　　　　　　　var first = node, length = 1;\u003Cbr\u003E　　　　　　　　var start = this.startContainer, \u002F\u002F单步看插入第二个子节点时，是\u003Cbody\u003E，offset是2指向\u003Cp\u003E\u003Cbr\u003E　　　　　　　　offset = this.startOffset;\u003Cbr\u003E　　　　　　　　var nextNode = start.childNodes[ offset ]; \u002F\u002F \u003Cbody\u003E\u003Ch1\u003E\u003C\u002Fh1\u003E\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E body[2]=\u003Cp\u003E\u003Cbr\u003E　　　　　　　　if (nextNode) {\u003Cbr\u003E　　　　　　　　　　start.insertBefore(node, nextNode);\u003Cbr\u003E　　　　　　　　} else {\u003Cbr\u003E　　　　　　　　　　start.appendChild(node);\u003Cbr\u003E　　　　　　　　} \u003C\u002Fp\u003E\n\u003Cp\u003E　　　　　　　　return this.setStartBefore(first); \u002F\u002F 第一个子节点插入之后，根据第一个子节点调整插入指针，第一个子节点此时还在p中，\u003Cbr\u003E　　　　　　　　　　　　　　　　　　　　　　　　　　range.startContainer = p\u003Cbr\u003E　　　　　　　　　　　　　　　　　　　　　　　　　　range.startOffset = 0 (node在p中的index) \u003C\u002Fp\u003E\n\u003Cp\u003E　　　　　　　　　　　　　　　　　　　　　　　　此时p变为\u003Cp\u003Enode\u003Cbr\u003E\u003C\u002Fp\u003E \u003C\u002Fp\u003E\n\u003Cp\u003E　　　　nextNode = child.nextSibling; \u002F\u002F child插入之后的nextsibling就是原来的占位节点br \u003C\u002Fp\u003E\n\u003Cp\u003E　　　　if ( !hadBreak && child.nodeType == domUtils.NODE_ELEMENT && domUtils.isBlockElm( child ) ){ \u002F\u002F 第一次循环插入\u003Ch1\u003E子节点时hadBreak=0会执行一次 \u003C\u002Fp\u003E\n\u003Cp\u003E　　　　　　parent = domUtils.findParent( child,function ( node ){ return domUtils.isBlockElm( node ); } ); \u002F\u002F 递归向上找父节点，parent是p\u003Cbr\u003E　　　　　　domUtils.breakParent( child, pre || tmp ); \u002F\u002F 把p切开变为\u003Cp\u003E\u003C\u002Fp\u003Enode\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cbr\u003E　　　　　　\u002F\u002F去掉break后前一个多余的节点 \u003Cp\u003E|\u003C\u002Fp\u003E ==\u003E \u003Cp\u003E\u003C\u002Fp\u003E\u003Cdiv\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E|\u003C\u002Fp\u003E\u003Cbr\u003E　　　　　　var pre = child.previousSibling;\u003Cbr\u003E　　　　　　domUtils.trimWhiteTextNode(pre);\u003Cbr\u003E　　　　　　if(!pre.childNodes.length){ \u002F\u002F 如果node前面的p是空的则删除，变为node\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cbr\u003E　　　　　　　　domUtils.remove(pre);\u003Cbr\u003E　　　　　　}\u003Cbr\u003E　　　　　　next.appendChild(me.document.createElement('br')); \u002F\u002F 在p添加一个br\u003Cbr\u003E　　　　　　hadBreak = 1; \u002F\u002F 切割元素问题只在第一次循环插入子节点时处理一次\u003Cbr\u003E　　　　} \u003C\u002Fp\u003E\n\u003Cp\u003E　　　　if(!div.firstChild && next && domUtils.isBlockElm(next)){ \u002F\u002F 如果div变空，就是所有子节点都循环处理完了\u003Cbr\u003E　　　　　　range.setStart(next,0).collapse(true); \u002F\u002F 把start container设置为插入节点后面的next占位节点(应该是p)，offset=0(p里面的第一个子节点)，\u003Cbr\u003E　　　　　　break;\u003Cbr\u003E　　　　}\u003Cbr\u003E　　　　range.setEndAfter( child ).collapse(); \u002F\u002F关键在这，此时第一个子节点已经插入到\u003Cp\u003E里面，\u003Cp\u003E已经分裂成node\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E，因此node.parentNode=body，\u003Cbr\u003Econtainer变为body，offset是node在body中的index=2。虽然是setendcontainer，但updatecollapse会更新startcontainer=endcontainer，所以实际上就是设置startcontainer=body，一旦第一个子节点插入成功，后续再插入时都是插入到之前插入的node的nextSibling节点p，offset是p在body里面的index，按offset找p节点，把node插入到p之前(insertBefore)。 \u003C\u002Fp\u003E\n\u003Cp\u003E}\u003C\u002Fp\u003E\n\u003Cp\u003Einserthtml命令的函数代码就是把template插入编辑器网页，处理流程逻辑非常复杂深奥，涉及到很细小的细节比如空白换行符处理以及很细微的浏览器兼容性问题。经过长时间细致debug看数据研究源代码，最后发现插入子节点的过程原理如下：\u003C\u002Fp\u003E\n\u003Cp\u003E假定回车换行，然后插入模板，把模板插入到当前行位置，这是最简单的情况，回车换行时编辑器会自动产生\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E。\u003C\u002Fp\u003E\n\u003Cp\u003E插入div的第一个子节点时是插入到\u003Cp\u003E中，更准确地说是插入到p中的offset=0位置之前，也就是填充节点之前。\u003C\u002Fp\u003E\n\u003Cp\u003E插入之后，把\u003Cp\u003E节点分裂成两个\u003Cp\u003E如下所示：\u003C\u002Fp\u003E\n\u003Cp\u003E\u003C\u002Fp\u003Enode\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\n\n\u003Cp\u003E然后把空的\u003Cp\u003E节点也删除，就变成了node\u003Cp\u003E\u003Cbr\u003E\u003C\u002Fp\u003E，之后再插入其它子节点时，是插入到\u003Cbody\u003E中，offset位置是\u003Cp\u003E节点在\u003Cbody\u003E中的index，也就是插入到body中\u003Cp\u003E节点之前，每次插入一个node之后，node的nextSibling就是\u003Cp\u003E节点占位元素。\u003C\u002Fp\u003E\n\u003Cp\u003E 这段代码是最复杂的插入程序，插入本来很简单，但编辑器插入非常复杂，因为可以在编辑器点击或选取任何位置区域做为插入位置，那么就复杂了，选取的区域是否要保留？是插入到选取区域的头部还是尾部？如果插入到一个元素的中间，那么元素要被分割成两个元素，而有些元素比如\u003Ca\u003E元素是不能分割的。因此插入处理流程逻辑以及细节非常复杂，还涉及到#text不可见文本节点，我们在开发应用时一般不会涉及到这么细节这么复杂的问题。\u003C\u002Fp\u003E\n\u003Cp\u003E下面是insertHtml程序用到的几段函数代码：\u003C\u002Fp\u003E\n\u003Cp\u003E根据start container判断当前选区range内容是否占位符：\u003Cbr\u003EinFillChar : function(){\u003Cbr\u003E　　var start = this.startContainer;\u003Cbr\u003E　　if(this.collapsed && start.nodeType == 3\u003Cbr\u003E　　　　&& start.nodeValue.replace(new RegExp('^' + domUtils.fillChar),'').length + 1 == start.nodeValue.length\u003Cbr\u003E　　\u002F\u002FdomUtils.fillChar是空格，这个表达式其实意思是找开头是否有空格，那么上述#text文本节点符合这个判断表达式\u003Cbr\u003E　　){\u003Cbr\u003E　　　　return true;\u003Cbr\u003E　　}\u003Cbr\u003E　　return false;\u003C\u002Fp\u003E\n\u003Cp\u003E判断给定的节点是否是一个“填充”节点：\u003Cbr\u003EisFillChar:function (node,isInStart) {\u003Cbr\u003E　　if(node.nodeType != 3)\u003Cbr\u003E　　　　return false;\u003Cbr\u003E　　var text = node.nodeValue;\u003Cbr\u003E　　if(isInStart){\u003Cbr\u003E　　　　return new RegExp('^' + domUtils.fillChar).test(text) \u002F\u002F 以空格开头\u003Cbr\u003E　　}\u003Cbr\u003E　　return !text.replace(new RegExp(domUtils.fillChar,'g'), '').length \u002F\u002F 在字符串找所有的空格去掉 \u003C\u002Fp\u003E\n\u003Cp\u003E对于上述#text文本节点，其nodevalue是\"\"，去掉空格之后长度为0，因此判断为填充节点，返回true。\u003C\u002Fp\u003E\n\u003Cp\u003E这两个方法都是根据nodetype=3和nodevalue含空格来判断，有何区别？一个是判断range，一个是判断node。\u003C\u002Fp\u003E\n\u003Cp\u003E如果占位元素是填充节点，就插入到填充节点之前，再删除填充节点，因为如果填充节点是\u003Cbr\u003E，会换行。\u003C\u002Fp\u003E\n\u003Cp\u003E将Range开始位置设置到node节点之前:\u003Cbr\u003EsetStartBefore:function (node) {\u003Cbr\u003E　　return this.setStart(node.parentNode, domUtils.getNodeIndex(node)); \u002F\u002F返回修改之后的range\u003Cbr\u003E}, \u003C\u002Fp\u003E\n\u003Cp\u003E检测节点node在父节点中的索引位置：\u003Cbr\u003EgetNodeIndex:function (node, ignoreTextNode) {\u003Cbr\u003E　　var preNode = node,\u003Cbr\u003E　　i = 0;\u003Cbr\u003E　　while (preNode = preNode.previousSibling) {\u003Cbr\u003E　　　　if (ignoreTextNode && preNode.nodeType == 3) {\u003Cbr\u003E　　　　　　if(preNode.nodeType != preNode.nextSibling.nodeType ){\u003Cbr\u003E　　　　　　　　i++;\u003Cbr\u003E　　　　　　}\u003Cbr\u003E　　　　　　continue;\u003Cbr\u003E　　　　}\u003Cbr\u003E　　　　i++;\u003Cbr\u003E　　}\u003Cbr\u003E　　return i;\u003Cbr\u003E　　}, \u003C\u002Fp\u003E\n\u003Cp\u003E如果选中一段，再插入，又要保留选中的段，就比较复杂，可以插入到选中段的开头，也可以插入到选中段的尾部，也就是说选中的段可以在插入段的前面或后面。\u003Cbr\u003E编辑器range含start container和end container，就是选中的段的头尾节点。 \u003C\u002Fp\u003E\n\u003Cp\u003Ecollapse:function (toStart) {\u003Cbr\u003E　　var me = this;\u003Cbr\u003E　　if (toStart) { \u002F\u002F插入到range的头部\u003Cbr\u003E　　　　me.endContainer = me.startContainer;\u003Cbr\u003E　　　　me.endOffset = me.startOffset;\u003Cbr\u003E　　} else { \u002F\u002F插入到range的尾部\u003Cbr\u003E　　　　me.startContainer = me.endContainer;\u003Cbr\u003E　　　　me.startOffset = me.endOffset;\u003Cbr\u003E　　}\u003Cbr\u003E　　me.collapsed = true;\u003Cbr\u003E　　return me; \u003C\u002Fp\u003E\n\u003Cp\u003E设置Range的开始容器节点和偏移量\u003Cbr\u003E* @method setStart\u003Cbr\u003E* @remind 如果给定的节点是元素节点，那么offset指的是其子元素中索引为offset的元素，\u003Cbr\u003E* 如果是文本节点，那么offset指的是其文本内容的第offset个字符\u003Cbr\u003E* @remind 如果提供的容器节点是一个不能包含子元素的节点，则该选区的开始容器将被设置\u003Cbr\u003E* 为该节点的父节点，此时，其距离开始容器的偏移量也变成了该节点在其父节点\u003Cbr\u003E* 中的索引\u003Cbr\u003EsetStart:function (node, offset) { \u002F\u002F node是p，offset是里面子节点的offset，0是第一个子节点，但也可能是node在父元素中的offset\u003Cbr\u003E　　return setEndPoint(true, node, offset, this);\u003Cbr\u003E},\u003C\u002Fp\u003E\n\u003Cp\u003Efunction setEndPoint(toStart, node, offset, range) {\u003Cbr\u003E　　\u002F\u002F如果node是自闭合标签要处理\u003Cbr\u003E　　if (node.nodeType == 1 && (dtd.$empty[node.tagName] || dtd.$nonChild[node.tagName])) {\u003Cbr\u003E　　　　offset = domUtils.getNodeIndex(node) + (toStart ? 0 : 1);\u003Cbr\u003E　　　　node = node.parentNode;\u003Cbr\u003E　　}\u003Cbr\u003E　　if (toStart) {\u003Cbr\u003E　　　　range.startContainer = node;\u003Cbr\u003E　　　　range.startOffset = offset;\u003Cbr\u003E　　　　if (!range.endContainer) {\u003Cbr\u003E　　　　　　range.collapse(true);\u003Cbr\u003E　　　　}\u003Cbr\u003E　　} else {\u003Cbr\u003E　　　　range.endContainer = node;\u003Cbr\u003E　　　　range.endOffset = offset;\u003Cbr\u003E　　　　if (!range.startContainer) {\u003Cbr\u003E　　　　　　range.collapse(false);\u003Cbr\u003E　　　　}\u003Cbr\u003E　　}\u003Cbr\u003E　　updateCollapse(range);\u003Cbr\u003E　　return range;\u003C\u002Fp\u003E\n\u003Cp\u003E下面研究点击对话框“确定”按钮之后是如何处理的？如何能执行dialog.onok?\u003C\u002Fp\u003E\n\u003Cp\u003Edebug看dialog iframe网页代码中“确定”按钮代码是： \u003C\u002Fp\u003E\n\u003Cdiv id=\"edui223\\_body\" unselectable=\"on\" class=\"edui-button-body edui-default\" onmousedown=\"return $EDITORUI\\["edui223"\\].\\_onMouseDown(event, this);\" onclick=\"return $EDITORUI\\["edui223"\\].\\_onClick(event, this);\"\u003E \n\u003Cdiv class=\"edui-box edui-icon edui-default\"\u003E\u003C\u002Fdiv\u003E \n\u003Cdiv class=\"edui-box edui-label edui-default\"\u003E确认\u003C\u002Fdiv\u003E \n\u003C\u002Fdiv\u003E\n\n\u003Cp\u003E点击“确定”按钮是执行$EDITORUI["edui223"]._onClick(event, this)，这段代码是如何产生的？\u003C\u002Fp\u003E\n\u003Cp\u003Edialog插件定义代码：\u003Cbr\u003E\u002F\u002F ui\u002Fdialog.js\u003Cbr\u003E(function (){\u003Cbr\u003E　　Dialog = baidu.editor.ui.Dialog = function (options){\u003Cbr\u003E　　　　this.initOptions(utils.extend({\u003Cbr\u003E　　　　　　onok: function (){},\u003Cbr\u003E　　　　　　oncancel: function (){},\u003Cbr\u003E　　　　　　onclose: function (t, ok){\u003Cbr\u003E　　　　　　return ok ? this.onok() : this.oncancel();\u003Cbr\u003E　　　　},\u003Cbr\u003E　　},options));\u003Cbr\u003E　　this.initDialog();\u003Cbr\u003E};\u003Cbr\u003EDialog.prototype = {\u003Cbr\u003E　　initDialog: function (){ \u003C\u002Fp\u003E\n\u003Cp\u003E　　},\u003Cbr\u003E　　_hide: function (){\u003Cbr\u003E　　　　wrapNode.style.display = 'none';\u003Cbr\u003E　　},\u003Cbr\u003E　　open: function (){\u003Cbr\u003E　　　　this.render();\u003Cbr\u003E　　　　this.open();\u003Cbr\u003E　　},\u003Cbr\u003E　　close: function (ok){\u003Cbr\u003E　　　　this._hide();\u003Cbr\u003E　　} \u003C\u002Fp\u003E\n\u003Cp\u003Edebug看工具按钮比如模板按钮是； \u003C\u002Fp\u003E\n\u003Cdiv id=\"edui225\\_body\" unselectable=\"on\" title=\"模板\" class=\"edui-button-body edui-default\" onmousedown=\"return $EDITORUI\\["edui225"\\].\\_onMouseDown(event, this);\" onclick=\"return $EDITORUI\\["edui225"\\].\\_onClick(event, this);\"\u003E \n\u003Cdiv class=\"edui-box edui-icon edui-default\"\u003E\u003C\u002Fdiv\u003E \n\u003Cdiv class=\"edui-box edui-label edui-default\"\u003E\u003C\u002Fdiv\u003E \n\u003C\u002Fdiv\u003E\n\n\u003Cp\u003E按钮html代码是由button对象的代码构造出来的：\u003Cbr\u003EButton = baidu.editor.ui.Button = function (options){}\u003Cbr\u003EButton.prototype = {\u003Cbr\u003E　　getHtmlTpl: function (){\u003Cbr\u003E　　　　return '\u003Cdiv id=\"##\" class=\"edui-box %%\"\u003E' +\u003Cbr\u003E'\u003Cdiv id=\"##\\_state\" stateful\u003E' +\u003Cbr\u003E'\u003Cdiv class=\"%%-wrap\"\u003E\u003Cdiv id=\"##_body\" unselectable=\"on\" ' + (this.title ? 'title=\"' + this.title + '\"' : '') +\u003Cbr\u003E' class=\"%%-body\" onmousedown=\"return $$._onMouseDown(event, this);\" onclick=\"return $$._onClick(event, this);\"\u003E'\u003C\u002Fp\u003E\n\u003Cp\u003E加debug看$$就是$EDITORUI['edui225']。\u003C\u002Fp\u003E\n\u003Cp\u003E$EDITORUI['edui225']._onClick(event, this)代码是：\u003Cbr\u003E　　_onClick: function (){\u003Cbr\u003E　　　　if (!this.isDisabled()) {\u003Cbr\u003E　　　　　　this.fireEvent('click');\u003Cbr\u003E　　　　　　\u002F\u002F ueditor自己的事件系统，对应editor.addListener，触发事件就是执行listener\u003Cbr\u003E　　　　　　var EventBase = UE.EventBase = function () {};\u003Cbr\u003E　　　　　　　　EventBase.prototype = { \u002F\u002F ueditor自己的逻辑事件系统\u003Cbr\u003E　　　　　　　　　　addListener:function (types, listener) {\u003C\u002Fp\u003E\n\u003Cp\u003E　　　　　　　　　　　　\u002F\u002F把listener存储到listeners[]中\u003Cbr\u003E　　　　　　　　　　},\u003Cbr\u003E　　　　　　　　　　fireEvent:function () { \u002F\u002F fireEvent就是到listeners[]中找listener执行\u003Cbr\u003E　　　　　　　　　　　　t = listeners[k].apply(this, arguments);\u003Cbr\u003E　　　　　　　　　　　　r = t.apply(this, arguments);\u003Cbr\u003E　　　　　　　　　　}\u003Cbr\u003E　　　　}\u003Cbr\u003E　　　},\u003C\u002Fp\u003E\n\u003Cp\u003E插件绑定了click事件；\u003Cbr\u003EUE.plugins['template'] = function () {\u003Cbr\u003E　　this.addListener(\"click\", function (type, evt) { \u002F\u002F在template操作过程中并没有执行这个handler\u003Cbr\u003E　　　　var el = evt.target || evt.srcElement,\u003Cbr\u003E　　　　range = this.selection.getRange();\u003Cbr\u003E　　　　var tnode = domUtils.findParent(el, function (node) {\u003Cbr\u003E　　　　if (node.className && domUtils.hasClass(node, \"ue_t\")) {\u003Cbr\u003E　　　　　　return node;\u003Cbr\u003E　　　　}\u003Cbr\u003E　　}, true);\u003Cbr\u003E　　tnode && range.selectNode(tnode).shrinkBoundary().select();\u003Cbr\u003E});\u003C\u002Fp\u003E\n\u003Cp\u003E工具栏按钮点击事件绑定：\u003Cbr\u003Evar btnCmds = ['undo', 'redo', 'formatmatch',\u003Cbr\u003E'bold', 'italic', 'underline', 'fontborder', 'touppercase', 'tolowercase',\u003Cbr\u003E'strikethrough', 'subscript', 'superscript', 'source', 'indent', 'outdent',\u003Cbr\u003E'blockquote', 'pasteplain', 'pagebreak',\u003Cbr\u003E'selectall', 'print','horizontal', 'removeformat', 'time', 'date', 'unlink',\u003Cbr\u003E'insertparagraphbeforetable', 'insertrow', 'insertcol', 'mergeright', 'mergedown', 'deleterow',\u003Cbr\u003E'deletecol', 'splittorows', 'splittocols', 'splittocells', 'mergecells', 'deletetable', 'drafts']; \u003C\u002Fp\u003E\n\u003Cp\u003Efor (var i = 0, ci; ci = btnCmds[i++];) {\u003Cbr\u003E　　editorui[ci] = function (cmd) {\u003Cbr\u003E　　　　var ui = new editorui.Button({\u003Cbr\u003E　　　　　　onclick:function () {\u003Cbr\u003E　　　　　　editor.execCommand(cmd);\u003Cbr\u003E　　　　},\u003C\u002Fp\u003E\n\u003Cp\u003E但“模板”按钮不在其中，有dialog的按钮是在这儿定义的：\u003C\u002Fp\u003E\n\u003Cp\u003Evar dialogBtns = {\u003Cbr\u003EnoOk:['searchreplace', 'help', 'spechars', 'webapp','preview'],\u003Cbr\u003Eok:['attachment', 'anchor', 'link', 'insertimage', 'map', 'gmap', 'insertframe', 'wordimage',\u003Cbr\u003E'insertvideo', 'insertframe', 'edittip', 'edittable', 'edittd', 'scrawl', 'template', 'music', 'background', 'charts']\u003Cbr\u003E};\u003C\u002Fp\u003E\n\u003Cp\u003Evar ui = new editorui.Button({\u003Cbr\u003E　　onclick:function () {\u003Cbr\u003E　　　　if (dialog) {\u003Cbr\u003E　　　　　　switch (cmd) {\u003Cbr\u003E　　　　　　　　default:\u003Cbr\u003E　　　　　　　　　　dialog.render(); \u003C\u002Fp\u003E\n\u003Cp\u003EUIBase.prototype = {\u003Cbr\u003E　　render:function (holder) {\u003Cbr\u003E　　　　holder.appendChild(el); \u002F\u002F构造dialog el插入网页中占位元素（一个固定的浮动块）中\u003Cbr\u003E　　　　this.postRender(); \u003C\u002Fp\u003E\n\u003Cp\u003E　　　　　　postRender: function (){\u003Cbr\u003E　　　　　　　　this.addListener('show', function (){\u003Cbr\u003E　　　　　　　　　　me.modalMask.show(this.getDom().style.zIndex - 2);\u003Cbr\u003E　　　　　　　　});\u003Cbr\u003E　　　　　　　　this.buttons[i].postRender(); \u003C\u002Fp\u003E\n\u003Cp\u003E　　　　　　　　　　postRender: function (){\u003Cbr\u003E　　　　　　　　　　　　this.Stateful_postRender(); \u003C\u002Fp\u003E\n\u003Cp\u003E　　　　　　　　　　　　　　Stateful_postRender: function (){\u003Cbr\u003E　　　　　　　　　　　　　　　　if (this.disabled && !this.hasState('disabled')) {\u003Cbr\u003E　　　　　　　　　　　　　　　　　　this.addState('disabled'); \u003C\u002Fp\u003E\n\u003Cp\u003E　　　　　　　　　　　　　　　　　　this.setDisabled(this.disabled)\u003Cbr\u003E　　　　　　　　　　　　　　　　},\u003Cbr\u003E　　　　　　　　　　　　　　}\u003Cbr\u003E　　　　　　　　　　}\u003Cbr\u003E　　　　　　　　dialog.open(); \u003C\u002Fp\u003E\n\u003Cp\u003E　　　　　　　　　　open: function (){\u003Cbr\u003E　　　　　　　　　　　　this.showAtCenter(); \u002F\u002F 执行这个方法显示会话弹窗 \u003C\u002Fp\u003E\n\u003Cp\u003E　　　　　　　　　　　　　　showAtCenter: function (){\u003Cbr\u003E　　　　　　　　　　　　　　　　\u002F\u002F设置定位\u003Cbr\u003E　　　　　　　　　　　　　　　　this._show(); \u003C\u002Fp\u003E\n\u003Cp\u003E　　　　　　　　　　　　　　　　　　_show: function (){\u003Cbr\u003E　　　　　　　　　　　　　　　　　　　　\u002F\u002Fdialog和编辑器两个平级浮动块要比z-index，要高过编辑器的zindxe\u003Cbr\u003E　　　　　　　　　　　　　　　　　　　　this.editor.container.style.zIndex && (this.getDom().style.zIndex = this.editor.container.style.zIndex * 1 + 10);\u003Cbr\u003E　　　　　　　　　　　　　　　　　　　　this.fireEvent('show');\u003Cbr\u003E　　　　　　　　　　　　　　　　　　　　baidu.editor.ui.uiUtils.getFixedLayer().style.zIndex = this.getDom().style.zIndex - 4;\u003Cbr\u003E　　　　　　　　　　　　　　　　　　}\u003Cbr\u003E　　　　　　　　　　　　　　　　}\u003Cbr\u003E　　　　　　　　　　　　　　}\u003Cbr\u003E　　　　　　　　　　　　}\u003Cbr\u003E　　　　　　　　}\u003C\u002Fp\u003E\n\u003Cp\u003E下面来分析一下编辑器初始化代码，因为在编辑器点击一下，然后点击模板按钮插入模板，是要插入到之前点击的位置，那么之前在编辑框内点击时编辑器如何获取位置或selection选取区域以及如何保存是个问题。\u003C\u002Fp\u003E\n\u003Cp\u003E_setup: function (doc) {\u003Cbr\u003E　　me.selection = new dom.Selection(doc);\u003Cbr\u003E　　this.selection.getNative()\u003Cbr\u003E　　this._initEvents(); \u003C\u002Fp\u003E\n\u003Cp\u003E　　　　_initEvents: function () {\u003Cbr\u003E　　　　　　domUtils.on(doc, ['click', 'contextmenu', 'mousedown', 'keydown', 'keyup', 'keypress', 'mouseup', 'mouseover', 'mouseout', 'selectstart'], me._proxyDomEvent);\u003Cbr\u003E　　　　　　domUtils.on(win, ['focus', 'blur'], me._proxyDomEvent); \u003C\u002Fp\u003E\n\u003Cp\u003E　　　　　　　　_proxyDomEvent: function (evt) {\u003Cbr\u003E　　　　　　　　　　this.fireEvent(evt.type.replace(\u002F^on\u002F, ''), evt)\u003Cbr\u003E　　　　　　　　} \u003C\u002Fp\u003E\n\u003Cp\u003E　　　　　　domUtils.on(doc, ['mouseup', 'keydown'], function (evt) {\u003Cbr\u003E　　　　　　　　me._selectionChange(250, evt); \u003C\u002Fp\u003E\n\u003Cp\u003E　　　　　　　　　　_selectionChange: function (delay, evt) {\u003Cbr\u003E　　　　　　　　　　　　me.fireEvent('selectionchange', !!evt);\u003Cbr\u003E　　　　　　　　　　}\u003Cbr\u003E　　　　　　} \u003C\u002Fp\u003E\n\u003Cp\u003E　　\u002F\u002F编辑器不能为空内容　　if (domUtils.isEmptyNode(me.body)) { \u003Cstrong\u003Eme.body.innerHTML = '\u003Cp\u003E' + (browser.ie ? '' : '\u003Cbr\u002F\u003E') + '\u003C\u002Fp\u003E';\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\n\u003Cp\u003E \u003Cstrong\u003E}\u003C\u002Fstrong\u003E 　\u002F\u002F如果要求focus, 就把光标定位到内容开始\u003Cbr\u003E　　if (options.focus) {\u003Cbr\u003E　　　　setTimeout(function () {\u003Cbr\u003E　　　　　　me.focus(me.options.focusInEnd);\u003Cbr\u003E　　　　　　\u002F\u002F如果自动清除开着，就不需要做selectionchange;\u003Cbr\u003E　　　　　　!me.options.autoClearinitialContent && me._selectionChange();\u003Cbr\u003E　　　　}, 0);\u003Cbr\u003E　　}从初始化事件代码看，绑定物理事件清清楚楚，对于mouseup事件，是按selectionchange事件去找handler执行，这个selectionchange事件有几十个handler都要执行，因为源码中有几十个editor.addListener('selectionchange',handler)语句，\u003Cbr\u003E就不知道是哪个handler是处理range的，代码在哪里？要在89个函数中查找分析哪个函数是响应点击选取处理range的，难度很大，源代码非常复杂深奥高超。\u003C\u002Fp\u003E\n\u003Cp\u003E经过不懈的努力，还好所幸最后终于发现有一个处理mouseup物理事件的handler代码处理了range：\u003C\u002Fp\u003E\n\u003Cp\u003EUE.plugins['table'] = function () {\u003Cbr\u003E　　me.ready(function () {\u003Cbr\u003E　　　　me.addListener(\"mouseup\", mouseUpEvent); \u003C\u002Fp\u003E\n\u003Cp\u003E　　　　　　function mouseUpEvent(type, evt) { \u003C\u002Fp\u003E\n\u003Cp\u003E　　　　　　range = new dom.Range(me.document);\u003Cbr\u003E　　　　　　range.setStart(target, 0).setCursor(false, true); \u003C\u002Fp\u003E\n\u003Cp\u003E　　　　　　me._selectionChange(250, evt); 　\u002F\u002F变化选区\u003Cbr\u003E　　　　　　　　_selectionChange: function (delay, evt) { \u003C\u002Fp\u003E\n\u003Cp\u003E　　　　　　　　　　me.selection.cache(); \u002F\u002F 获取选区保存到cache \u003C\u002Fp\u003E\n\u003Cp\u003E　　　　　　　　　　　　\u002F**缓存当前选区的range和选区的开始节点\u003Cbr\u003E　　　　　　　　　　　　cache:function () {\u003Cbr\u003E　　　　　　　　　　　　　　this.clear(); \u002F\u002F 先清除历史range再保留最近的range\u003Cbr\u003E　　　　　　　　　　　　　　this._cachedRange = this.getRange(); \u003C\u002Fp\u003E\n\u003Cp\u003E　　　　　　　　　　　　　　　　getRange:function () {\u003Cbr\u003E　　　　　　　　　　　　　　　　　　var sel = me.getNative();\u003Cbr\u003E　　　　　　　　　　　　　　　　　　\u002F\u002F由于已经清除历史range，此刻cache是空的，无cache数据可用，则执行下面代码\u003Cbr\u003E　　　　　　　　　　　　　　　　　　if ( sel && sel.rangeCount ) { \u002F\u002F根据sel数据设置range数据最后返回range数据\u003Cbr\u003E　　　　　　　　　　　　　　　　　　　　var firstRange = sel.getRangeAt( 0 ); 　var lastRange = sel.getRangeAt( sel.rangeCount - 1 );\u003Cbr\u003E　　　　　　　　　　　　　　　　　　　　range.setStart( firstRange.startContainer, firstRange.startOffset ).setEnd( lastRange.endContainer, lastRange.endOffset );\u003Cbr\u003E　　　　　　　　　　　　　　　　　　　　if ( range.collapsed && domUtils.isBody( range.startContainer ) && !range.startOffset ) {\u003Cbr\u003E　　　　　　　　　　　　　　　　　　　　　　optimze( range );\u003Cbr\u003E　　　　　　　　　　　　　　　　　　　　}\u003Cbr\u003E　　　　　　　　　　　　　　　　　　　　return this._bakRange = range;\u003Cbr\u003E　　　　　　　　　　　　　　　　　　}\u003C\u002Fp\u003E\n\u003Cp\u003E因此，在编辑框内点击或选取时，是执行mouseUpEvent处理range，获取和保存当前点击位置或选取的区域，之后再插入模板时要获取插入位置，就是从cache取这个保存的range数据，插入模板时不可能再调用getRange()获取点击位置或选取区域，因为点击工具按钮之后，之前在编辑框内的点击或选取的光标状态已经改变不存在了。\u003C\u002Fp\u003E\n\u003Cp\u003E下面看几个ueditor源码中的正则匹配表达式，学习一下正则：\u003C\u002Fp\u003E\n\u003Cp\u003Evar re_tag = \u002F\u003C(?:(?:\\\u002F([^\u003E]+)\u003E)|(?:!--([\\S|\\s]*?)--\u003E)|(?:([^\\s\\\u002F\u003C\u003E]+)\\s*((?:(?:\"[^\"]*\")|(?:'[^']*')|[^\"'\u003C\u003E])*)\\\u002F?\u003E))\u002Fg,\u003C\u002Fp\u003E\n\u003Cp\u003E匹配以下html标签写法：\u003Cbr\u003E\u003C\u002Fxxx\u003E \u002F\u002F比如\u003C\u002Fbr\u003E \u003C\u002Fp\u003E\n\u003C!--xxx--\u003E \n\u003Cp\u003E\u003Cxxx \"xxx\" \u002F\u003E\u003Cbr\u003E\u003Cxxx 'xxx' \u002F\u003E\u003Cbr\u003E\u003Cxxx xxx \u002F\u003E\u003C\u002Fp\u003E\n\u003Cp\u003Ere_attr = \u002F([\\w\\-:.]+)(?:(?:\\s*=\\s*(?:(?:\"([^\"]*)\")|(?:'([^']*)')|([^\\s\u003E]+)))|(?=\\s|$))\u002Fg;\u003C\u002Fp\u003E\n\u003Cp\u003E匹配以下html标签属性写法：\u003Cbr\u003Exxx:xxx-xxx.xxx = \"xxx\"\u003Cbr\u003Exxx = 'xxx'\u003Cbr\u003Exxx = xxx\u003Cbr\u003Exxx\u003C\u002Fp\u003E\n\u003Cp\u003E是不是晕？ ?:可以忽略，就好看一点了。\u003C\u002Fp\u003E\n\u003Cp\u003E源码中运用正则替换修改字符串的例子：\u003C\u002Fp\u003E\n\u003Cp\u003Ehtmlstr = htmlstr.replace(new RegExp('[\\\\r\\\\t\\\\n'+(ignoreBlank?'':' ')+']*\u003C\\\u002F?(\\\\w+)\\\\s*(?:[^\u003E]*)\u003E[\\\\r\\\\t\\\\n'+(ignoreBlank?'':' ')+']*','g'), function(a,b){\u003Cbr\u003E以 \\n \u003Cdiv \u003Exxx\u003C\u002Fdiv \u003E \\n 为例，匹配到两次，第一次匹配 \\n \u003Cdiv\u003E，第二次匹配 \u003C\u002Fdiv\u003E \\n，调用function两次，a参数就是匹配的串，b参数是匹配的串里面的子匹配串\u003Cbr\u003E(\\\\w+)文字符串，就是div，replace方法里面如果写function，function返回的就是替换内容。\u003C\u002Fp\u003E\n\u003Cp\u003Ereturn a.replace(new RegExp('^[\\\\r\\\\n'+(ignoreBlank?'':' ')+']+'),'').replace(new RegExp('[\\\\r\\\\n'+(ignoreBlank?'':' ')+']+$'),'');\u003Cbr\u003E按pattern找到串之后去掉头尾的换行符返回做为替换内容，结果就是把源字符串中标签头尾的换行符去掉，返回修改之后的字符串。\u003C\u002Fp\u003E\n\u003Cp\u003E本文到这里差不多就结束了，ueditor的工具按钮都以plugin插件方式定义，机制都一样，只是功能不同，本文不再一一分析，本文只以插入模板这个工具按钮为例进行了重点分析，其它插件应该都是类似的。\u003C\u002Fp\u003E\n\u003Cp\u003E通过源代码分析学习，本人感觉ueditor是学习网页元素处理的顶峰，而前端框架是学习用对象编程技术实现组件机制和语义化表达式解析的顶峰，webuploader则是学习模块化编程的典范，只不过模块化编程现在已经被放弃了被webpack取代了。\u003C\u002Fp\u003E\n\u003Cp\u003E本人水平有限，文中错误之处欢迎大家指正和交流。\u003C\u002Fp\u003E\n",tags:"[{\"id\":12607,\"uuid\":\"19980888\",\"name\":\"iframe\",\"icon\":\"\",\"status\":1,\"createTime\":\"2022-09-23T23:10:23.834534+08:00\",\"updateTime\":\"2022-09-23T23:10:23.834534+08:00\"},{\"id\":16102,\"uuid\":\"47389358\",\"name\":\"ueditor\",\"icon\":\"\",\"status\":1,\"createTime\":\"2022-09-24T03:41:35.423294+08:00\",\"updateTime\":\"2022-09-24T03:41:35.423294+08:00\"},{\"id\":11822,\"uuid\":\"49393493\",\"name\":\"node\",\"icon\":\"\",\"status\":1,\"createTime\":\"2022-09-23T22:48:46.866208+08:00\",\"updateTime\":\"2022-09-23T22:48:46.866208+08:00\"},{\"id\":12959,\"uuid\":\"87471642\",\"name\":\"网页代码\",\"icon\":\"\",\"status\":1,\"createTime\":\"2022-09-23T23:21:09.941052+08:00\",\"updateTime\":\"2022-09-23T23:21:09.941052+08:00\"},{\"id\":18390,\"uuid\":\"25663600\",\"name\":\"ueditor编辑器\",\"icon\":\"\",\"status\":1,\"createTime\":\"2022-09-24T09:52:47.218138+08:00\",\"updateTime\":\"2022-09-24T09:52:47.218138+08:00\"},{\"id\":11680,\"uuid\":\"94470346\",\"name\":\"编辑器\",\"icon\":\"\",\"status\":1,\"createTime\":\"2022-09-23T22:46:30.71649+08:00\",\"updateTime\":\"2022-09-23T22:46:30.71649+08:00\"},{\"id\":12498,\"uuid\":\"83721179\",\"name\":\"offset\",\"icon\":\"\",\"status\":1,\"createTime\":\"2022-09-23T23:05:21.702768+08:00\",\"updateTime\":\"2022-09-23T23:05:21.702768+08:00\"},{\"id\":11051,\"uuid\":\"14556925\",\"name\":\"运维开发\",\"icon\":\"\",\"status\":1,\"createTime\":\"2022-09-23T22:34:55.290383+08:00\",\"updateTime\":\"2022-09-23T22:34:55.290383+08:00\"},{\"id\":11051,\"uuid\":\"14556925\",\"name\":\"运维开发\",\"icon\":\"\",\"status\":1,\"createTime\":\"2022-09-23T22:34:55.290383+08:00\",\"updateTime\":\"2022-09-23T22:34:55.290383+08:00\"}]",homeImg:b,createTime:u,updateTime:"1970-01-01T08:00:00+08:00",publishTime:u,readCount:803,favoriteCount:a,zanCount:a,isAuthorBlog:c},otherBlogList:[{uuid:"2026823042",title:"JavPlayer：AI破坏马赛克，大量马赛克破坏版影片流出 "},{uuid:"9442853740",title:"8个在线接收手机短信验证码的免费网络服务整理 "},{uuid:"2494613557",title:"IDM 激活破解工具 "},{uuid:"2766033731",title:"2020年最新可用的磁力搜索引擎&种子搜索网站，持续整理分享 "},{uuid:"1466098846",title:"java.net.ConnectException：Connection timed out：connect 出现连接超时的问题？ "}],recommendBlogList:[{uuid:"2802547579",title:"MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1",title2:b,intro:"文章目录问题用navicat导入数据时，报错：原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\\mode:sql\\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等，这样可以更容易地在不同的环境中使用MySQL。全局s",createTime:d,updateTime:d,publishTime:"2021-08-20T13:55:40+08:00",homeImg:"https:\u002F\u002Fimg-hello-world.oss-cn-beijing.aliyuncs.com\u002Fed6c6174f1775f65a3fbe98488391419.png",readCount:3512,zanCount:a,favoriteCount:a,status:a,commentCount:a,profile:v,nicker:v,avatar:"https:\u002F\u002Fimg-hello-world.oss-cn-beijing.aliyuncs.com\u002Fimgs\u002Fcd34cdaab69ede1e2bf28de235151c34.webp",collectionId:a,recommendStatus:a,userStatus:a,auditReason:b},{uuid:"0507154872",title:"swap空间的增减方法 ",title2:b,intro:"（1）增大swap空间去激活swap交换区：swapoff v \u002Fdev\u002Fvg00\u002Flvswap扩展交换lv：lvextend L 10G \u002Fdev\u002Fvg00\u002Flvswap重新生成swap交换区：mkswap \u002Fdev\u002Fvg00\u002Flvswap激活新生成的交换区：swapon v \u002Fdev\u002Fvg00\u002Flvswap",createTime:d,updateTime:d,publishTime:"2021-10-12T09:53:53+08:00",homeImg:b,readCount:985,zanCount:a,favoriteCount:a,status:a,commentCount:a,profile:w,nicker:w,avatar:"https:\u002F\u002Fimg-hello-world.oss-cn-beijing.aliyuncs.com\u002Fimgs\u002F3149e13a96d0d27780fd76b05b6ea101.jfif",collectionId:a,recommendStatus:a,userStatus:a,auditReason:b},{uuid:"3468005401",title:"2020年前端实用代码段，为你的工作保驾护航",title2:b,intro:"有空的时候，自己总结了几个代码段，在开发中也经常使用，谢谢。1、使用解构获取json数据let jsonData id: 1,status: \"OK\",data: 'a', 'b';let id, status, data: number jsonData;console.log(id, status, number )",createTime:d,updateTime:d,publishTime:"2021-06-03T22:46:22+08:00",homeImg:"https:\u002F\u002Fimg-hello-world.oss-cn-beijing.aliyuncs.com\u002Fe7130dfd1edf85ccee4a9e73aa0b77dd.jpeg",readCount:1997,zanCount:a,favoriteCount:a,status:a,commentCount:a,profile:x,nicker:x,avatar:"https:\u002F\u002Fimg-hello-world.oss-cn-beijing.aliyuncs.com\u002Fimgs\u002Fd4566ad9edfb956dba92fc21f5e1561f.webp",collectionId:a,recommendStatus:a,userStatus:a,auditReason:b},{uuid:"9382788506",title:"皕杰报表之UUID",title2:b,intro:"在我们用皕杰报表工具设计填报报表时，如何在新增行里自动增加id呢？能新增整数排序id吗？目前可以在新增行里自动增加id，但只能用uuid函数增加UUID编码，不能新增整数排序id。uuid函数说明：获取一个UUID，可以在填报表中用来创建数据ID语法：uuid()或uuid(sep)参数说明：sep布尔值，生成的uuid中是否包含分隔符''，缺省为",createTime:d,updateTime:d,publishTime:"2022-07-08T08:32:23+08:00",homeImg:b,readCount:785,zanCount:a,favoriteCount:a,status:a,commentCount:a,profile:"34035044",nicker:"helloworld_34035044",avatar:"https:\u002F\u002Fimg-hello-world.oss-cn-beijing.aliyuncs.com\u002Fimgs\u002F0d250ec5492da88592013bbd302402ae.jfif",collectionId:a,recommendStatus:a,userStatus:a,auditReason:b},{uuid:"1764926747",title:"Python之time模块的时间戳、时间字符串格式化与转换 ",title2:b,intro:"Python处理时间和时间戳的内置模块就有time，和datetime两个，本文先说time模块。关于时间戳的几个概念时间戳，根据1970年1月1日00:00:00开始按秒计算的偏移量。时间元组（struct_time），包含9个元素。 time.struct_time(tm_y",createTime:d,updateTime:d,publishTime:"2021-10-11T23:44:56+08:00",homeImg:b,readCount:980,zanCount:a,favoriteCount:a,status:a,commentCount:a,profile:g,nicker:g,avatar:y,collectionId:a,recommendStatus:a,userStatus:a,auditReason:b},{uuid:"6029686498",title:"mysql设置时区 ",title2:b,intro:"mysql设置时区mysql\\_query(\"SETtime\\_zone'8:00'\")ordie('时区设置失败，请联系管理员！');中国在东8区所以加8方法二：selectcount(user\\_id)asdevice,CONVERT\\_TZ(FROM\\_UNIXTIME(reg\\_time),'08:00','0",createTime:d,updateTime:d,publishTime:"2021-10-11T12:01:24+08:00",homeImg:b,readCount:928,zanCount:a,favoriteCount:a,status:a,commentCount:a,profile:e,nicker:e,avatar:h,collectionId:a,recommendStatus:a,userStatus:a,auditReason:b},{uuid:"4384340365",title:"00：Java简单了解 ",title2:b,intro:"浅谈Java之概述Java是SUN(StanfordUniversityNetwork)，斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟，已经成为Web应用程序的首选开发语言。Java是简单易学，完全面向对象，安全可靠，与平台无关的编程语言。",createTime:d,updateTime:d,publishTime:"2021-10-11T08:43:43+08:00",homeImg:b,readCount:915,zanCount:a,favoriteCount:a,status:a,commentCount:a,profile:e,nicker:e,avatar:h,collectionId:a,recommendStatus:a,userStatus:a,auditReason:b},{uuid:"3395108718",title:"Django中Admin中的一些参数配置 ",title2:b,intro:"设置在列表中显示的字段，id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable",createTime:d,updateTime:d,publishTime:"2021-10-11T16:54:04+08:00",homeImg:b,readCount:858,zanCount:a,favoriteCount:a,status:a,commentCount:a,profile:g,nicker:g,avatar:y,collectionId:a,recommendStatus:a,userStatus:a,auditReason:b},{uuid:"2102334911",title:"MySQL部分从库上面因为大量的临时表tmp_table造成慢查询 ",title2:b,intro:"背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_",createTime:d,updateTime:d,publishTime:"2021-10-11T11:24:10+08:00",homeImg:b,readCount:1123,zanCount:a,favoriteCount:a,status:a,commentCount:a,profile:e,nicker:e,avatar:h,collectionId:a,recommendStatus:a,userStatus:a,auditReason:b},{uuid:"7920817787",title:"Excel中这日期老是出来00：00：00，怎么用Pandas把这个去除",title2:b,intro:"大家好，我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下：这日期老是出来00：00：00，怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下：pd.toexcel之前把这",createTime:d,updateTime:d,publishTime:"2024-01-18T17:34:27.824977+08:00",homeImg:"https:\u002F\u002Fimg-hello-world.oss-cn-beijing.aliyuncs.com\u002Fimgs\u002Faeaded5a375b9d90ad54a2731b017114.png",readCount:136,zanCount:a,favoriteCount:a,status:a,commentCount:a,profile:"pdcfighting",nicker:"Python进阶者",avatar:"https:\u002F\u002Fimg-hello-world.oss-cn-beijing.aliyuncs.com\u002Fimgs\u002Fff45645a048833b06e967323e7411c91.webp",collectionId:a,recommendStatus:a,userStatus:a,auditReason:b}],userInfo:{profile:e,avatar:h,nicker:e,level:a,job:b,company:b,sex:i,slogan:"最大的安心是自律温柔和爱自己。",blogCount:12157,fansCount:19,zanCount:1653,followed:c,isZaned:c,isFavorited:c,webEnable:a,website:b,websiteDomain:b,wechatQrcode:b,wechatOfficialAccount:b}},currentCateId:b,recommendSpecialList:[],userAndBlogActionInfo:{},isLoading:c,isFinished:c,searchList:[],isLoadingSearch:c,isFinishedSearch:c,recommendLessonList:[],recommendLessonListByBlog:[{id:66,uuid:"9574923462",userId:z,name:"Andriod第三方源码分析",subtitle:"Andriod第三方源码分析，通过对 EventBus、OKHttp、RXJava 、Retrofit 的底层源码分析与手写实现，帮助你更好的掌握三方裤的使用",content:b,html:b,price:a,discountAmount:a,status:A,reason:b,level:3,type:i,mark:a,canRefund:a,cover:"https:\u002F\u002Fimg-hello-world.oss-cn-beijing.aliyuncs.com\u002Fimgs\u002F86018b97b99b2ad0b0e8f43ccfd5c8c8.png",payCount:35,updatedAt:"2023-08-31T22:36:46.061685+08:00",createdAt:"2023-08-30T17:15:05.856981+08:00",deletedAt:f},{id:75,uuid:"6955961602",userId:z,name:"Android进阶之旅-(Framework源码分析)",subtitle:"详细分析了android Framework底层的源码，包括但不限于启动，init进程，zygote进程，binder机制，ServiceManger进程，AMS,PMS, Launcher等等",content:b,html:b,price:a,discountAmount:a,status:A,reason:b,level:4,type:i,mark:a,canRefund:a,cover:"https:\u002F\u002Fimg-hello-world.oss-cn-beijing.aliyuncs.com\u002Fimgs\u002F2847450d82190c8a7d0ae4ba8a8e5629.png",payCount:26,updatedAt:"2023-09-08T09:27:27.21739+08:00",createdAt:"2023-09-07T21:50:23.74792+08:00",deletedAt:f}]},special:{mostSpecialCountUserList:[],specialList:[],specialCateList:[],bannerList:[],specialDetail:{},specialDetailList:{},chapterList:[],specialListByCate:[],mySpecialDetail:f,isLoading:c,isFinished:c},tutorial:{bigCateList:[],tutorialData:[],tutorialDetail:{},chapterList:[],tutorialOverview:{}}},serverRendered:t,routePath:"\u002Fp\u002F2128405823",config:{_app:{basePath:"\u002F",assetsPath:"\u002F_nuxt\u002F",cdnURL:f}}}}(0,"",false,"0001-01-01T00:00:00Z","Wesley13",null,"Stella981","https:\u002F\u002Fimg-hello-world.oss-cn-beijing.aliyuncs.com\u002Fimgs\u002F46847d754406b0102dee7a1f54d14f92.jfif",1,"\u002Fmanage\u002FgetCollectionList","\u002Fmanage\u002FgetMyBlogDetail","\u002Fspecial\u002FupdateSection","\u002Fmanage\u002FgetMySectionDetail","\u002Fspecial\u002FsubscribeSpecial","\u002Fspecial\u002FunSubscribeSpecial","\u002Fspecial\u002FmodifySpecial","\u002Ftutorial\u002FgetTutorialList","\u002Ftutorial\u002FgetTutorialDetail","\u002Faccess\u002FmodifyPassword",true,"2021-10-11T12:09:58+08:00","blmius","Easter79","Jacquelyn38","https:\u002F\u002Fimg-hello-world.oss-cn-beijing.aliyuncs.com\u002Fimgs\u002F1bad3e5246214111b0d7a482fc5beec5.jfif",7689,30));</script><script src="/_nuxt/hw.163.js?t=1714232710228" defer></script><script src="/_nuxt/hw.115.js?t=1714232710228" defer></script><script src="/_nuxt/hw.0.js?t=1714232710228" defer></script><script src="/_nuxt/hw.1.js?t=1714232710228" defer></script><script src="/_nuxt/hw.2.js?t=1714232710228" defer></script><script src="/_nuxt/hw.164.js?t=1714232710228" defer></script><script src="/_nuxt/hw.14.js?t=1714232710228" defer></script><script src="/_nuxt/hw.168.js?t=1714232710228" defer></script><script src="/_nuxt/hw.15.js?t=1714232710228" defer></script> </body> </html>