`
newleague
  • 浏览: 1504493 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类

fckeditor.js注释

阅读更多

 FCKeditor的核心是fckeditor.js,从http://blog.csdn.net/nileader/archive/2009/10/21/4710559.aspx摘录到注释。

 

 

 

Js代码 复制代码

 

  1. /**   
  2.  *   
  3.  * ***********CopyRight**************   
  4.  *-------Annotated by nileader-----   
  5.  *-----Version 1.00   2009-10-18-----   
  6.  *-----Once copied, marked http://blog.csdn.net/nileader   
  7.  *   
  8.  * FCKeditor  类     annotated by nileader   
  9.  * @param {Object} instanceName 编辑器的唯一名称(相当于ID) 是不可省参数,   
  10.  * width,height,toolbarset,value 都是 可选参数   
  11.  */     
  12. var FCKeditor = function( instanceName, width, height, toolbarSet, value )     
  13. {     
  14.       //编辑器的基本属性   注意:这些东西优先于FCKConfig.js中的配置     
  15.           
  16.     this.InstanceName    = instanceName ;              //编辑器的唯一名称(相当于ID)(必须有!)     
  17.     this.Width            = width            || '100%' ;   //宽度   默认是100%           
  18.     this.Height            = height        || '200' ;    //宽度   默认是200     
  19.     this.ToolbarSet        = toolbarSet    || 'Default' ;//工具集名称,默认值是Default     
  20.     this.Value            = value            || '' ;       //初始化编辑器的HTML代码,默认值为空     
  21.                   //编辑器初始化的时候默认的根路径, 其作用是编写fck中,凡是用到的路径,均从FCKeditor.BasePath目录开始      默认为/Fckeditor/     
  22.     this.BasePath        = FCKeditor.BasePath ;           
  23.     this.CheckBrowser    = true ;                      //是否在显示编辑器前检查浏览器兼容性,默认为true     
  24.     this.DisplayErrors    = true ;                      //是否显示提示错误,默为true     
  25.     this.Config            = new Object() ;                 
  26.     // Events     
  27.     this.OnError        = null ;    // function( source, errorNumber, errorDescription )自定义的错误处理函数     
  28. }     
  29. FCKeditor.BasePath = '/fckeditor/' ;     // fck默认的根目录     
  30. FCKeditor.MinHeight = 200 ;         //高和宽的限制     
  31. FCKeditor.MinWidth = 750 ;     
  32. FCKeditor.prototype.Version            = '2.6.5' ;  //版本号     
  33. FCKeditor.prototype.VersionBuild    = '23959' ;     
  34. /**   
  35.  * 调用CreateHtml()来生成编辑器的html代码并在页面上输出编辑器   
  36.  */     
  37. FCKeditor.prototype.Create = function()     
  38. {     
  39.     //调用createhtml()方法     
  40.     document.write( this.CreateHtml() ) ;     
  41. }     
  42. /**   
  43.  * @return sHtml 用于生成编辑器的html代码   
  44.  */     
  45. FCKeditor.prototype.CreateHtml = function()     
  46. {     
  47.     // 检查有无InstanceName  如果没有则不生成html代码     
  48.     if ( !this.InstanceName || this.InstanceName.length == 0 )     
  49.     {     
  50.         this._ThrowError( 701, 'You must specify an instance name.' ) ;     
  51.         return '' ;     
  52.     }     
  53.     //函数的返回值     
  54.     var sHtml = '' ;     
  55.     /*   
  56.      * 当用户的浏览器符合预设的几种浏览器时,   
  57.      * 生成一个id="this.instancename" name="this.instancename"的文本框,事实上的内容储存器   
  58.      */     
  59.     if ( !this.CheckBrowser || this._IsCompatibleBrowser() )     
  60.     {     
  61.         //将此时FCK初始值通过转义之后放入这个input     
  62.         sHtml += '<input type="hidden" id="' + this.InstanceName + '" name="' + this.InstanceName + '" value="' + this._HTMLEncode( this.Value ) + '" style="display:none" mce_style="display:none" />' ;     
  63.         //生成一个隐藏的INPUT来放置this.config中的内容     
  64.         sHtml += this._GetConfigHtml() ;     
  65.         //生成编辑器的iframe的代码     
  66.         sHtml += this._GetIFrameHtml() ;     
  67.     }     
  68.     /**   
  69.      * 如果用户的浏览器不兼容FCK默认的几种浏览器   
  70.      * 只能有传统的textarea了   
  71.      */     
  72.     else     
  73.     {     
  74.         var sWidth  = this.Width.toString().indexOf('%')  > 0 ? this.Width  : this.Width  + 'px' ;     
  75.         var sHeight = this.Height.toString().indexOf('%') > 0 ? this.Height : this.Height + 'px' ;     
  76.         sHtml += '<textarea name="' + this.InstanceName +     
  77.             '" rows="4" cols="40" style="width:' + sWidth +     
  78.             ';height:' + sHeight ;     
  79.         if ( this.TabIndex )     
  80.             sHtml += '" tabindex="' + this.TabIndex ;     
  81.         sHtml += '">' +     
  82.             this._HTMLEncode( this.Value ) +     
  83.             '<\/textarea>' ;     
  84.     }     
  85.     return sHtml ;     
  86. }     
  87.      
  88. /**   
  89.  * 用编辑器来替换对应的文本框   
  90.  */     
  91. FCKeditor.prototype.ReplaceTextarea = function()     
  92. {     
  93.     //如果已经有了 id=THIS.INSTANCENAME___Frame 的标签时,直接返回     
  94.     if ( document.getElementById( this.InstanceName + '___Frame' ) )     
  95.         return ;     
  96.     //当用户的浏览器符合预设的几种浏览器时     
  97.     if ( !this.CheckBrowser || this._IsCompatibleBrowser() )     
  98.     {     
  99.         // We must check the elements firstly using the Id and then the name.     
  100.         //获取id=this.InstanceName的html标签     
  101.         var oTextarea = document.getElementById( this.InstanceName ) ;     
  102.         //获取所有name=THIS.instancename的标签     
  103.         var colElementsByName = document.getElementsByName( this.InstanceName ) ;     
  104.         var i = 0;     
  105.         /*   
  106.          * 考虑到用户html标签的命名不规范,所以进行以下编历判断     笔者指的是用户在textarea标签处用了name=this.instancename   
  107.          * 在同个页面的其它标签上也用了name=this.instancename   
  108.          */     
  109.         while ( oTextarea || i == 0 )     
  110.         {     
  111.             //遍历,直到找到name=this.instancename的textarea标签,并赋给oTextarea     
  112.             if ( oTextarea && oTextarea.tagName.toLowerCase() == 'textarea' )     
  113.                 break ;     
  114.             oTextarea = colElementsByName[i++] ;     
  115.         }     
  116.         //如果不存在id或者name为this.instancename的标签时,弹出错误框     
  117.         if ( !oTextarea )     
  118.         {     
  119.             alert( 'Error: The TEXTAREA with id or name set to "' + this.InstanceName + '" was not found' ) ;     
  120.             return ;     
  121.         }     
  122.         /*   
  123.          * 确定存在name=this.instancename的textarea标签后,将编辑器的代码赋给它   
  124.          */     
  125.         oTextarea.style.display = 'none' ;     
  126.         //如果页面上对这样的textarea标签定义了tab键的顺序,赋给this.TabIndex待用     
  127.         if ( oTextarea.tabIndex )     
  128.             this.TabIndex = oTextarea.tabIndex ;     
  129.         this._InsertHtmlBefore( this._GetConfigHtml(), oTextarea ) ;     
  130.         this._InsertHtmlBefore( this._GetIFrameHtml(), oTextarea ) ;     
  131.     }     
  132. }     
  133.      
  134.      
  135.      
  136.      
  137.      
  138.      
  139. /**   
  140.  * 在指定的页面标签前面插入html代码   
  141.  * @param {Object} 待插入的html代码   
  142.  * @param {Object} 指定的页面标签(对象)   
  143.  */     
  144. FCKeditor.prototype._InsertHtmlBefore = function( html, element )     
  145. {     
  146.     if ( element.insertAdjacentHTML )    // IE 私有的 insertAdjacentHTML 方法     
  147.         element.insertAdjacentHTML( 'beforeBegin', html ) ;     
  148.     else                                // 非ie浏览器     
  149.     {     
  150.             
  151.         var oRange = document.createRange() ;     
  152.         oRange.setStartBefore( element ) ;     
  153.         var oFragment = oRange.createContextualFragment( html );     
  154.         element.parentNode.insertBefore( oFragment, element ) ;     
  155.     }     
  156. }     
  157.      
  158.      
  159.      
  160.      
  161. /*   
  162.  * 通过编历this.Config[]来生成一个隐藏域,   
  163.  * 例如:   
  164.  * this.Config['nileader']="1104",this.Config['leaderni']="nichao"……   
  165.  * 那么,sConfig=…… &nileader=1104&leaderni=nichao ……   
  166.  * 当然,最终,sConfig会被encodeURIComponent函数转换成百分比编码 放入隐藏的INPUT中去   
  167.  */     
  168. FCKeditor.prototype._GetConfigHtml = function()     
  169. {     
  170.     var sConfig = '' ;     
  171.     for ( var o in this.Config )     
  172.     {     
  173.         if ( sConfig.length > 0 ) sConfig += '&' ;     
  174.         //encodeURIComponent函数转换成百分比编码     
  175.         sConfig += encodeURIComponent( o ) + '=' + encodeURIComponent( this.Config[o] ) ;     
  176.     }     
  177.     return '<input type="hidden" id="' + this.InstanceName + '___Config" value="' + sConfig + '" style="display:none" mce_style="display:none" />' ;     
  178. }     
  179.      
  180.      
  181.      
  182. /*   
  183.  * 生成iframe的html  这里涉及到src的确定   
  184.  */     
  185. FCKeditor.prototype._GetIFrameHtml = function()     
  186. {     
  187.     var sFile = 'fckeditor.html' ;     
  188.     //特殊情况 fckedito所在的窗口没有嵌入在浏览器中     
  189.     try     
  190.     {     
  191.         if ( (/fcksource=true/i).test( window.top.location.search ) )     
  192.             sFile = 'fckeditor.original.html' ;     
  193.     }     
  194.     catch (e) { /* 忽略这个异常. 很多时候,fckedito所在的窗口嵌入在浏览器中. */ }     
  195.     /*   
  196.      * 这里注意的一点:   
  197.      * iframe的工作原理: 当iframe处于可编辑状态时,其实编辑的是src所在的页面   
  198.      * 这里合成一个sLink以放入iframe标签中   
  199.      */     
  200.     //sLink就是这个事实上的页面了,从fck的根目录开始,例如   sLink=/fckeditor/editor/fckeditor.html?InstanceName=nileader&Toolbar=nileadersbar     
  201.     var sLink = this.BasePath + 'editor/' + sFile + '?InstanceName=' + encodeURIComponent( this.InstanceName ) ;     
  202.     if (this.ToolbarSet)     
  203.         sLink += '&Toolbar=' + this.ToolbarSet ;     
  204.     //生成一个真正的编辑iframer的html代码  当然,放入了src=slink     
  205.     var html = '<iframe id="' + this.InstanceName +     
  206.         '___Frame" src="' + sLink +     
  207.         '" mce_src="' + sLink +     
  208.         '" width="' + this.Width +     
  209.         '" height="' + this.Height ;     
  210.     //如果设定了使用"Tab"键的遍历顺序,则赋给iframe     
  211.     if ( this.TabIndex )     
  212.         html += '" tabindex="' + this.TabIndex ;     
  213.     html += '" frameborder="0" scrolling="no"></iframe>' ;     
  214.     return html ;     
  215. }     
  216.      
  217.      
  218.      
  219. /*   
  220.  * 检测用户的bowser是否是fck的默认   
  221.  * 这个方法只是fck公司追求oo,无意义   
  222.  */     
  223. FCKeditor.prototype._IsCompatibleBrowser = function()     
  224. {     
  225.     return FCKeditor_IsCompatibleBrowser() ;     
  226. }     
  227.      
  228.      
  229.      
  230. /**   
  231.  * 抛出错误   
  232.  * @param {Object} errorNumber    错误编号   
  233.  * @param {Object} errorDescription   错误概述   
  234.  */     
  235. FCKeditor.prototype._ThrowError = function( errorNumber, errorDescription )     
  236. {     
  237.     this.ErrorNumber        = errorNumber ;     
  238.     this.ErrorDescription    = errorDescription ;     
  239.     //是否显示提示错误,默为true     
  240.     if ( this.DisplayErrors )     
  241.     {      //将错误编号和错误概述打印出来     
  242.         document.write( '<div style="COLOR: #ff0000" mce_style="COLOR: #ff0000">' ) ;     
  243.         document.write( '[ FCKeditor Error ' + this.ErrorNumber + ': ' + this.ErrorDescription + ' ]' ) ;     
  244.         document.write( '</div>' ) ;     
  245.     }     
  246.     //OnError是否自定义了错误处理函数,若定义了,由其处理     
  247.     if ( typeofthis.OnError ) == 'function' )     
  248.         this.OnError( this, errorNumber, errorDescription ) ;     
  249. }     
  250.      
  251.      
  252. /**   
  253.  * 转义文本   
  254.  * @param {Object} text   待转义的文本   
  255.  * @return String  text    转义完后的文本   
  256.  */     
  257. FCKeditor.prototype._HTMLEncode = function( text )     
  258. {     
  259.     if ( typeof( text ) != "string" )     
  260.         text = text.toString() ;     
  261.     //将字符串中的所有 & " < > 用对应的转义字符代换     
  262.     text = text.replace(     
  263.         /&/g, "&").replace(     
  264.         /"/g, """).replace(     
  265.         /</g, "<").replace(     
  266.         />/g, ">") ;     
  267.     return text ;     
  268. }     
  269.      
  270.      
  271.      
  272. ;(function()     
  273. {     
  274.     //把页面上的textarea元素赋给editor变量     
  275.     var textareaToEditor = function( textarea )     
  276.     {     
  277.         var editor = new FCKeditor( textarea.name ) ;     
  278.         editor.Width = Math.max( textarea.offsetWidth, FCKeditor.MinWidth ) ;     
  279.         editor.Height = Math.max( textarea.offsetHeight, FCKeditor.MinHeight ) ;     
  280.         return editor ;     
  281.     }     
  282.     /**   
  283.      * Replace all <textarea> elements available in the document with FCKeditor   
  284.      * instances.   
  285.      *   
  286.      *    // Replace all <textarea> elements in the page.   
  287.      *    FCKeditor.ReplaceAllTextareas() ;   
  288.      *   
  289.      *    // Replace all <textarea class="myClassName"> elements in the page.   
  290.      *    FCKeditor.ReplaceAllTextareas( 'myClassName' ) ;   
  291.      *   
  292.      *    // Selectively replace <textarea> elements, based on custom assertions.   
  293.      *    FCKeditor.ReplaceAllTextareas( function( textarea, editor )   
  294.      *        {   
  295.      *            // Custom code to evaluate the replace, returning false if it   
  296.      *            // must not be done.   
  297.      *            // It also passes the "editor" parameter, so the developer can   
  298.      *            // customize the instance.   
  299.      *        } ) ;   
  300.      */     
  301.     FCKeditor.ReplaceAllTextareas = function()     
  302.     {     
  303.         //获取所有的textarea元素     
  304.         var textareas = document.getElementsByTagName( 'textarea' ) ;     
  305.             
  306.         for ( var i = 0 ; i < textareas.length ; i++ )     
  307.         {     
  308.             var editor = null ;     
  309.             var textarea = textareas[i] ;     
  310.             var name = textarea.name ;     
  311.             // The "name" attribute must exist.     
  312.             if ( !name || name.length == 0 )     
  313.                 continue ;     
  314.             if ( typeof arguments[0] == 'string' )     
  315.             {     
  316.                 // The textarea class name could be passed as the function     
  317.                 // parameter.     
  318.                 var classRegex = new RegExp( '(?:^| )' + arguments[0] + '(?:$| )' ) ;     
  319.                 if ( !classRegex.test( textarea.className ) )     
  320.                     continue ;     
  321.             }     
  322.             else if ( typeof arguments[0] == 'function' )     
  323.             {     
  324.                 // An assertion function could be passed as the function parameter.     
  325.                 // It must explicitly return "false" to ignore a specific <textarea>.     
  326.                 editor = textareaToEditor( textarea ) ;     
  327.                 if ( arguments[0]( textarea, editor ) === false )     
  328.                     continue ;     
  329.             }     
  330.             if ( !editor )     
  331.                 editor = textareaToEditor( textarea ) ;     
  332.             editor.ReplaceTextarea() ;     
  333.         }     
  334.     }     
  335. })() ;     
  336.      
  337.      
  338.      
  339. /**   
  340.  * 检测浏览器的兼容性   
  341. * 利用了navigator对象返回的一些信息sAgent,判断浏览器  返回包括    浏览器的码名 浏览器名  浏览器版本  语言 等信息 并小写   
  342. *  例如:   
  343. * mozilla/4.0 (compatible; msie 6.0; windows nt 5.2; sv1; .net clr 1.1.4322)   
  344.  
  345. * 判断IE浏览器的时候,运用了IE4.0之后支持的增加了对条件编译,   
  346. * 由于只是IE支持,在W3C标准浏览器中,该属性是不被支持的。因此,适当的利用该特性,判断IE   
  347. */     
  348. function FCKeditor_IsCompatibleBrowser()     
  349. {     
  350.     var sAgent = navigator.userAgent.toLowerCase() ;     
  351.     // 当前浏览器是Internet Explorer 5.5+     
  352.     //利用条件编译判断IE 在IE中,/*@cc_on!@*/false == !false == true,     
  353.     //如果是非IE浏览器,则忽略,/*@cc_on!@*/false == false     
  354.     if ( /*@cc_on!@*/false && sAgent.indexOf("mac") == -1 )   //不是apple mac os     
  355.     {     
  356.         var sBrowserVersion = navigator.appVersion.match(/MSIE (.\..)/)[1] ;     
  357.         return ( sBrowserVersion >= 5.5 ) ;     
  358.     }     
  359.      
  360.     // Gecko (Opera 9 tries to behave like Gecko at this point).     
  361.     //检测是否是OPERA 9 浏览器     
  362.     if ( navigator.product == "Gecko" && navigator.productSub >= 20030210 && !( typeof(opera) == 'object' && opera.postError ) )     
  363.         return true ;     
  364.     // Opera 9.50+     
  365.     if ( window.opera && window.opera.version && parseFloat( window.opera.version() ) >= 9.5 )     
  366.         return true ;     
  367.     // Adobe AIR     
  368.     // Checked before Safari because AIR have the WebKit rich text editor     
  369.     // features from Safari 3.0.4, but the version reported is 420.     
  370.     if ( sAgent.indexOf( ' adobeair/' ) != -1 )     
  371.         return ( sAgent.match( / adobeair\/(\d+)/ )[1] >= 1 ) ;    // Build must be at least v1     
  372.     // Safari 3+     
  373.     if ( sAgent.indexOf( ' applewebkit/' ) != -1 )     
  374.         return ( sAgent.match( / applewebkit\/(\d+)/ )[1] >= 522 ) ;    // Build must be at least 522 (v3)     
  375.     return false ;     
  376. }  
分享到:
评论

相关推荐

    fckeditor.js文件中文注释

    通过阅读fckeditor.js的中文注释,开发者不仅可以了解FCKeditor的内部工作机制,还能学习到JavaScript编程、DOM操作以及事件处理等多方面的知识。这对于我们理解和自定义FCKeditor,甚至开发自己的富文本编辑器都...

    FckEditor V2.6 fckconfig.js详细中文注释

    ### FckEditor V2.6 fckconfig.js详细中文注释 #### 1. `FCKConfig.CustomConfigurationsPath=''` // 自定义配置路径 这一行设置了FCKEditor的自定义配置文件路径,默认为空字符串。如果需要加载额外的配置文件,...

    fckconfig.js中文注释

    ### FckEditor V2.6 fckconfig.js 配置详解 #### 1. `FCKConfig.CustomConfigurationsPath = '' ;` - **说明:** 此配置项用于指定自定义配置文件的路径和名称。 - **作用:** 通过这一配置,用户可以指定额外的...

    FCKeditor获取选中内容的JS

    以上就是关于“FCKeditor获取选中内容的JS”的详细解析。理解并掌握这些知识点,可以让你在使用FCKeditor时更加游刃有余,无论是开发还是维护,都能提高工作效率。同时,记住在编写代码时加入清晰的注释,以便于他人...

    fckeditor使用手册

    &lt;script type="text/javascript" src="/fckeditor/fckeditor.js"&gt; &lt;script type="text/javascript"&gt; var oFCKeditor = new FCKeditor( 'FCKeditor1' ) ; oFCKeditor.Create() ; ``` 这里 `FCKeditor1` 是编辑器的...

    FckEditor中文配置手册详细说明.docx

    其次,通过预处理步骤,如移除代码注释和无用空格,以及合并脚本文件,FckEditor的脚本大小可以被压缩到原来的一半,显著提高了加载速度。 为了打包和压缩FckEditor的JS脚本,用户可以使用自带的打包程序——...

    FCKeditor参考手册

    1. **预处理**:为了减小文件大小,FCKeditor的JS脚本会去除注释和空格,然后合并到一起。 2. **打包程序**:位于`_PACKAGER`文件夹的`Fckeditor.Packager.exe`,是.NET程序,需要.NET Framework支持。运行程序可以...

    FckEditor配置手册中文教程详细说明.doc

    为了优化性能,FCKEditor的JS脚本会在打包新版本时进行预处理,包括移除注释、删除无用空白字符和合并脚本文件,这样可以将文件大小压缩至原大小的一半。预处理后的代码保存在_Source文件夹中。用户可以通过编辑器...

    Fckeditor中文文档

    &lt;script type="text/javascript" src="/fckeditor/fckeditor.js"&gt; ``` 2. **创建编辑器**:在页面的`FORM`标签内通过JavaScript代码创建编辑器实例。 ```javascript var oFCKeditor = new FCKeditor('FCKeditor1...

    FckEditor中文配置手册详细说明

    &lt;script type="text/javascript" src="/fckeditor/fckeditor.js"&gt; ``` ##### 2. 创建编辑器实例 通过JavaScript代码创建编辑器实例。推荐使用内联方式,即将创建编辑器的代码直接写入HTML文档中,如: ```...

    FckEditor 中文配置手册详细说明

    &lt;script type="text/javascript" src="/fckeditor/fckeditor.js"&gt; ``` 2. **初始化编辑器**:在页面中使用JavaScript代码初始化编辑器实例。 ##### 方法2: 使用API 除了直接在HTML中引用外,还可以通过API的方式...

    FCKeditor 源代码分析附中文注释

    它的源代码主要由JavaScript编写,其中`fckeditor.js`是核心类文件,负责编辑器的初始化、配置以及功能实现。以下是对`fckeditor.js`中部分关键知识点的详细解释: 1. **FCKeditor构造函数**: 当创建一个新的...

    FCKeditor添加自定义按钮

    在FCKeditor目录里的fckconfig.js打开,找到FCKConfig.ToolbarSets[“Default”] 这里的设置是配置功能按钮的,你需要的留下,不需要的可以删掉,也可以注释掉。 如需要多种配置,可以设置多个FCKConfig....

    joomla 编辑器

    7. `fckeditor`:这是一个目录,很可能包含了编辑器的JavaScript、CSS和其他相关资源文件,这些文件是FCKeditor运行所必需的。 8. `language`:这个目录可能包含了编辑器支持的不同语言包,使得非英语用户也能方便...

    Js 获取和修改FCKeditor的值的代码

    ### Js 获取和修改FCKeditor的值的代码详解 #### 一、概述 FCKeditor是一款功能强大的富文本编辑器,被广泛应用于Web应用程序中,为用户提供了一个接近桌面编辑器的体验。通过JavaScript,我们可以轻松地与...

    FCKeditor_API使用详解

    - 去掉注释 `//` 后,相当于将 `placeholder` 这个插件的功能添加到了FCKeditor中。 - 插件文件路径通常是 `FCKConfig.BasePath + 'plugins/'`。 通过上述介绍,我们可以看到FCKeditor_API提供了非常全面的功能,...

Global site tag (gtag.js) - Google Analytics