fckeditor 소스 코드 분석 (i) Fckeditor.js의 중국 주석 분석 분석은 지난 며칠 동안 fckeditor의 소스 코드를 연구하고 있습니다 (Fckeditor는 네트워크에 광범위한 응용 프로그램이있는 웹 편집기입니다). 어려운 번역에 대해 Nileaderblog에게 감사해야합니다.
나는 거의 모든 인터넷을 검색했으며 fckconfig.js 파일에 대해 많은 설명을했지만 fckeditor.js의 핵심 FCK 파일에 대한 정보는 거의 0입니다.
따라서 Fckeditor.js Core 파일 Fckeditor.js에 대해 Fckeditor를 배우는 Netizens의 참조를 위해 Fckeditor.js Core 파일에 댓글을 달기 위해 하루 종일 보냈습니다.
저자의 수준이 제한되어 있다는 점을 감안할 때 여기에서 다른 사람들을 오도하지 않도록 내 의견에 부적절한 요점을 지적하십시오. 감사해요.
IDE에 복사하는 것이 좋습니다.
참고 :이 기사는 FckEditor2.6.5를 기반으로합니다
더 많은 권위있는 정보는 FCK 공식 개발자 안내서를 참조하십시오.
코드 사본은 다음과 같습니다.
/**
*
**********저작권***************
*-------- Nileader에 의해 주석이 달린다 ----
*---- 버전 1.00 2009-10-18 ----
*---- 일단 복사하면 http://www.nileader.cn으로 표시됩니다
*
* fckeditor 클래스 Nileader가 주석을 달았습니다
* @param {object} instancename 편집기의 고유 한 이름 (ID와 동일)은 구축되지 않은 매개 변수입니다.
* 너비, 높이, 도구 모음, 값은 모두 선택적 매개 변수입니다
*/
var fckeditor = 함수 (InstanceName, 너비, 높이, 도구 모음, 값)
{
// 편집기의 기본 속성 참고 : 이러한 것들은 fckconfig.js의 구성보다 우선합니다.
this.instancename = instanceName; // 편집기의 고유 한 이름 (ID에 해당) (꼭 가져야합니다!)
this.width = 너비 || '100%'; // 너비는 기본적으로 100%입니다
this.height = 높이 || '200'; // 너비는 기본적으로 200입니다
this.toolbarset = Toolbarset || '기본값'; // 도구 세트 이름, 기본값은 기본값입니다.
this.value = value || '';; // 편집기의 HTML 코드를 초기화하면 기본값이 비어 있습니다.
// 편집기가 초기화 된 기본 루트 경로는 FCK를 작성하는 것입니다. 사용 된 모든 경로는 fckeditor.basepath 디렉토리에서 / fckeditor /로 기본적으로 표시됩니다.
this.basepath = fckeditor.basepath;
this.checkbrowser = true; // 편집기를 표시하기 전에 브라우저 호환성을 확인할지 여부는 기본값입니다.
this.displayErrors = true; // 오류로 표시 되든 기본값은 사실입니다.
this.config = new Object ();
// 이벤트
this.onerror = null; // 함수 (소스, errornumber, errordescription) 사용자 정의 오류 처리 기능
}
fckeditor.basepath = '/fckeditor/'; // FCK의 기본 루트 디렉토리
fckeditor.minheight = 200; // 높이와 너비의 한계
fckeditor.minwidth = 750;
fckeditor.prototype.version = '2.6.5'; // 버전 번호
fckeditor.prototype.versionbuild = '23959';
/**
* 편집기의 HTML 코드를 생성하고 페이지에서 편집기를 출력하려면 CreateHtml ()을 호출하십시오.
*/
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._hrowerror (701, '인스턴스 이름을 지정해야합니다.');
반품 '' ;
}
// 함수의 반환 값
var shtml = '';
/*
* 사용자의 브라우저가 여러 사전 설정 브라우저를 만나면
* id = this.instanceame name = this.instanceName, 사실상 콘텐츠 저장소로 텍스트 상자 생성
*/
if (! this.checkbrowser || this._iscompatibleBrowser ())
{
// FCK 초기 값이 빠져 나온 후이 입력을 넣습니다
shtml + = '<input type = hidden id =' + this.instancename + 'name =' + this.instanceName + 'value =' + this._htmlencode (this.value) + 'style = display : none style = display : none />';
// 숨겨진 입력을 생성하여 this.config에 내용을 배치합니다.
shtml += this._getConfightml ();
// 편집기의 iframe을 생성하는 코드
shtml += this._getiframehtml ();
}
/**
* 사용자의 브라우저가 기본 FCK 브라우저와 호환되지 않는 경우
* 전통적인 텍스토리 만 찾을 수 있습니다
*/
또 다른
{
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 +
'행 = 4 cols = 40 스타일 = 너비 :' + swidth +
'; 높이 :' + sheight;
if (this.tabindex)
shtml + = 'tabindex =' + this.tabindex;
shtml += '>' +
this._htmlencode (this.value) +
'<// textarea>';
}
SHTML을 반환합니다.
}
/**
* 편집기를 사용하여 해당 텍스트 상자를 교체하십시오.
*/
fckeditor.prototype.replacetextArea = function ()
{
// 이미 태그 id = this.instanceName ___ 프레임이있는 경우 직접 돌아갑니다
if (document.getElementById (this.instanceName + '___frame')))
반품 ;
// 사용자의 브라우저가 여러 사전 설정 브라우저를 충족 할 때
if (! this.checkbrowser || this._iscompatibleBrowser ())
{
// 먼저 ID와 이름을 사용하여 요소를 확인해야합니다.
// id = this.instanceName의 HTML 태그를 가져옵니다
var otextArea = document.getElementById (this.instanceName);
// 이름 = this.instanceName의 모든 태그를 가져옵니다
var colelementsbyName = document.getElementsByName (this.instanceName);
var i = 0;
/*
* 사용자의 HTML 태그의 이름 지정이 표준화되지 않았다는 것을 고려할 때 다음 기록은 텍스트 레이아 태그에서 이름 = this.instanceame을 사용하여 사용자를 언급하는 것을 결정하기 위해 작성됩니다.
* name = this.instanceame도 같은 페이지의 다른 태그에서도 사용됩니다.
*/
while (otextArea || i == 0)
{
// name의 textarea 태그가 될 때까지 이동합니다 = this.instanceName이 발견되어 otextArea에 할당됩니다.
if (otextArea && otextArea.tagname.tolowercase () == 'textArea')
부서지다;
otextArea = colElementsByName [i ++];
}
// id의 ID 또는 이름이있는 태그가 없으면 instanceName, 오류 상자가 나타납니다.
if (! otextArea)
{
ALERT ( '오류 :' + this.instanceName + '로 설정된 ID 또는 이름이있는 텍스트의 이름을 찾을 수 없었습니다');
반품 ;
}
/*
* name = this.instanceName이있는 TextRea 태그가 있음을 확인한 후 편집자 코드를 할당하십시오.
*/
otextArea.style.display = 'none';
// 탭 키 순서가 해당 TextArea 태그의 페이지에 정의되어 있으면 나중에 사용하기 위해 this.tabindex에 할당하십시오.
if (otextArea.tabindex)
this.tabindex = otextArea.tabindex;
this._inserthtmlbefore (this._getConfightMl (), otextArea);
이.
}
}
/**
* 지정된 페이지 태그 앞에서 HTML 코드 삽입
* @param {object} html 코드를 삽입 할 것입니다
* @param {object} 지정된 페이지 태그 (개체)
*/
fckeditor.prototype._inserthtmlbefore = function (html, element)
{
if (element.insertadjacenthtml) // 즉 개인 INSERTADJACENDTML 메소드
요소 .insertadjacenthtml ( 'preciorbegin', html);
else // 비이 브라우저
{
var Orange = Document.CreateRange ();
Orange.setStartBefore (요소);
var ofragment = Orange.CreateContextualFragment (HTML);
element.parentNode.insertbefore (Ofragment, emeld);
}
}
/*
* this.config []를 편집하여 숨겨진 도메인을 생성하십시오.
* 예를 들어:
* this.config [ 'nileader'] = 1104, this.config [ 'leadterni'] = nichao ...
* 그런 다음 sconfig =… & nileader = 1104 & leaderni = nichao…
* 물론 결국 Sconfig는 EncodeUricomponent 함수에 의해 인코딩 백분율로 변환되어 숨겨진 입력에 넣습니다.
*/
fckeditor.prototype._getConfightml = function ()
{
var sconfig = '';
for (var o 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가있는 창은 브라우저에 포함되지 않았습니다.
노력하다
{
if ((/fckSource = true/i) .test (window.top.location.search))
sfile = 'fckeditor.original.html';
}
Catch (e) { /*이 예외를 무시하십시오. 여러 번, Fckedito가있는 창은 브라우저에 포함되어 있습니다. */}
/*
* 여기에 주목해야 할 사항 :
* iframe의 작동 방식 : iframe이 편집 가능한 상태에있을 때 SRC가 실제로 편집 된 페이지
* 여기에 iframe 태그에 넣을 수있는 슬링크가 있습니다.
*/
// Slink는 FCK의 루트 디렉토리에서 시작하는이 사실상의 페이지입니다.
var slink = this.basepath + '편집기/' + 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 +
'높이 =' + this.height;
// 탭 키를 사용한 순서가 설정된 경우 iframe에 할당하십시오.
if (this.tabindex)
html + = 'tabindex =' + this.tabindex;
html += 'framborder = 0 스크롤 = no> </iframe>';
반환 html;
}
/*
* 사용자의 Bowser가 FCK의 기본값인지 확인
*이 방법은 FK Company를 추구하는 것입니다.
*/
fckeditor.prototype._iscompatibleBrowser = function ()
{
return fckeditor_iscompatiblebrowser ();
}
/**
* 오류가 발생했습니다
* @param {Object} Errornumber 오류 번호입니다
* @param {object} errordescription 오류 개요
*/
fckeditor.prototype._hrowerror = function (erornumber, errordescription)
{
this.errornumber = errornumber;
this.errordescription = errordescription;
// 오류로 표시 되든 기본값은 사실입니다.
if (this.displayErrors)
{// 오류 번호와 오류 개요를 인쇄합니다
document.write ( '<div style = color : #ff0000 스타일 = 색상 : #ff0000>');
documb
document.write ( '</div>');
}
// onerror 오류 처리 기능이 사용자 정의되었는지 여부에 따라 정의하면 처리됩니다.
if (typeof (this.onerror) == 'function')
this.onerror (this, errornumber, errordescription);
}
/**
* 탈출 텍스트
* @param {object} 텍스트를 피할 것입니다
* 탈출 후 @return 문자열 텍스트
*/
fckeditor.prototype._htmlencode = function (텍스트)
{
if (typeof (text)! = String)
text = text.toString ();
// 문자열에서 All & <>을 해당 탈출 문자로 대체
text = text.replace (
/&/g, &). 교체 (
// g,) .replace (
/</g, <). 교체 (
/>/g,>);
리턴 텍스트;
}
;(기능()
{
// 페이지의 TextArea 요소를 편집기 변수에 할당
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);
반환 편집기;
}
/**
* 문서에서 사용 가능한 모든 <textRea> 요소를 fckeditor로 교체하십시오.
* 인스턴스.
*
* // 페이지의 모든 <textRea> 요소를 교체하십시오.
* fckeditor.replaceallTextAreas ();
*
* // 모든 <TextArea Class = MyClassName> 요소를 대체합니다.
* fckeditor.replacealltextAreas ( 'myclassName');
*
* // 사용자 정의 어설 션을 기반으로 <textRea> 요소를 선택적으로 교체하십시오.
* fckeditor.replacealltextAreas (function (textArea, editor)
* {
* // 교체를 평가하기위한 사용자 정의 코드, IT가 있으면 거짓을 반환합니다.
* // 완료해서는 안됩니다.
* // 편집기 매개 변수도 전달되므로 개발자는
* // 인스턴스를 사용자 정의합니다.
*});
*/
fckeditor.replacealltextAreas = function ()
{
// 모든 TextArea 요소를 얻습니다
var textAreas = document.getElementsByTagName ( 'textArea');
for (var i = 0; i <textAreas.length; i ++)
{
var editor = null;
var textRea = textReas [i];
var name = textArea.name;
// 이름 속성이 존재해야합니다.
if (! name || name.length == 0)
계속하다 ;
if (typeof arguments [0] == 'string')
{
// TextArea 클래스 이름은 함수로 전달 될 수 있습니다.
// 매개 변수.
var classRegex = new regexp ( '(? :^|)' + arguments [0] + '(? : $ |)');
if (! classregex.test (textarea.classname))
계속하다 ;
}
else if (typeof arguments [0] == 'function')
{
// 어설 션 함수는 함수 매개 변수로 전달 될 수 있습니다.
// 특정 <TextRea>를 무시하려면 False를 명시 적으로 반환해야합니다.
편집기 = TextareatoEditor (TextArea);
if (인수 [0] (Textarea, editor) === 거짓)
계속하다 ;
}
if (! 편집기)
편집기 = TextareatoEditor (TextArea);
editor.replacetextArea ();
}
}
}) ();
/**
* 브라우저 호환성을 감지합니다
* Navigator Object에서 반환 한 일부 정보를 사용하면 브라우저가 브라우저의 코드 이름, 브라우저 이름, 브라우저 버전 언어 및 기타 정보 및 소문자를 포함한 정보를 반환한다고 결정합니다.
* 예를 들어:
* Mozilla/4.0 (호환 가능; MSIE 6.0; Windows NT 5.2; SV1; .NET CLR 1.1.4322)
*
* IE 브라우저를 판단 할 때 IE4.0을 사용한 후 지원되는 조건부 편집이 추가됩니다.
* IE에 의해서만 지원 되므로이 속성은 W3C 표준 브라우저에서 지원되지 않습니다. 따라서 IE는이 기능을 사용하여 적절하게 판단됩니다.
*/
함수 fckeditor_iscompatiblebrowser ()
{
var sagent = navigator.useragent.tolowercase ();
// 현재 브라우저는 Internet Explorer 5.5+입니다
// 조건부 편집을 사용하여 ie, ie 판사,/*@cc_on!@*/false ==! false == true,
// 비이 브라우저 인 경우, 무시하십시오,/*@cc_on!@*/false == false
if ( /*@cc_on!@* /false && sagent.indexof (mac) == -1) // Apple Mac ON이 아닙니다.
{
var sbrowserversion = navigator.appversion.match (/msie (./..)/)9];
return (sbrowserversion> = 5.5);
}
// Gecko (Opera 9는이 시점에서 Gecko처럼 행동하려고합니다).
// Opera 9 브라우저인지 여부를 감지합니다
if (navigator.product == gecko && navigator.productsub> = 20030210 &&!
진실을 반환하십시오.
// 오페라 9.50+
if (window.opera && window.opera.version && parsefloat (window.opera.version ())> = 9.5)
진실을 반환하십시오.
// Adobe Air
// Air가 WebKit Rich Text 편집기를 가지고 있기 때문에 Safari 이전에 확인되었습니다.
// Safari 3.0.4의 기능이지만보고 된 버전은 420입니다.
if (sagent.indexof ( 'adobeair/')! = -1)
return (sagent.match (/adobeair // (/d+)/) [1]> = 1); // 빌드는 v1 이상이어야합니다
// 사파리 3+
if (sagent.indexof ( 'Applewebkit/')! = -1)
return (sagent.match (/applewebkit // (/d+)/) [1]> = 522); // 빌드는 522 (v3) 이상이어야합니다.
거짓을 반환합니다.
}