.Extjs HtmlEditor扩展插入图片功能

àì夳堔傛蜴生んèń 2021-09-19 06:16 262阅读 0赞

2009年开始接触Extjs的时候，就发现其HtmlEditor少了一个插入图片功能，于是同事在网上找了个扩展了的代码使用了起来！当时刚刚接触的时候，直接就拿来用的，也没仔细看代码！  后来经常更新Exjts类库的版本，有天竟然把改ux代码给丢了，昨天客户还找我们说，怎么在通知通告功能中发送消息插入不了图片！才恍然大悟，原来把以前扩展的功能丢了,不知道现在Extjs的新版本是否还有这个功能，但是已经使用过低版本的，如果没有改功能，扩展一下也是需要的！

还是先看效果吧：

![20130528000355324][]

![20130528000411839][] ![20130528000426814][]

![20130528000444182][]

以下是扩展代码：

/\*

\* ExtendBy:xuzhihong

\* CreateDate:2011-01-28

\* Description: HTMLEditor

\* 增加插入图片功能

\*/

HTMLEditor = Ext.extend(Ext.form.HtmlEditor,

addImage: function() \{

var editor = this;

var imgform =  new Ext.FormPanel(

region: 'center',

labelWidth: 55,

bodyStyle: 'padding:20px 5px 0',

autoScroll: true,

border: false,

buttonAlign: 'center',

fileUpload: true,

items: \[

xtype: 'textfield',

fieldLabel: '选择文件',

inputType: 'file',

allowBlank: false,

blankText: '文件不能为空',

height: 25,

anchor: '90%'

\}\],

buttons: \[

text: '插入',

type: 'submit',

handler: function() \{

if (!imgform.form.isValid()) \{

return;

var photo =  imgform.form.items.items\[0\].getValue();

var fileext =  photo.substring(photo.lastIndexOf("."), photo.length).toLowerCase();

if (fileext !=  '.jpg' && fileext !=  '.gif' && fileext !=  '.jpeg' && fileext !=  '.png' && fileext !=  '.bmp') \{

imgform.form.items.items\[0\].setValue('');

Ext.Msg.show(

title: '提示',

icon: 'ext-mb-error ',

width: 300,

msg: '对不起，系统仅支持标准格式的照片，请您调整格式后重新上传，谢谢！',

buttons: Ext.MessageBox.OK

\});

return;

imgform.form.submit(

waitMsg: '图片正在插入..',

url: editor.url \+ "?sign=HTMLEditor",  //点击插入执行的方法,将图片保存到服务器上

success: function(form, action) \{

var element =  document.createElement("img");

element.src =  action.result.data; //action.result.data "\\HtmlEditorPics\\abc.jpg （gsr.data）

if (Ext.isIE) \{

editor.insertAtCursor(element.outerHTML);

else \{

var selection = editor.win.getSelection();

if (!selection.isCollapsed) \{

selection.deleteFromDocument();

selection.getRangeAt(0).insertNode(element);

\}  //element <img src="\\HtmlEditorPics\\abc.jpg"/>

win.hide();

\},

failure: function(form, action) \{

form.reset();

if (action.failureType == Ext.form.Action.SERVER\_INVALID)

Ext.MessageBox.alert('警告', action.result.errors.msg);

\});

\},

text: '取消',

type: 'submit',

handler: function() \{

win.hide();

\}\]

\});

var win = new Ext.Window(

title: "插入图片",

width: 400,

height: 150,

plain: true,

modal: true,

closeAction: 'hide',

border: false,

items: imgform

\});

win.show(this);

\},

createToolbar: function(editor) \{

HTMLEditor.superclass.createToolbar.call(this, editor);

this.tb.insertButton(16,

cls: "x-btn-icon",

iconCls: "ico\_insertPicture",

handler: this.addImage,

scope: this

\});

Ext.reg('EditorEx', HTMLEditor);

在js代码中使用：

xtype: "EditorEx",

anchor: "98%",

fieldLabel: "内容",

height: 320,

width: 300,

url: '/PicUpLoad.aspx'

其中xtype:  "EditorEx",url:  '/PicUpLoad.aspx' 其中xtype就是我们扩展的，url为Ajax 请求路径：

PicUpLoad.aspx.cs后台方法返回一个图片路径（存储在gsr.data中）

///<summary>

/// HTMLEditor插入图片

///</summary>

privatevoidHTMLEditor()

HttpPostedFilehpf = Request.Files\["Pic"\];

GSReturngsr = newGSReturn();

if (hpf.ContentLength > 0)

stringfileName = ReportCommon.AddDateDateTimeAfter("", "") +  System.IO.Path.GetExtension(hpf.FileName);

stringfileSavePath = "/HtmlEditorPics/" \+ fileName;

fileSavePath = System.Web.HttpContext.Current.Server.MapPath(fileSavePath);

//保存文件

hpf.SaveAs(fileSavePath);

gsr.success = true;

gsr.data = "/HtmlEditorPics/" \+ fileName;

stringstr = JSSerialize.Serialize(gsr);

Response.Write(str);

Response.End();

扩展 原理很简单，自己看代码吧！

[20130528000355324]: /images/20210511/03c13e9dad6842d2af0786db8a2d2ddf.png
[20130528000411839]: https://img-blog.csdn.net/20130528000411839
[20130528000426814]: /images/20210511/4df3bcd53fdc4d898229f6c9d33dd393.png
[20130528000444182]: /images/20210511/8f4828c7b42b4742abb92e1ae15bab22.png