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

 

Last year, Extjs's rich text box editor htmleditor was extended to the Image Upload and file upload functions. It seems that the functions are still insufficient. The original Article is as follows:

Http://hi.baidu.com/jackvoilet/blog/item/2ba6b19b7a9c05bcc8eaf427.html

 

Recently, when I was working on a project, I felt that it was still not perfect, so I made another expansion on this basis. Currently, CJ_StarHtmlEditor supports:

Upload and insert the image file flash Insert the multimedia insert layer Insert the horizontal line and other functions, basically meet the requirements.

You can continue to expand on the basis of this, which is very convenient. You can achieve whatever effect you want. I hope you can talk more.

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

}