濮阳杆衣贸易有限公司

主頁(yè) > 知識(shí)庫(kù) > FCKeditor 源代碼分析附中文注釋

FCKeditor 源代碼分析附中文注釋

熱門(mén)標(biāo)簽:溫嶺代理外呼系統(tǒng) 激戰(zhàn)黃昏地圖標(biāo)注說(shuō)明 臨滄移動(dòng)外呼系統(tǒng)哪家有 隨州銷(xiāo)售外呼系統(tǒng)平臺(tái) 寧夏保險(xiǎn)智能外呼系統(tǒng)哪家好 交行外呼系統(tǒng)有哪些 怎么更改地圖標(biāo)注電話 不同的地圖標(biāo)注 防城港市ai電銷(xiāo)機(jī)器人
這幾天都在研究FCKeditor的源代碼 (FCKeditor就是網(wǎng)絡(luò)中應(yīng)用比較廣泛的網(wǎng)頁(yè)編輯器)  這里需要感謝nileaderblog的辛苦翻譯。

幾乎搜遍了Internet,似乎對(duì)于fckconfig.js這個(gè)文件講解的很多,但對(duì)于fckeditor.js這個(gè)FCK的核心類(lèi)文件的資料幾乎為0.

所以,花了整整一天的時(shí)間,以擠牙膏的方式,對(duì)fckeditor.js這個(gè)fck核心類(lèi)文件作了自己力所能及的注釋?zhuān)┩瑯訉W(xué)習(xí)fck的網(wǎng)友一個(gè)參考。

鑒于筆者水平有限,在此,請(qǐng)廣大高手指出我的注釋中不妥之處,以免誤導(dǎo)他人 。謝謝。

建議copy到自己的IDE中查看 或者
注:本文基于FCKeditor2.6.5
更多權(quán)威資料,請(qǐng)參見(jiàn) FCK 官方Developers Guide
復(fù)制代碼 代碼如下:

/**
*
* ***********CopyRight**************
*-------Annotated by nileader-----
*-----Version 1.00 2009-10-18-----
*-----Once copied, marked http://www.nileader.cn
*
* FCKeditor 類(lèi) annotated by nileader
* @param {Object} instanceName 編輯器的唯一名稱(chēng)(相當(dāng)于ID) 是不可省參數(shù),
* width,height,toolbarset,value 都是 可選參數(shù)
*/
var FCKeditor = function( instanceName, width, height, toolbarSet, value )
{
//編輯器的基本屬性 注意:這些東西優(yōu)先于FCKConfig.js中的配置

this.InstanceName = instanceName ; //編輯器的唯一名稱(chēng)(相當(dāng)于ID)(必須有!)
this.Width = width || '100%' ; //寬度 默認(rèn)是100%
this.Height = height || '200' ; //寬度 默認(rèn)是200
this.ToolbarSet = toolbarSet || 'Default' ;//工具集名稱(chēng),默認(rèn)值是Default
this.Value = value || '' ; //初始化編輯器的HTML代碼,默認(rèn)值為空
//編輯器初始化的時(shí)候默認(rèn)的根路徑, 其作用是編寫(xiě)fck中,凡是用到的路徑,均從FCKeditor.BasePath目錄開(kāi)始 默認(rèn)為/Fckeditor/
this.BasePath = FCKeditor.BasePath ;
this.CheckBrowser = true ; //是否在顯示編輯器前檢查瀏覽器兼容性,默認(rèn)為true
this.DisplayErrors = true ; //是否顯示提示錯(cuò)誤,默為true
this.Config = new Object() ;
// Events
this.OnError = null ; // function( source, errorNumber, errorDescription )自定義的錯(cuò)誤處理函數(shù)
}
FCKeditor.BasePath = '/fckeditor/' ; // fck默認(rèn)的根目錄
FCKeditor.MinHeight = 200 ; //高和寬的限制
FCKeditor.MinWidth = 750 ;
FCKeditor.prototype.Version = '2.6.5' ; //版本號(hào)
FCKeditor.prototype.VersionBuild = '23959' ;
/**
* 調(diào)用CreateHtml()來(lái)生成編輯器的html代碼并在頁(yè)面上輸出編輯器
*/
FCKeditor.prototype.Create = function()
{
//調(diào)用createhtml()方法
document.write( this.CreateHtml() ) ;
}
/**
* @return sHtml 用于生成編輯器的html代碼
*/
FCKeditor.prototype.CreateHtml = function()
{
// 檢查有無(wú)InstanceName 如果沒(méi)有則不生成html代碼
if ( !this.InstanceName || this.InstanceName.length == 0 )
{
this._ThrowError( 701, 'You must specify an instance name.' ) ;
return '' ;
}
//函數(shù)的返回值
var sHtml = '' ;
/*
* 當(dāng)用戶的瀏覽器符合預(yù)設(shè)的幾種瀏覽器時(shí),
* 生成一個(gè)id="this.instancename" name="this.instancename"的文本框,事實(shí)上的內(nèi)容儲(chǔ)存器
*/
if ( !this.CheckBrowser || this._IsCompatibleBrowser() )
{
//將此時(shí)FCK初始值通過(guò)轉(zhuǎn)義之后放入這個(gè)input
sHtml += 'input type="hidden" id="' + this.InstanceName + '" name="' + this.InstanceName + '" value="' + this._HTMLEncode( this.Value ) + '" style="display:none" style="display:none" />' ;
//生成一個(gè)隱藏的INPUT來(lái)放置this.config中的內(nèi)容
sHtml += this._GetConfigHtml() ;
//生成編輯器的iframe的代碼
sHtml += this._GetIFrameHtml() ;
}
/**
* 如果用戶的瀏覽器不兼容FCK默認(rèn)的幾種瀏覽器
* 只能有傳統(tǒng)的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 ;
}
/**
* 用編輯器來(lái)替換對(duì)應(yīng)的文本框
*/
FCKeditor.prototype.ReplaceTextarea = function()
{
//如果已經(jīng)有了 id=THIS.INSTANCENAME___Frame 的標(biāo)簽時(shí),直接返回
if ( document.getElementById( this.InstanceName + '___Frame' ) )
return ;
//當(dāng)用戶的瀏覽器符合預(yù)設(shè)的幾種瀏覽器時(shí)
if ( !this.CheckBrowser || this._IsCompatibleBrowser() )
{
// We must check the elements firstly using the Id and then the name.
//獲取id=this.InstanceName的html標(biāo)簽
var oTextarea = document.getElementById( this.InstanceName ) ;
//獲取所有name=THIS.instancename的標(biāo)簽
var colElementsByName = document.getElementsByName( this.InstanceName ) ;
var i = 0;
/*
* 考慮到用戶html標(biāo)簽的命名不規(guī)范,所以進(jìn)行以下編歷判斷 筆者指的是用戶在textarea標(biāo)簽處用了name=this.instancename
* 在同個(gè)頁(yè)面的其它標(biāo)簽上也用了name=this.instancename
*/
while ( oTextarea || i == 0 )
{
//遍歷,直到找到name=this.instancename的textarea標(biāo)簽,并賦給oTextarea
if ( oTextarea oTextarea.tagName.toLowerCase() == 'textarea' )
break ;
oTextarea = colElementsByName[i++] ;
}
//如果不存在id或者name為this.instancename的標(biāo)簽時(shí),彈出錯(cuò)誤框
if ( !oTextarea )
{
alert( 'Error: The TEXTAREA with id or name set to "' + this.InstanceName + '" was not found' ) ;
return ;
}
/*
* 確定存在name=this.instancename的textarea標(biāo)簽后,將編輯器的代碼賦給它
*/
oTextarea.style.display = 'none' ;
//如果頁(yè)面上對(duì)這樣的textarea標(biāo)簽定義了tab鍵的順序,賦給this.TabIndex待用
if ( oTextarea.tabIndex )
this.TabIndex = oTextarea.tabIndex ;
this._InsertHtmlBefore( this._GetConfigHtml(), oTextarea ) ;
this._InsertHtmlBefore( this._GetIFrameHtml(), oTextarea ) ;
}
}



/**
* 在指定的頁(yè)面標(biāo)簽前面插入html代碼
* @param {Object} 待插入的html代碼
* @param {Object} 指定的頁(yè)面標(biāo)簽(對(duì)象)
*/
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 ) ;
}
}


/*
* 通過(guò)編歷this.Config[]來(lái)生成一個(gè)隱藏域,
* 例如:
* this.Config['nileader']="1104",this.Config['leaderni']="nichao"……
* 那么,sConfig=…… nileader=1104leaderni=nichao ……
* 當(dāng)然,最終,sConfig會(huì)被encodeURIComponent函數(shù)轉(zhuǎn)換成百分比編碼 放入隱藏的INPUT中去
*/
FCKeditor.prototype._GetConfigHtml = function()
{
var sConfig = '' ;
for ( var o in this.Config )
{
if ( sConfig.length > 0 ) sConfig += '' ;
//encodeURIComponent函數(shù)轉(zhuǎn)換成百分比編碼
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所在的窗口沒(méi)有嵌入在瀏覽器中
try
{
if ( (/fcksource=true/i).test( window.top.location.search ) )
sFile = 'fckeditor.original.html' ;
}
catch (e) { /* 忽略這個(gè)異常. 很多時(shí)候,fckedito所在的窗口嵌入在瀏覽器中. */ }
/*
* 這里注意的一點(diǎn):
* iframe的工作原理: 當(dāng)iframe處于可編輯狀態(tài)時(shí),其實(shí)編輯的是src所在的頁(yè)面
* 這里合成一個(gè)sLink以放入iframe標(biāo)簽中
*/
//sLink就是這個(gè)事實(shí)上的頁(yè)面了,從fck的根目錄開(kāi)始,例如 sLink=/fckeditor/editor/fckeditor.html?InstanceName=nileaderToolbar=nileadersbar
var sLink = this.BasePath + 'editor/' + sFile + '?InstanceName=' + encodeURIComponent( this.InstanceName ) ;
if (this.ToolbarSet)
sLink += 'Toolbar=' + this.ToolbarSet ;
//生成一個(gè)真正的編輯iframer的html代碼 當(dāng)然,放入了src=slink
var html = 'iframe id="' + this.InstanceName +
'___Frame" src="' + sLink +
'" src="' + sLink +
'" width="' + this.Width +
'" height="' + this.Height ;
//如果設(shè)定了使用"Tab"鍵的遍歷順序,則賦給iframe
if ( this.TabIndex )
html += '" tabindex="' + this.TabIndex ;
html += '" frameborder="0" scrolling="no">/iframe>' ;
return html ;
}

/*
* 檢測(cè)用戶的bowser是否是fck的默認(rèn)
* 這個(gè)方法只是fck公司追求oo,無(wú)意義
*/
FCKeditor.prototype._IsCompatibleBrowser = function()
{
return FCKeditor_IsCompatibleBrowser() ;
}

/**
* 拋出錯(cuò)誤
* @param {Object} errorNumber 錯(cuò)誤編號(hào)
* @param {Object} errorDescription 錯(cuò)誤概述
*/
FCKeditor.prototype._ThrowError = function( errorNumber, errorDescription )
{
this.ErrorNumber = errorNumber ;
this.ErrorDescription = errorDescription ;
//是否顯示提示錯(cuò)誤,默為true
if ( this.DisplayErrors )
{ //將錯(cuò)誤編號(hào)和錯(cuò)誤概述打印出來(lái)
document.write( 'div style="COLOR: #ff0000" style="COLOR: #ff0000">' ) ;
document.write( '[ FCKeditor Error ' + this.ErrorNumber + ': ' + this.ErrorDescription + ' ]' ) ;
document.write( '/div>' ) ;
}
//OnError是否自定義了錯(cuò)誤處理函數(shù),若定義了,由其處理
if ( typeof( this.OnError ) == 'function' )
this.OnError( this, errorNumber, errorDescription ) ;
}

/**
* 轉(zhuǎn)義文本
* @param {Object} text 待轉(zhuǎn)義的文本
* @return String text 轉(zhuǎn)義完后的文本
*/
FCKeditor.prototype._HTMLEncode = function( text )
{
if ( typeof( text ) != "string" )
text = text.toString() ;
//將字符串中的所有 " > 用對(duì)應(yīng)的轉(zhuǎn)義字符代換
text = text.replace(
//g, "").replace(
/"/g, """).replace(
//g, "").replace(
/>/g, ">") ;
return text ;
}

;(function()
{
//把頁(yè)面上的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() ;
}
}
})() ;

/**
* 檢測(cè)瀏覽器的兼容性
* 利用了navigator對(duì)象返回的一些信息sAgent,判斷瀏覽器 返回包括 瀏覽器的碼名 瀏覽器名 瀏覽器版本 語(yǔ)言 等信息 并小寫(xiě)
* 例如:
* mozilla/4.0 (compatible; msie 6.0; windows nt 5.2; sv1; .net clr 1.1.4322)
*
* 判斷IE瀏覽器的時(shí)候,運(yùn)用了IE4.0之后支持的增加了對(duì)條件編譯,
* 由于只是IE支持,在W3C標(biāo)準(zhǔn)瀏覽器中,該屬性是不被支持的。因此,適當(dāng)?shù)睦迷撎匦?,判斷IE
*/
function FCKeditor_IsCompatibleBrowser()
{
var sAgent = navigator.userAgent.toLowerCase() ;
// 當(dāng)前瀏覽器是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).
//檢測(cè)是否是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 ;
}
您可能感興趣的文章:
  • jQuery 表格隔行變色代碼[修正注釋版]
  • HTML代碼中標(biāo)簽的全部屬性 中文注釋說(shuō)明
  • JavaScript 事件監(jiān)聽(tīng)實(shí)例代碼[兼容IE,firefox] 含注釋
  • asp.net畫(huà)曲線圖(折線圖)代碼 詳細(xì)注釋
  • Javascript 倒計(jì)時(shí)源代碼.(時(shí).分.秒) 詳細(xì)注釋版
  • PHP壓縮html網(wǎng)頁(yè)代碼(清除空格,換行符,制表符,注釋標(biāo)記)
  • 網(wǎng)頁(yè)中返回頂部代碼(多種方法)另附注釋說(shuō)明
  • 代碼中到底應(yīng)不應(yīng)當(dāng)寫(xiě)注釋?zhuān)?/li>

標(biāo)簽:河源 無(wú)錫 忻州 紅河 青海 哈密 阜陽(yáng) 沈陽(yáng)

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《FCKeditor 源代碼分析附中文注釋》,本文關(guān)鍵詞  FCKeditor,源代碼,分析,附,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無(wú)關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《FCKeditor 源代碼分析附中文注釋》相關(guān)的同類(lèi)信息!
  • 本頁(yè)收集關(guān)于FCKeditor 源代碼分析附中文注釋的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章
    乌审旗| 梨树县| 玛多县| 弋阳县| 海盐县| 孝昌县| 綦江县| 安西县| 崇州市| 张掖市| 界首市| 宕昌县| 云南省| 清水河县| 巴彦淖尔市| 汾阳市| 乡城县| 辛集市| 吉安市| 那曲县| 商南县| 武强县| 南昌县| 眉山市| 称多县| 青海省| 彰化县| 安义县| 桑植县| 瑞昌市| 南召县| 漯河市| 天长市| 文化| 长寿区| 兰西县| 毕节市| 交口县| 防城港市| 承德市| 栖霞市|