Ajax FCKeditor rich editor integration page 1/2

(Http://www.fckeditor.net, javaeye editor is also used FCKeditor, XX see slightly the same? Haha), it's opensource (free, you can change it directly Source code Ah, haha), powerful (almost a Web version of Office Word), providing support for various servers (although it is completely a pure client, however. net, PHP, Java, ColdFusion, Perl, lasso, and Python are tightly integrated with various server-side scripts. They support internationalization (excellent in Chinese ), replaceable skin (Office 2000 style can be messy), embedded file upload (Java version supports this), to maintain a certain Update Status (the current version is 2.3.2), and so on. Of course, it still has n functions, but I haven't studied it carefully. If any one of them is used, let us know one or two.

I will not list the usage of FCKeditor here. There are many relatedArticleIt also comes with a good sample, which can be easily added to our own project.

But how to use the FCKeditor Control in Ajax applications? This FCKeditor does not seem to provide the corresponding answer, because Ajax uses no refreshing new submissions, and FCKeditor can only be used in Form submission. Why, let's start with the FCKeditor execution process.

the FCKeditor editor is actually an IFRAME. Each time you create an FCKeditor object, an IFRAME is created, and various toolbar and editing areas are inserted into this IFRAME, there must be a corresponding input element outside IFRAME (this is generally a textarea, FCKeditor called external field). In this way, you can import the existing content in textarea to the editor, or update the edited content to the field. When will the content in FCKeditor be saved to the corresponding external field? At first, I didn't look at the source code. I thought it was when the content in FCKeditor was changed, And I updated the field at the same time. Later I found that it wasn't. If so, then we can easily use FCKeditor in Ajax. So when will it be synchronized with the synchronized field? The answer must be that before the form executes the submit event, the only way to update before the submit event is to bind the updated callback function to the onsubmit event through the attachevent method, then, call the bound function before submit in a certain way. Therefore, I searched for onsubmit in the core JS file provided by FCKeditor, and found the onsubmit keyword in the fckeditorcode_ie.js file (here I have to mention that, although FCKeditor is open-source, however, the Code of their JavaScript source is retained, and many core JS files in the source are obfuscated and rearranged, however, this cannot blame others for being rude. For the convenience of viewing the source code, we recommend that you use the document format function of myeclipse for formatting, so that the structure inside can be clearly understood ).

the related code is as follows. First, when FCKeditor is initialized: copy Code the code is as follows: function fck_editingarea_onload () {
fck. editorwindow = fck. editingarea. window;
fck. editordocument = fck. editingarea. document;
fck. initializebehaviors ();
fck. onaftersethtml ();
If (fck. status! = Fck_status_notloaded) {
return;
}< br> fck. resetisdirty ();
fcktools. attachtolinkedfieldformsubmit (fck. updatelinkedfield); // start binding
fck. setstatus (fck_status_active);
}

The processing before submit is submitted:Copy codeCode: fcktools. attachtow.fieldformsubmit = function (){
VaR B = fck. Marshfield. form;
If (! B ){
Return;
}
If (fckbrowserinfo. isie ){
B. attachevent ("onsubmit", a); // process the update to the onsubmit event bound to the form.
} Else {
B. addeventlistener ("Submit", A, false );
}
If (! B. updatefckeditor ){
B. updatefckeditor = new array ();
}
B. updatefckeditor [B. updatefckeditor. Length] =;
If (! B. originalsubmit & (typeof (B. Submit) = "function" | (! B. Submit. tagname &&! B. Submit. Length ))){
B. originalsubmit = B. Submit;
B. Submit = fcktools_submitreplacer;
}
};