Extjs extension htmleditor, supports upload of image files, insert Flash, insert multimedia insert layer, insert horizontal line, and other functions

Source: Internet
Author: User

The code for cj_starhtmleditor.js is as follows. Copy the Code directly and save it as cj_starhtmleditor.js.

/**
* Author: Chen Jie
* QQ: 710782046
* Email: ovenjackchain@gmail.com
* Blog: http://hi.baidu.com/jackvoilet
*/
VaR htmleditor = ext. Extend (ext. Form. htmleditor ,{
Addimage: function (){
VaR editor = this;
VaR imgform = new Ext. formpanel ({
Region: 'center ',
Labelwidth: 55,
Frame: True,
Bodystyle: 'padding: 5px 5px 0 ',
Autoscroll: True,
Border: false,
Fileupload: True,
Items :[{
Xtype: 'textfield ',
Fieldlabel: 'select file ',
Name: 'userfile ',
ID: 'userfile ',
Inputtype: 'file ',
Allowblank: false,
Blanktext: 'file cannot be blank ',
Height: 25,
Anchor: '000000'
}],
Buttons :[{
Text: 'upload ',
Type: 'submit ',
Handler: function (){
VaR furl = "";
Furl = imgform. Form. findfield ('userfile'). getvalue ();
VaR type = furl. substring (furl. Length-3). tolowercase ();
VaR filename = furl. substring (furl. lastindexof ("//") + 1 );
If (furl = "" | furl = NULL) {return ;}
If (type! = 'Jpg '& type! = 'Bmp '& type! = 'Gif' & type! = 'Png '){
Alert ('only images in JPG, BMP, GIF, and PNG formats are supported ');
Return;
}
Imgform. Form. Submit ({
URL: '/newsinfo. MVC/addfiles_newsinfo ',
Waitmsg: 'uploading ......',
Waittitle: 'Please wait ',
Method: 'post ',
Success: function (){
VaR element = Document. createelement ("IMG ");
Element. src = "../uploadfile/" + filename;
Element. style. width = "300px ";
Element. style. Height = "200px ";
If (ext. isie ){
Editor. insertatcursor (element. outerhtml );
} Else {
VaR selection = editor. Win. getselection ();
If (! Selection. iscollapsed ){
Selection. deletefromdocument ();
}
Selection. getrangeat (0). insertnode (element );
}
Win. Close ();
},
Failure: function (Form, Action ){
Form. Reset ();
If (action. failuretype = ext. Form. Action. server_invalid)
Ext. MessageBox. Alert ('Warning ',
'Upload failed. Only JPG, BMP, GIF, and PNG formats are supported ');

}

});
}
},{
Text: 'close ',
Type: 'submit ',
Handler: function (){
Win. Close (this );
}
}]
})

VaR win = new Ext. Window ({
Title: "uploading images ",
ID: 'picwin ',
Width: 400,
Height: 120,
Modal: True,
Border: false,
Iconcls: 'icon-uploadpic ',
Layout: "fit ",
Items: imgform

});
Win. Show ();

}, // Resize the uploaded Image
AddFile: function (){
VaR editor = this;
VaR fileform = new Ext. formpanel ({
Region: 'center ',
Labelwidth: 55,
Frame: True,
Bodystyle: 'padding: 5px 5px 0 ',
Autoscroll: True,
Border: false,
Fileupload: True,
Items :[{
Xtype: 'textfield ',
Fieldlabel: 'select file ',
Name: 'userfile _ F ',
ID: 'userfile _ F ',
Inputtype: 'file ',
Allowblank: false,
Blanktext: 'file cannot be blank ',
Height: 25,
Anchor: '000000'
}],
Buttons :[{
Text: 'upload ',
Type: 'submit ',
Handler: function (){
VaR furl = ""; // physical file address
VaR fname = ""; // file name
Furl = fileform. Form. findfield ('userfile _ F'). getvalue ();
VaR type = furl. substring (furl. Length-3). tolowercase ();
If (furl = "" | furl = NULL) {return ;}
If (type! = 'Doc' & type! = 'Xls '){
Alert ('only files in Doc and XLS formats are supported! ');
Return;
}
Fname = furl. substring (furl. lastindexof ("//") + 1 );
Fileform. Form. Submit ({
URL: '/newsinfo. MVC/addfiles_newsinfo ',
Waitmsg: 'uploading ......',
Waittitle: 'Please wait ',
Method: 'post ',
Success: function (){
VaR element = Document. createelement ("");
Element. href = "../uploadfile/" + fname;
Element.tar get = '_ blank ';
Element. innerhtml = fname;
If (ext. isie ){
Editor. insertatcursor (element. outerhtml );
} Else {
VaR selection = editor. Win. getselection ();
If (! Selection. iscollapsed ){
Selection. deletefromdocument ();
}
Selection. getrangeat (0). insertnode (element );
}
Winfile. Close ();
},
Failure: function (){
Form. Reset ();
If (action. failuretype = ext. Form. Action. server_invalid)
Ext. MessageBox. Alert ('Warning ',
'Upload failed. Only files in Doc and XLS formats are supported! ');

}

});
}
},{
Text: 'close ',
Type: 'submit ',
Handler: function (){
Winfile. Close (this );
}
}]
})

VaR winfile = new Ext. Window ({
Title: "uploading attachments ",
ID: 'picwin ',
Width: 400,
Height: 120,
Modal: True,
Border: false,
Layout: "fit ",
Iconcls: 'icon-uploadfile ',
Items: fileform

});
Winfile. Show ();

}, // Upload attachment Extension
Addflash: function (){
VaR editor = this;
VaR flashform = new Ext. formpanel ({
Region: 'center ',
Labelwidth: 55,
Frame: True,
Bodystyle: 'padding: 5px 5px 0 ',
Autoscroll: True,
Border: false,
Items :[{
Xtype: 'textfield ',
Fieldlabel: 'Flash address ',
Name: 'userflash ',
ID: 'userflash ',
Allowblank: false,
Blanktext: 'http ://',
Emptytext: 'http ://',
Height: 25,
Anchor: '000000'
}],
Buttons :[{
Text: 'add ',
Type: 'submit ',
Handler: function (){
VaR furl = ""; // physical file address
Furl = flashform. Form. findfield ('userflash'). getvalue ();
VaR type = furl. substring (furl. Length-3). tolowercase ();
If (furl = "" | furl = NULL) {return ;}
If (type! = 'Swf '& type! = 'Flv '){
Alert ('illegal format, please check! ');
Return;
}
VaR element = Document. createelement ("embed ");
Element. src = furl;
Element. type = "application/X-Shockwave-flash ";
Element. Quality = "high ";
Element. style. width = "300px ";
Element. style. Height = "200px ";
If (ext. isie ){
Editor. insertatcursor (element. outerhtml );
} Else {
VaR selection = editor. Win. getselection ();
If (! Selection. iscollapsed ){
Selection. deletefromdocument ();
}
Selection. getrangeat (0). insertnode (element );
}
Winflash. Close ();
}
},{
Text: 'close ',
Type: 'submit ',
Handler: function (){
Winflash. Close (this );
}
}]
})

VaR winflash = new Ext. Window ({
Title: "insert Flash ",
ID: 'flashwin ',
Width: 400,
Height: 120,
Modal: True,
Border: false,
Layout: "fit ",
Iconcls: 'icon-SwF ',
Items: flashform

});
Winflash. Show ();

}, // Insert Flash Extension
Addfilm: function (){
VaR editor = this;
VaR filmform = new Ext. formpanel ({
Region: 'center ',
Labelwidth: 70,
Frame: True,
Bodystyle: 'padding: 5px 5px 0 ',
Autoscroll: True,
Border: false,
Items :[{
Xtype: 'textfield ',
Fieldlabel: 'Multimedia address ',
Name: 'userfilm ',
ID: 'userfilm ',
Allowblank: false,
Blanktext: 'http ://',
Emptytext: 'http ://',
Height: 25,
Anchor: '000000'
}],
Buttons :[{
Text: 'add ',
Type: 'submit ',
Handler: function (){
VaR furl = ""; // physical file address
VaR regimg = new Regexp (//. (MP3 | WAV | WMA | WMV | Avi | MPG | ASF | RM | rmvb) $ /);
VaR regrm = new Regexp (//. (RM | rmvb) $ /);
Furl = filmform. Form. findfield ('userfilm'). getvalue ();
// Var type = furl. substring (furl. Length-3). tolowercase ();
If (furl = "" | furl = NULL) {return ;}
If (! Furl. Match (regimg )){
Alert ('illegal format, please check! Supported systems: MP3, WAV, WMA, WMV, Avi, mpg, ASF, RM, rmvb ');
Return;
}
VaR element = Document. createelement ("embed ");
Element. src = furl;
Element. style. width = "300px ";
Element. style. Height = "200px ";
If (furl. Match (regrm ))
Element. type = "audio/X-PN-RealAudio-plugin ";
Else
Element. type = "Video/X-MS-ASF-plugin ";
Element. Loop = "true ";
Element. autostart = "true ";
If (ext. isie ){
Editor. insertatcursor (element. outerhtml );
} Else {
VaR selection = editor. Win. getselection ();
If (! Selection. iscollapsed ){
Selection. deletefromdocument ();
}
Selection. getrangeat (0). insertnode (element );
}
Winfilm. Close ();
}
},{
Text: 'close ',
Type: 'submit ',
Handler: function (){
Winfilm. Close (this );
}
}]
})

VaR winfilm = new Ext. Window ({
Title: "insert multimedia ",
ID: 'filename ',
Width: 410,
Height: 120,
Modal: True,
Border: false,
Layout: "fit ",
Iconcls: 'icon-film ',
Items: filmform

});
Winfilm. Show ();

}, // Media extensions inserted
Createmedilbar: function (editor ){
Htmleditor. superclass. createmedilbar. Call (this, Editor );
This. TB. insertbutton (16 ,{
CLS: "X-BTN-icon ",
Iconcls: "icon-uploadpic ",
Handler: This. addimage,
Tooltip: "adding images ",
Scope: This
});
This. TB. insertbutton (17 ,{
CLS: "X-BTN-icon ",
Iconcls: 'icon-uploadfile ',
Handler: This. AddFile,
Tooltip: "adding files ",
Scope: This
});
This. TB. insertbutton (18 ,{
CLS: "X-BTN-icon ",
Iconcls: 'icon-SwF ',
Handler: This. addflash,
Tooltip: "adding Flash files ",
Scope: This
});
This. TB. insertbutton (19 ,{
CLS: "X-BTN-icon ",
Iconcls: 'icon-film ',
Handler: This. addfilm,
Tooltip: "adding multimedia files ",
Scope: This
});
This. TB. insertbutton (20, {// insert layer extension, that is, insert Div
CLS: "X-BTN-icon ",
Iconcls: 'icon-Div ',
Handler: function (){
VaR element = Document. createelement ("Div ");
Element. ID = "insertdiv ";
Element. style. backgroundcolor = "# fafafb ";
Element. style. borderwidth = "1px ";
Element. style. borderstyle = "solid ";
Element. style. bordercolor = "# aecbe7 ";
Element. innerhtml = "insert content here: <br> ";
If (ext. isie ){
Editor. insertatcursor (element. outerhtml );
} Else {
VaR selection = editor. Win. getselection ();
If (! Selection. iscollapsed ){
Selection. deletefromdocument ();
}
Selection. getrangeat (0). insertnode (element );
}
},
Tooltip: "adding a div layer ",
Scope: This
});
This. TB. insertbutton (21, {// insert a horizontal line extension
CLS: "X-BTN-icon ",
Iconcls: 'icon-hr ',
Handler: function (){
VaR element = Document. createelement ("HR ");
If (ext. isie ){
Editor. insertatcursor (element. outerhtml );
} Else {
VaR selection = editor. Win. getselection ();
If (! Selection. iscollapsed ){
Selection. deletefromdocument ();
}
Selection. getrangeat (0). insertnode (element );
}
},
Tooltip: "add a horizontal line ",
Scope: This
});
}
});
Ext. Reg ('cj _ starthtmleditor ', htmleditor );

You can use this method to expand what you want.

You can upload images and attachments as follows:

// Upload a file
[Acceptverbs (httpverbs. Post)]
Public actionresult addfiles_newsinfo (formcollection collection)
{
VaR rdto = new resultdto ();
VaR c = request. Files [0];
If (C! = NULL & C. contentlength> 0)
{
String filename = C. filename;
String Destination = server. mappath ("/uploadfile /");
C. saveas (destination + filename );
}
Return NULL;
}

 

When using this function, first Add a reference to the JS on the page, and then add the following code as needed:

{
Border: false,
Columnwidth: 1,
Layout: 'form ',
Items :[{
Fieldlabel: 'Information content ',
Xtype: 'cj _ starthtmleditor ',
Name: 'nr ',
ID: 'nr ',
Allowblank: false,
Anchor: '000000'
}]

}

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.