Home > Others

Steps for modifying the file upload function of FCKeditor

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

1. Click the link and click the upload tab. unfamiliar users may not find this upload function.
2. One link is inserted. I want to insert one image at the same time to indicate the file type.
:


Modify fckconfig. js
1. Add 'fujiian 'to fckconfig. toolbarsets ["default"] = and select the position.
2. Add the last two sentences.
// Attachment upload address
Fckconfig. fujianurl = "/fckedit/upload. jsp ";
// Upload File Type
Fckconfig. fujianallowedextensions = ". (Doc | XLS | PPT | PDF | RAR | zip) $ ";
3. Add the following to the corresponding Language Pack:
Fuji: "attachment"
4. Modify JS/fckeditorcode_gecko.js and JS/fckeditorcode_ie.js
Note: These two files are compressed. Click format code in netbeans to decompress them.
5. In the file, find: Case 'image': B = new fckdialogcommand ('image', fcklang. dlgimgtitle, 'Dialog/fck_image.html ', 450,390 );
Add:
Case 'fujiian ': B = new fckdialogcommand ('fujiian', fcklang. fujiian, 'Dialog/fck_fujian.html ', 450,200); break;
(This indicates that the dialog/fck_fujian.html page is displayed when you click the "attachment" button. The width and height of 450,200 are respectively displayed ).
Find
Case 'image': B = new fcktoolbarbutton ('image', fcklang. insertimagelbl, fcklang. insertimage, null, false, true, 37 );
Add:
Case 'fujiian ': B = new fcktoolbarbutton ('fujiian', fcklang. Fujian, null, null, false, true, 77); break;
77 is the index of the icon to be displayed in the toolbar of the attachment,
The icon file is in the editor/skins/default/fck_strip.gif file. The icons are 16 × 16.
Now, the following figure is displayed: fck_image.html Code : Copy code The Code is as follows: <! Doctype HTML public "-// W3C // dtd html 4.01 transitional // en">
<HTML>
<Head>
<Title> upload </title>
<Meta name = "Robots" content = "noindex, nofollow"/>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8">
<SCRIPT src = "common/fck_dialog_common.js" src = "common/fck_dialog_common.js" type = "text/JavaScript"> </SCRIPT>
<SCRIPT src = "fck_fujian/fck_fujian.js" src = "fck_fujian/fck_fujian.js" type = "text/JavaScript"> </SCRIPT>
</Head>
<Body scroll = "no" style = "overflow: hidden" style = "overflow: hidden">
<Div id = "divupload" style = "display: none" style = "display: none">
<Form ID = "frmupload" method = "Post" target = "uploadwindow" enctype = "multipart/form-Data" Action = "" onsubmit = "Return checkupload ();">
<Span fcklang = "dlglnkupload"> select an uploaded file </span> <br/>
<Input id = "txtuploadfile" style = "width: 100%" type = "file" size = "40" name = "newfile"/> <br/>
<Br/>
<Input id = "btnupload" type = "Submit" value = "Upload" fcklang = "dlglnkbtnupload"/>
<SCRIPT type = "text/JavaScript"> <! --
Document. write ('<IFRAME name = "uploadwindow" style = "display: none" style = "display: none" src = "' + fcktools. getvoidurl () + '"src ="' + fcktools. getvoidurl () + '"> <\/iframe> ');

// --> </SCRIPT>
</Form>
</Div>
</Body>
</Html>

Fck_fujian.js code:Copy codeThe Code is as follows :/*
* Function: upload an attachment.
*/
// Display page
VaR dialog = Window. parent;
VaR oeditor = dialog. innerdialogloaded ();
VaR fck = oeditor. fck;
VaR fcklang = oeditor. fcklang;
VaR fckconfig = oeditor. fckconfig;
VaR fckregexlib = oeditor. fckregexlib;
VaR fcktools = oeditor. fcktools;

Dialog. addtab ('upload', fcklang. fujiian, true );
Window. onload = function (){
Gete ('frmupload'). Action = fckconfig. fujianurl;
// Display
Gete ('didupload'). style. Display = '';
}

VaR ouploadallowedextregex = new Regexp (fckconfig. fujianallowedextensions, 'I ');
Function checkupload (){
VaR sfile = Gete ('txtuploadfile'). value;
If (sfile. Length = 0 ){
Alert ('select 1 file upload ');
Return false;
}
If (fckconfig. fujianallowedextensions. length> 0 &&! Ouploadallowedextregex. Test (sfile ))
{
Onuploadcompleted (202 );
Return false;
}
// Show animation
Window. Parent. throbber. Show (100 );
Gete ('divupload'). style. Display = 'none ';
Return true;
}
// Upload complete
Function onuploadcompleted (errornumber, fileurl, filename, custommsg ){
// Remove Animation
Window. Parent. throbber. Hide ();
Gete ('didupload'). style. Display = '';
Switch (errornumber ){
Case 0: // No errors
// Alert ('Your file has been successfully uploaded ');
Insertfile (fileurl, filename)
Break;
Case 1: // custom error
Alert (custommsg );
Return;
Case 101: // custom warning
Alert (custommsg );
Break;
Case 201:
Alert ('a file with the same name is already available. the uploaded file has been renamed to "'+ filename + '"');
Break;
Case 202:
Alert ('unsupported file type ');
Return;
Case 203:
Alert ("security error. You probably don't have enough permissions to upload. Please check your server .");
Return;
Case 500:
Alert ('the connector is disabled ');
Break;
Default:
Alert ('error on File Upload. error number: '+ errornumber );
Return;
}
}
Function insertfile (fileurl, filename ){
Imgpath = getfileimg (filename );
// Insert HTML
VaR html = "<div> <a href =" "+ fileurl + "" href = "" + fileurl + ""> "+ filename +" </a> </div> ";
Oeditor. fck. inserthtml (HTML );
// Close the page
Dialog. Cancel ();
}
Function getfileimg (filename ){
VaR Path = fckconfig. basepath + "file /";
Index = filename. lastindexof (".");
If (Index =-1)
Return Path + "unknow.gif ";
EXT = filename. substr (index + 1 );
Switch (Ext. tolowercase ()){
Case "Doc ":
Path + = "doc.gif"
Break;
Case "pdf ":
Path + = "2.16.gif"
Break;
Case "ppt ":
Path + = "ppt.gif"
Break;
Case "xls ":
Path + = "xls.gif"
Break;
Case "RAR ":
Path + = "rar.gif"
Break;
Case "Zip ":
Path + = "zip.gif"
Break;
Default:
Path + = "unknow.gif"
Break;
}
Return path;
}

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

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

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

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

    Open a Ticket

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

    Learn More