FCKEDITORソースコード分析(i)FCKEDITOR.JSの中国の注釈分析は、過去数日間FCKEDITORのソースコードを研究しています(FCKEDITORは、ネットワークに幅広いアプリケーションを備えたWebエディターです)。 nileaderblogのハード翻訳に感謝する必要があります。
私はほとんどすべてのインターネットを検索しましたが、FCKConfig.jsファイルについて多くのことを説明したようですが、FCKEDITOR.jsのコアFCKファイルに関する情報はほぼ0です。
そのため、fckeditor.jsコアファイルfckeditor.jsについてコメントするために、歯磨き粉を絞り込んでfckeditorも学びます。
著者のレベルが限られていることを考えると、ここでは、他の人を誤解させることを避けるために、私のコメントの不適切なポイントを指摘してください。ありがとう。
それをあなたのIDEにコピーすることをお勧めします
注:この記事はFCKEDITOR2.6.5に基づいています
より権威ある情報については、FCK公式開発者ガイドを参照してください
コードコピーは次のとおりです。
/**
*
********** Copyright *************
*-------- Nileaderによって注釈が付けられました----
*----バージョン1.00 2009-10-18 ----
*----コピーされると、http://www.nileader.cnとマークされています
*
* fckeditorクラスは、ニレアーダーによって注釈されています
* @param {object} instancenameエディターの一意の名前(IDに相当)は、救済されていないパラメーターです。
*幅、高さ、ツールベルセット、値はすべてオプションのパラメーターです
*/
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 || 「デフォルト」; //ツールセット名、デフォルト値はデフォルトです
this.value = value || ''; //エディターのHTMLコードを初期化する、デフォルト値は空です
//エディターが初期化されている場合のデフォルトのルートパスは、FCKを書き込むことです。使用されるすべてのパスは、fckeditor.basepathディレクトリから / fckeditor / fckeditor /にデフォルトで行われます。
this.basepath = fckeditor.basepath;
this.checkbrowser = true; //エディターを表示する前にブラウザの互換性を確認するかどうか、デフォルトはtrueです
this.displayerrors = true; //エラーで表示されるかどうか、デフォルトは真です
this.config = new object();
//イベント
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、 'インスタンス名を指定する必要があります。');
戻る '' ;
}
//関数の値を返します
var shtml = '';
/*
*ユーザーのブラウザがいくつかのプリセットブラウザを満たしているとき、
* id = this.instancename name = this.instanceNameでテキストボックスを生成し、事実上のコンテンツストレージ
*/
if(!this.checkbrowser || this._iscompatiblebrowser())
{
// FCKの初期値が逃げた後にこの入力を配置します
shtml + = '<input type = hidden id =' + this.instancename + 'name =' + this.instancename + 'value =' + this._htmlencode + '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 seight = 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>';
}
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);
// name = this.instanceNameのすべてのタグを取得します
var colelementsbyname = document.getElementsbyname(this.instancename);
var i = 0;
/*
*ユーザーのHTMLタグの命名が標準化されていないことを考慮すると、著者がtextareaタグのname = this.instancenameを使用してユーザーを参照することを判断するために次のレコードが作成されます。
* name = this.instancenameは同じページの他のタグでも使用されます
*/
while(otextarea || i == 0)
{
//名前のtextareaタグが= this.instancenameが見つかり、Otextareaに割り当てられるまで移動します
if(otextarea && otextarea.tagname.tolowercase()== 'textarea')
壊す;
otextarea = colelementsbyname [i ++];
}
// IDまたはこの名前のタグがない場合。
if(!otextarea)
{
alert( 'エラー:IDまたは名前を' + this.instancename + 'に設定したTextareaは見つかりませんでした');
戻る ;
}
/*
* name = this.instancenameが存在するTextareaタグが存在することを確認した後、エディターのコードを割り当てます
*/
otextarea.style.display = 'none';
//このようなTextareaタグのタブキーオーダーがページに定義されている場合は、後で使用するために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 private insertadjacenthtmlメソッド
element.insertadjacenthtml( 'beforebegin'、html);
else // nonieブラウザ
{
var orange = document.createrange();
orange.setstartBefore(element);
var ofragment = orange.createcontextualfragment(html);
element.parentnode.insertbefore(of -rogment、element);
}
}
/*
* this.config []を編集して、非表示ドメインを生成します。
*例:
* this.config ['nileader'] = 1104、this.config ['leaderni'] = nichao ...
*次に、sconfig =…&nileader = 1104&leaderni = nichao…
*もちろん、最終的には、Sconfigはecodeuricoponent関数によってエンコードのパーセンテージに変換され、隠された入力に変換されます
*/
fckeditor.prototype._getConfightml = function()
{
var sconfig = '';
for(this.configのvar o)
{
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のルートディレクトリから始まる事実上ページです。たとえば、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をput
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>';
HTMLを返します。
}
/*
*ユーザーのクッパがFCKのデフォルトであるかどうかを確認します
*この方法は、OOを追求するFK会社だけです。
*/
fckeditor.prototype._iscompatiblebrowser = function()
{
return fckeditor_iscompatiblebrowser();
}
/**
*スローされたエラー
* @param {object} erronumberエラー番号
* @param {object} ererordescriptionエラーの概要
*/
fckeditor.prototype._throwerror = function(errornumber、errordescription)
{
this.errornumber = errornumber;
this.errordescription = ererordescription;
//エラーで表示されるかどうか、デフォルトは真です
if(this.displayerrors)
{//エラー番号とエラーの概要を印刷します
document.write( '<div style = color:#ff0000 style = color:#ff0000>');
document.write( '[fckeditorエラー' + this.errornumber + ':' + this.errordescription + ']');
document.write( '</div>');
}
// onerrorエラー処理機能がカスタマイズされているかどうか、定義されている場合、それによって処理されます
if(typeof(this.onerror)== 'function')
this.onerror(this、errornumber、errordescription);
}
/**
*テキストを逃がします
* @param {object}テキストは逃げます
* @return文字列テキストエスケープ後
*/
fckeditor.prototype._htmlencode = function(text)
{
if(typeof(text)!= string)
text = text.toString();
//ストリング内のすべての&<>を対応するエスケープ文字を置き換えます
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);
返品編集者。
}
/**
*ドキュメントで利用可能なすべての<textarea>要素をfckeditorに置き換えます
*インスタンス。
*
* //ページ内のすべての<textarea>要素を交換します。
* fckeditor.replacealltextareas();
*
* //ページ内のすべての<TextArea class = myClassName>要素を交換します。
* fckeditor.replacealltextareas( 'myclassname');
*
* //カスタムアサーションに基づいて、<textarea>要素を選択的に置き換えます。
* fckeditor.replacealltextareas(function(textarea、editor)
* {
* //交換を評価するためのカスタムコード。
* //やらないでください。
* //また、エディターパラメーターを渡すので、開発者は
* //インスタンスをカスタマイズします。
*});
*/
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;
//名前属性が存在する必要があります。
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引数[0] == 'function')
{
//関数パラメーターとしてアサーション関数を渡すことができます。
//特定の<TextArea>を無視するには、明示的にfalseを返す必要があります。
editor = textareatoeditor(textarea);
if(arguments [0](textarea、editor)=== false)
続く ;
}
if(!editor)
editor = textareatoeditor(textarea);
editor.replacetextarea();
}
}
})();
/**
*ブラウザの互換性を検出します
*ナビゲーターオブジェクトによって返されたいくつかの情報Sagentを使用して、ブラウザがブラウザのコード名、ブラウザ名、ブラウザバージョン言語、その他の情報やLowercaseなどの情報を返すことを決定します
* 例えば:
* 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、
//それが非IEブラウザの場合、それを無視してください、/*@cc_on!@*/false == false
if( /*@cc_on!@* /false && sagent.indexof(mac)== -1)// not not apple mac os
{
var sbrowserversion = navigator.appversion.match(/msie(./..)/) [1];
return(sbrowserversion> = 5.5);
}
// Gecko(Opera 9は、この時点でGeckoのように振る舞おうとします)。
//オペラ9ブラウザかどうかを検出します
if(navigator.product == gecko && navigator.productsub> = 20030210 &&!(typeof(opera)== 'object' && opera.posterror))))
trueを返します。
//オペラ9.50+
if(window.opera && window.opera.version && parsefloat(window.opera.version())> = 9.5)
trueを返します。
// Adobe Air
// airにはwebkitリッチテキストエディターがあるため、safariの前にチェックしました
// Safari 3.0.4の機能ですが、報告されたバージョンは420です。
if(sagent.indexof( 'adobeair/')!= -1)
return(sagent.match(/adobeair //(/d+)/)[1]> = 1); //ビルドは少なくともv1でなければなりません
// Safari 3+
if(sagent.indexof( 'applewebkit/')!= -1)
return(sagent.match(/applewebkit //(/d+)/)[1]> = 522); //ビルドは少なくとも522(V3)である必要があります
falseを返します。
}