AJAX FCKEditor Rich Editor Integration Chapter 1th/2 page _jsp programming

Source: Internet
Author: User
(Http://www.fckeditor.net, Javaeye's editor is also used fckeditor,xx like-minded?) hehe), it opensource (free Ah, can directly change the source code ah, hehe), powerful (almost a web version of Office Word), provides support for a variety of server-side (although it is completely a pure client, but currently provides with. NET, PHP, Java, Coldfusion, Perl, Lasso, Python, the tight integration of various server-side scripts, support internationalization (very good in Chinese), Replaceable skin (Office 2000 style is virtually indistinguishable), inline file upload (Java version supports this), Keep a certain update status (current version is 2.3.2), and so on. Of course, it has n multi-function, but I have not studied carefully, if there is any use, you can tell one or two.

As for the various usages of fckeditor, I am not here to enumerate, there are a lot of related articles on the Internet, it also brought a good sample, can be very easy to join our own project.

But how do you use the FCKeditor control in AJAX applications? This fckeditor does not seem to provide the corresponding answer, because Ajax are used without the refresh submission, and FCKeditor can only be used in form submission mode, why say so, then we have to start from the FCKeditor implementation process.

FCKeditor's editor is actually an IFRAME, and every time you create a fckeditor entity, a new IFrame is created, and the various toolbar and edit areas are stuffed into the IFRAME. Outside the IFRAME must have a corresponding INPUT element (this is generally called a linkedfield in a textarea,fckeditor) so that the existing content in textarea can be imported into the editor. Or, update the edited content to Linkedfield. When did the contents of the FCKeditor be saved to the corresponding Linkedfield? At first I did not look at the source code, thought is in the content of the fckeditor changes in the same time update Linkedfield, then found that is not, if so, then we can easily use Ajax in FCKeditor. When did it happen to sync with Linkedfield? The answer must be that before the form executes the Submit event, the only way to do that is to update it before submit is to bind the updated callback function to the onsubmit event in a attachevent way, and then call the bound function in a certain way before the submit. So in the fckeditor provided by the core JS file to find OnSubmit, later in Fckeditorcode_ Ie.js file found the onsubmit keyword (here have to mention the point, fckeditor although do open source, but for their JavaScript source code is still some reservations, inside a lot of the core JS files have been confused rearrangement, but this also can not blame people not honest, in order to facilitate the view source code , vomiting blood is recommended to use the MyEclipse document Format function for formatting, so basically can be a glance at the structure inside.

The related code is as follows, first of all, when the FCKeditor is initialized:
Copy Code code 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
}
FCK. Resetisdirty ();
Fcktools.attachtolinkedfieldformsubmit (FCK. Updatelinkedfield); Start making bindings
FCK. SetStatus (fck_status_active);
}

Then submit the submission before submitting the processing:
Copy Code code as follows:

Fcktools.attachtolinkedfieldformsubmit = function (A) {
var B = FCK. Linkedfield.form;
if (! B) {
Return
}
if (Fckbrowserinfo.isie) {
B.attachevent ("onsubmit", A); Bind the update processing to the OnSubmit event of the form
} else {
B.addeventlistener ("Submit", A, false);
}
if (! B.updatefckeditor) {
B.updatefckeditor = new Array ();
}
B.updatefckeditor[b.updatefckeditor.length] = A;
if (! B.originalsubmit && (typeof (B.submit) = = "function" | | (! B.submit.tagname &&! B.submit.length))) {
B.originalsubmit = B.submit;
B.submit = Fcktools_submitreplacer;
}
};

Current 1/2 page 12 Next read the full text
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.