日期:2014-05-17  浏览次数:20740 次

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.点击编辑器的图片按钮,会出现提示,如下图:

2.选择要上传的图片,点击上传,并显示,如下图:

3.通过双击可以查看原图,如下图:

4.点击插入图片,并显示到文本编辑器里,如下图:

1 楼 wilsonchen 2012-06-09  
如何使用的呢?请问楼主!