FCKeditor 源代码分析附中文注释

这几天都在研究FCKeditor的源代码 (FCKeditor就是网络中应用比较广泛的网页编辑器) 这里需要感谢nileaderblog的辛苦翻译。几乎搜遍了Internet，似乎对于fckconfig.js这个文件讲解的很多，但对于fckeditor.js这个FCK的核心类文件的资料几乎为0. 所以，花了整整一天的时间，以挤牙膏的方式，对fckeditor.js这个fck核心类文件作了自己力所能及的注释，供同样学习fck的网友一个参考。鉴于笔者水平有限，在此，请广大高手指出我的注释中不妥之处，以免误导他人。谢谢。建议copy到自己的IDE中查看或者注：本文基于FCKeditor2.6.5 更多权威资料，请参见 FCK 官方Developers Guide 复制代码代码如下:/** * * ***********CopyRight************** *——-Annotated by nileader—– *—–Version 1.00 2009-10-18—– *—–Once copied, marked http://www.nileader.cn * * FCKeditor 类 annotated by nileader * @param {Object} instanceName 编辑器的唯一名称(相当于ID) 是不可省参数， * width,height,toolbarset,value 都是可选参数 */ var FCKeditor = function( instanceName, width, height, toolbarSet, value ) { //编辑器的基本属性注意:这些东西优先于FCKConfig.js中的配置 this.InstanceName = instanceName ; //编辑器的唯一名称(相当于ID)（必须有！） this.Width = width || \’100%\’ ; //宽度默认是100% this.Height = height || \’200\’ ; //宽度默认是200 this.ToolbarSet = toolbarSet || \’Default\’ ;//工具集名称,默认值是Default this.Value = value || \’\’ ; //初始化编辑器的HTML代码,默认值为空 //编辑器初始化的时候默认的根路径，其作用是编写fck中，凡是用到的路径，均从FCKeditor.BasePath目录开始默认为/Fckeditor/ this.BasePath = FCKeditor.BasePath ; this.CheckBrowser = true ; //是否在显示编辑器前检查浏览器兼容性,默认为true this.DisplayErrors = true ; //是否显示提示错误,默为true this.Config = new Object() ; // Events this.OnError = null ; // function( source, errorNumber, errorDescription )自定义的错误处理函数 } FCKeditor.BasePath = \’/fckeditor/\’ ; // fck默认的根目录 FCKeditor.MinHeight = 200 ; //高和宽的限制 FCKeditor.MinWidth = 750 ; FCKeditor.prototype.Version = \’2.6.5\’ ; //版本号 FCKeditor.prototype.VersionBuild = \’23959\’ ; /** * 调用CreateHtml()来生成编辑器的html代码并在页面上输出编辑器 */ FCKeditor.prototype.Create = function() { //调用createhtml（）方法 document.write( this.CreateHtml() ) ; } /** * @return sHtml 用于生成编辑器的html代码 */ FCKeditor.prototype.CreateHtml = function() { // 检查有无InstanceName 如果没有则不生成html代码 if ( !this.InstanceName || this.InstanceName.length == 0 ) { this._ThrowError( 701, \’You must specify an instance name.\’ ) ; return \’\’ ; } //函数的返回值 var sHtml = \’\’ ; /* * 当用户的浏览器符合预设的几种浏览器时， * 生成一个id=\”this.instancename\” name=\”this.instancename\”的文本框，事实上的内容储存器 */ if ( !this.CheckBrowser || this._IsCompatibleBrowser() ) { //将此时FCK初始值通过转义之后放入这个input sHtml += \'<input type=\”hidden\” id=\”\’ + this.InstanceName + \’\” name=\”\’ + this.InstanceName + \’\” value=\”\’ + this._HTMLEncode( this.Value ) + \’\” style=\”display:none\” style=\”display:none\” />\’ ; //生成一个隐藏的INPUT来放置this.config中的内容 sHtml += this._GetConfigHtml() ; //生成编辑器的iframe的代码 sHtml += this._GetIFrameHtml() ; } /** * 如果用户的浏览器不兼容FCK默认的几种浏览器 * 只能有传统的textarea了 */ else { var sWidth = this.Width.toString().indexOf(\’%\’) > 0 ? this.Width : this.Width + \’px\’ ; var sHeight = this.Height.toString().indexOf(\’%\’) > 0 ? this.Height : this.Height + \’px\’ ; sHtml += \'<textarea name=\”\’ + this.InstanceName + \’\” rows=\”4\” cols=\”40\” style=\”width:\’ + sWidth + \’;height:\’ + sHeight ; if ( this.TabIndex ) sHtml += \’\” tabindex=\”\’ + this.TabIndex ; sHtml += \’\”>\’ + this._HTMLEncode( this.Value ) + \'<\\/textarea>\’ ; } return sHtml ; } /** * 用编辑器来替换对应的文本框 */ FCKeditor.prototype.ReplaceTextarea = function() { //如果已经有了 id=THIS.INSTANCENAME___Frame 的标签时，直接返回 if ( document.getElementById( this.InstanceName + \’___Frame\’ ) ) return ; //当用户的浏览器符合预设的几种浏览器时 if ( !this.CheckBrowser || this._IsCompatibleBrowser() ) { // We must check the elements firstly using the Id and then the name. //获取id=this.InstanceName的html标签 var oTextarea = document.getElementById( this.InstanceName ) ; //获取所有name=THIS.instancename的标签 var colElementsByName = document.getElementsByName( this.InstanceName ) ; var i = 0; /* * 考虑到用户html标签的命名不规范，所以进行以下编历判断笔者指的是用户在textarea标签处用了name=this.instancename * 在同个页面的其它标签上也用了name=this.instancename */ while ( oTextarea || i == 0 ) { //遍历，直到找到name=this.instancename的textarea标签，并赋给oTextarea if ( oTextarea && oTextarea.tagName.toLowerCase() == \’textarea\’ ) break ; oTextarea = colElementsByName[i++] ; } //如果不存在id或者name为this.instancename的标签时，弹出错误框 if ( !oTextarea ) { alert( \’Error: The TEXTAREA with id or name set to \”\’ + this.InstanceName + \’\” was not found\’ ) ; return ; } /* * 确定存在name=this.instancename的textarea标签后，将编辑器的代码赋给它 */ oTextarea.style.display = \’none\’ ; //如果页面上对这样的textarea标签定义了tab键的顺序，赋给this.TabIndex待用 if ( oTextarea.tabIndex ) this.TabIndex = oTextarea.tabIndex ; this._InsertHtmlBefore( this._GetConfigHtml(), oTextarea ) ; this._InsertHtmlBefore( this._GetIFrameHtml(), oTextarea ) ; } } /** * 在指定的页面标签前面插入html代码 * @param {Object} 待插入的html代码 * @param {Object} 指定的页面标签（对象） */ FCKeditor.prototype._InsertHtmlBefore = function( html, element ) { if ( element.insertAdjacentHTML ) // IE 私有的 insertAdjacentHTML 方法 element.insertAdjacentHTML( \’beforeBegin\’, html ) ; else // 非ie浏览器 { var oRange = document.createRange() ; oRange.setStartBefore( element ) ; var oFragment = oRange.createContextualFragment( html ); element.parentNode.insertBefore( oFragment, element ) ; } } /* * 通过编历this.Config[]来生成一个隐藏域， * 例如： * this.Config[\’nileader\’]=\”1104\”,this.Config[\’leaderni\’]=\”nichao\”…… * 那么，sConfig=…… &nileader=1104&leaderni=nichao …… * 当然，最终，sConfig会被encodeURIComponent函数转换成百分比编码放入隐藏的INPUT中去 */ FCKeditor.prototype._GetConfigHtml = function() { var sConfig = \’\’ ; for ( var o in this.Config ) { if ( sConfig.length > 0 ) sConfig += \’&\’ ; //encodeURIComponent函数转换成百分比编码 sConfig += encodeURIComponent( o ) + \’=\’ + encodeURIComponent( this.Config[o] ) ; } return \'<input type=\”hidden\” id=\”\’ + this.InstanceName + \’___Config\” value=\”\’ + sConfig + \’\” style=\”display:none\” style=\”display:none\” />\’ ; } /* * 生成iframe的html 这里涉及到src的确定 */ FCKeditor.prototype._GetIFrameHtml = function() { var sFile = \’fckeditor.html\’ ; //特殊情况　fckedito所在的窗口没有嵌入在浏览器中 try { if ( (/fcksource=true/i).test( window.top.location.search ) ) sFile = \’fckeditor.original.html\’ ; } catch (e) { /* 忽略这个异常. 很多时候，fckedito所在的窗口嵌入在浏览器中. */ } /* * 这里注意的一点： * iframe的工作原理：当iframe处于可编辑状态时，其实编辑的是src所在的页面 * 这里合成一个sLink以放入iframe标签中 */ //sLink就是这个事实上的页面了，从fck的根目录开始，例如 sLink=/fckeditor/editor/fckeditor.html?InstanceName=nileader&Toolbar=nileadersbar var sLink = this.BasePath + \’editor/\’ + sFile + \’?InstanceName=\’ + encodeURIComponent( this.InstanceName ) ; if (this.ToolbarSet) sLink += \’&Toolbar=\’ + this.ToolbarSet ; //生成一个真正的编辑iframer的html代码当然，放入了src=slink var html = \'<iframe id=\”\’ + this.InstanceName + \’___Frame\” src=\”\’ + sLink + \’\” src=\”\’ + sLink + \’\” width=\”\’ + this.Width + \’\” height=\”\’ + this.Height ; //如果设定了使用\”Tab\”键的遍历顺序，则赋给iframe if ( this.TabIndex ) html += \’\” tabindex=\”\’ + this.TabIndex ; html += \’\” frameborder=\”0\” scrolling=\”no\”></iframe>\’ ; return html ; } /* * 检测用户的bowser是否是fck的默认 * 这个方法只是fck公司追求oo，无意义 */ FCKeditor.prototype._IsCompatibleBrowser = function() { return FCKeditor_IsCompatibleBrowser() ; } /** * 抛出错误 * @param {Object} errorNumber 错误编号 * @param {Object} errorDescription 错误概述 */ FCKeditor.prototype._ThrowError = function( errorNumber, errorDescription ) { this.ErrorNumber = errorNumber ; this.ErrorDescription = errorDescription ; //是否显示提示错误,默为true if ( this.DisplayErrors ) { //将错误编号和错误概述打印出来 document.write( \'<div style=\”COLOR: #ff0000\” style=\”COLOR: #ff0000\”>\’ ) ; document.write( \'[ FCKeditor Error \’ + this.ErrorNumber + \’: \’ + this.ErrorDescription + \’ ]\’ ) ; document.write( \'</div>\’ ) ; } //OnError是否自定义了错误处理函数，若定义了，由其处理 if ( typeof( this.OnError ) == \’function\’ ) this.OnError( this, errorNumber, errorDescription ) ; } /** * 转义文本 * @param {Object} text 待转义的文本 * @return String text 转义完后的文本 */ FCKeditor.prototype._HTMLEncode = function( text ) { if ( typeof( text ) != \”string\” ) text = text.toString() ; //将字符串中的所有 & \” < > 用对应的转义字符代换 text = text.replace( /&/g, \”&\”).replace( /\”/g, \”\”\”).replace( /</g, \”<\”).replace( />/g, \”>\”) ; return text ; } ;(function() { //把页面上的textarea元素赋给editor变量 var textareaToEditor = function( textarea ) { var editor = new FCKeditor( textarea.name ) ; editor.Width = Math.max( textarea.offsetWidth, FCKeditor.MinWidth ) ; editor.Height = Math.max( textarea.offsetHeight, FCKeditor.MinHeight ) ; return editor ; } /** * Replace all <textarea> elements available in the document with FCKeditor * instances. * * // Replace all <textarea> elements in the page. * FCKeditor.ReplaceAllTextareas() ; * * // Replace all <textarea class=\”myClassName\”> elements in the page. * FCKeditor.ReplaceAllTextareas( \’myClassName\’ ) ; * * // Selectively replace <textarea> elements, based on custom assertions. * FCKeditor.ReplaceAllTextareas( function( textarea, editor ) * { * // Custom code to evaluate the replace, returning false if it * // must not be done. * // It also passes the \”editor\” parameter, so the developer can * // customize the instance. * } ) ; */ FCKeditor.ReplaceAllTextareas = function() { //获取所有的textarea元素 var textareas = document.getElementsByTagName( \’textarea\’ ) ; for ( var i = 0 ; i < textareas.length ; i++ ) { var editor = null ; var textarea = textareas[i] ; var name = textarea.name ; // The \”name\” attribute must exist. if ( !name || name.length == 0 ) continue ; if ( typeof arguments[0] == \’string\’ ) { // The textarea class name could be passed as the function // parameter. var classRegex = new RegExp( \'(?:^| )\’ + arguments[0] + \'(?:$| )\’ ) ; if ( !classRegex.test( textarea.className ) ) continue ; } else if ( typeof arguments[0] == \’function\’ ) { // An assertion function could be passed as the function parameter. // It must explicitly return \”false\” to ignore a specific <textarea>. editor = textareaToEditor( textarea ) ; if ( arguments[0]( textarea, editor ) === false ) continue ; } if ( !editor ) editor = textareaToEditor( textarea ) ; editor.ReplaceTextarea() ; } } })() ; /** * 检测浏览器的兼容性 * 利用了navigator对象返回的一些信息sAgent，判断浏览器返回包括浏览器的码名浏览器名浏览器版本语言等信息并小写 * 例如： * mozilla/4.0 (compatible; msie 6.0; windows nt 5.2; sv1; .net clr 1.1.4322) * * 判断IE浏览器的时候，运用了IE4.0之后支持的增加了对条件编译， * 由于只是IE支持，在W3C标准浏览器中，该属性是不被支持的。因此，适当的利用该特性，判断IE */ function FCKeditor_IsCompatibleBrowser() { var sAgent = navigator.userAgent.toLowerCase() ; // 当前浏览器是Internet Explorer 5.5+ //利用条件编译判断IE 在IE中，/*@cc_on!@*/false == ！false == true， //如果是非IE浏览器，则忽略，/*@cc_on!@*/false == false if ( /*@cc_on!@*/false && sAgent.indexOf(\”mac\”) == -1 ) //不是apple mac os { var sBrowserVersion = navigator.appVersion.match(/MSIE (.\\..)/)[1] ; return ( sBrowserVersion >= 5.5 ) ; } // Gecko (Opera 9 tries to behave like Gecko at this point). //检测是否是OPERA 9 浏览器 if ( navigator.product == \”Gecko\” && navigator.productSub >= 20030210 && !( typeof(opera) == \’object\’ && opera.postError ) ) return true ; // Opera 9.50+ if ( window.opera && window.opera.version && parseFloat( window.opera.version() ) >= 9.5 ) return true ; // Adobe AIR // Checked before Safari because AIR have the WebKit rich text editor // features from Safari 3.0.4, but the version reported is 420. if ( sAgent.indexOf( \’ adobeair/\’ ) != -1 ) return ( sAgent.match( / adobeair\\/(\\d+)/ )[1] >= 1 ) ; // Build must be at least v1 // Safari 3+ if ( sAgent.indexOf( \’ applewebkit/\’ ) != -1 ) return ( sAgent.match( / applewebkit\\/(\\d+)/ )[1] >= 522 ) ; // Build must be at least 522 (v3) return false ; }

您可能感兴趣的文章: