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

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'
}]

}