ExtJs htmleditor重写以及上传图片并显示


var form_items = [{
layout : 'form',
labelAlign: 'top',
frame: true,
items : [{
xtype : 'imagehtmleditor',
height : window.screen.availHeight*0.3,
width : '98%',
name : 'itemContent',
id :'itemContent',
anchor : '100%',
hideLabel :true,
enableSourceEdit:false,
imagesLoadUrl: this.imagesLoadUrl,
imagesDelUrl: this.imagesDelUrl,
uploadUrl: this.imagesUploadUrl,
imagesDataRecord: Ext.data.Record.create(
[{
name : "imageId"
}, {
name : "infoId"
}, {
name : "title"
}, {
name : "fileName"
}, {
name : "filePath"
}, {
name : "fileType"
}]
),
dataid: this.imagesDataid,
imgUploadFieldName: this.imgUploadFieldName,
dataBoxMapping: {
qtip: 'title',
imgUrl: 'filePath',
text: 'fileName'
},
rootPath: this.rootPath
/*fontFamilies:['Tahoma','宋体','楷体_GB2312','隶书','黑体'],
createLinkText:'请输入URL链接网址',
anchor : '100%',
hideLabel :true,
name : 'itemContent',
id :'itemContent',
border : false,
height : window.screen.availHeight*0.3,
width : '98%',
enableSourceEdit:false,
border:false*/
}]
},{
columnWidth : 1,
layout : 'form',
border : false,
items : [{
xtype : 'textarea',
name : 'itemDesc',
id :'itemDesc',
anchor : '99%',
width : '98%',
height : window.screen.availHeight*0.13,
cls : 'area_label',
value : '',
hideLabel :true,
readOnly : true
}]
}];

1.点击编辑器的图片按钮,会出现提示,如下图:
[img]http://dl.iteye.com/upload/attachment/594246/1038abcd-08a1-3d7e-a4eb-017537eadda8.jpg[/img]
2.选择要上传的图片,点击上传,并显示,如下图:
[img]http://dl.iteye.com/upload/attachment/594250/cdf12a6c-9e79-3f6c-ba27-6c74099fec28.jpg[/img]
3.通过双击可以查看原图,如下图:
[img]http://dl.iteye.com/upload/attachment/594252/0778153a-5212-3fe9-96e1-ea25ff0e0dbd.jpg[/img]
4.点击插入图片,并显示到文本编辑器里,如下图:
[img]http://dl.iteye.com/upload/attachment/594254/496a255c-3c9b-364c-8dac-460b748a79d6.jpg[/img]
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值