exthtmleditor上传图片
⑴ ext htmleditor 中插入图片，在保存的时候使图片的路径为相对路径
首先从数据库获取信息到前端，接收数据要用store，你把图片的路径写入数据库中，然后通过store去load数据到前端。
然后要看你要怎么展示图片，在哪显示了！
例如使用Ext.XTemplate，自己去写图片显示的位置，样式等。可以去参考ext3.0文档中Ext.DataView的例子
var store = new Ext.data.JsonStore( {
fields : [ "id", "name", "path" ],
url: '....',
......
});
store.load();
var tpl = new Ext.XTemplate('<div class="aaa"><img src="" title="" /></div>',);
var dataview = new Ext.DataView( {
store: store,
tpl: tpl,
........
});
var panel = new Ext.Panel({
.......
items:dataview
)}
还可以使用textfield，这就要自己完成整个panel或window的布局了
例如：
.....
{
columnWidth : .5,
layout : 'form',
labelWidth : 60,
items : [{
xtype : 'textfield',
fieldLabel : '个人照片',
width : 150,
Height : 180,
inputType : 'image',
listeners : { // 该项被载入时加载照片
'render' : function(_filed) {
_filed.getEl().dom.src = "a.jpg";//这里图片的路径可以预先从store中读取，赋给变量然后给它
}
}
}]
}
如果是在grid里显示图片，那么grid中的ColumnModel里可以有一个字段是图片路径，然后通过store传入该路径并显示
例如：
var sm = new Ext.grid.CheckboxSelectionModel();
var cm = new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(), sm,
{
header : "图片",
width : 40,
dataIndex : "path",
align : "center",
renderer : function(v) {
return "<img src='" + v +"'>"
}
},
......
还有很多跟图片有关的地方，我暂时也想不起来，看具体情况具体解决了，总之后台对应的是数据库，前台对应的是store，前后交互就是把后台的数据放store里，然后前台根据store做前台该做的事
⑵ htmleditor 如何上传图片
最近用Extjs做项目，用到htmleditor控件，唯一的缺陷是不可以上传图片，为了以后方便，在基于htmleditor控件上写了一个支持上传图片的。
控件StarHtmleditor
/**
* 重载EXTJS-HTML编辑器
*
* @class HTMLEditor
* @extends Ext.form.HtmlEditor
* @author wuliangbo
*/
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 : '选择文件',
name : 'userfile',
inputType : 'file',
allowBlank : false,
blankText : '文件不能为空',
height : 25,
anchor : '90%'
}],
buttons : [{
text : '上传',
type : 'submit',
handler : function() {
if (!imgform.form.isValid()) {return;}
imgform.form.submit({
waitMsg : '正在上传',
url : 'Default.aspx',
success : function(form, action) {
var element = document.createElement("img");
element.src = action.result.fileURL;
if (Ext.isIE) {
editor.insertAtCursor(element.outerHTML);
} else {
var selection = editor.win.getSelection();
if (!selection.isCollapsed) {
selection.deleteFromDocument();
}
selection.getRangeAt(0).insertNode(element);
}
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.close(this);
}
}]
})
var win = new Ext.Window({
title : "上传图片",
width : 300,
height : 200,
modal : true,
border : false,
iconCls : "picture.png",
layout : "fit",
items : imgform
});
win.show();
},
createToolbar : function(editor) {
HTMLEditor.superclass.createToolbar.call(this, editor);
this.tb.insertButton(16, {
cls : "x-btn-icon",
icon : "picture.png",
handler : this.addImage,
scope : this
});
}
});
Ext.reg('StarHtmleditor', HTMLEditor);
页面js代码
Ext.onReady(function() {
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
var ff = new Ext.FormPanel({
title : "文件上传",
renderTo : document.body,
width : 600,
height : 480,
labelWidth : 55,
frame : true,
items : [{
xtype : "textfield",
name : "title",
fieldLabel : "标题",
anchor : "98%"
}, {
xtype : "combo",
name : "topic_id",
fieldLabel : "所属栏目",
anchor : "98%"
}, {
xtype : "textfield",
name : "keywords",
fieldLabel : "关键字",
anchor : "98%"
}, {
xtype : "StarHtmleditor",
name : "content",
fieldLabel : "内容",
anchor : "98%"
}]
});
});
后台代码简单实现了一下
protected void Page_Load(object sender, EventArgs e)
{
string fileName = string.Empty;
string fileURL = string.Empty;
string rt = string.Empty;
try
{
HttpPostedFile file = Request.Files[0];
fileName = GetFileName(file.FileName);
file.SaveAs(Server.MapPath("upload//") + fileName);
fileURL = "upload/" + fileName;
rt = "{success:'true',fileURL:'" + fileURL + "'}";
}
catch
{
rt = "{success:'false',fileURL:'" + fileURL + "'}";
}
Response.Write(rt);
}
private string GetFileName(string FullName)
{
string fileName = string.Empty;
int last = FullName.LastIndexOf(@"/");
fileName = FullName.Substring(last + 1, FullName.Length - last - 1);
return fileName;
}
实现效果如下
http://blog.csdn.net/zhaozhen1984/article/details/5911839
原文链接请查看谢谢。
http://www.cnblogs.com/wuliangbo/archive/2009/03/08/1406460.html
详查链接。谢谢。
⑶ extjs 3.4中 怎么给htmlEdit添加图片插件 实现图片上传功能
首先要使用extjs自带的HTMLEditor，然后在原有的工具条上添加一个图片按钮，点击这个图片按钮要弹出窗口，这个窗口负责实现上传功能，实现上传后，要将上传的图片路径添加到HTMLEditor的光标处，并且要以<IMG></IMG>的方式，这样HTMLEditor才能解析出来。实现代码如下：
前台JSP页面
fieldLabel : '商品特性',
id : 'shopSp.spTxms',
name : 'shopSp.spTxms',
xtype : 'StarHtmleditor',
anchor : '93%'
这其中引用了StarHtmleditor，StarHtmleditor.js的代码如下，直接将代码复制下来，然后新建个JS，全复制进去就行了。
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 : '选择文件',
id : 'UserFile',
name : 'UserFile',
inputType : 'file',
allowBlank : false,
blankText : '文件不能为空',
anchor : '90%'
}],
buttons : [{
text : '上传',
handler : function() {
if (!imgform.form.isValid()) {return;}
imgform.form.submit({
waitMsg : '正在上传......',
url : 'HTMLEditorAddImgCommonAction.action',
success : function(form, action) {
var element = document.createElement("img");
element.src = action.result.fileURL;
if (Ext.isIE) {
editor.insertAtCursor(element.outerHTML);
} else {
var selection = editor.win.getSelection();
if (!selection.isCollapsed) {
selection.deleteFromDocument();
}
selection.getRangeAt(0).insertNode(element);
}
//win.hide();//原始方法，但只能传一个图片
//更新后的方法
form.reset();
win.close();
},
failure : function(form, action) {
form.reset();
if (action.failureType == Ext.form.Action.SERVER_INVALID)
Ext.MessageBox.alert('警告','上传失败',action.result.errors.msg);
}
});
}
}, {
text : '关闭',
handler : function() {
win.close(this);
}
}]
})
var win = new Ext.Window({
title : "上传图片",
width : 300,
height : 200,
modal : true,
border : false,
iconCls : "picture.png",
layout : "fit",
items : imgform
});
win.show();
},
createToolbar : function(editor) {
HTMLEditor.superclass.createToolbar.call(this, editor);
this.tb.insertButton(16, {
cls : "x-btn-icon",
icon : "picture.png",
handler : this.addImage,
scope : this
});
}
});
Ext.reg('StarHtmleditor', HTMLEditor);
JS的第一句var HTMLEditor = Ext.extend(Ext.form.HtmlEditor, 网上是没有var的，不用var不知道为什么总是报错，另外JS一定要与JSP的编码方式一致，要不然报莫名其妙的错误，而且错误都没有显示。
后台java代码
/****
* HTMLEditor增加上传图片功能：
* 1、上传图片后，需要将图片的位置及图片的名称返回给前台HTMLEditor
* 2、前台HTMLEditor根据返回的值将图片显示出来
* 3、进行统一保存
* @param 上传图片功能
* @return JSON结果
* @throws IOException
*/
public void HTMLEditorAddImg() throws IOException {
if(!"".equals(UserFile) && UserFile != null && UserFile.length() > 0){
File path = ImportImg(UserFile, "jpg");
UserFilePath = "../" + path.toString().replaceAll("\\", "/").substring(path.toString().replaceAll("\\", "/").indexOf("FileImg"));
}
this.getResponse().setContentType("text/html");
this.getResponse().getWriter().write("{success:'true',fileURL:'" + UserFilePath + "'}");
}
特别要注意的是路径问题，路径问题主要有2点需要注意：
1、前台页面引用StarHtmleditor.js的路径一定要正确；
2、Htmleditor上传的图片路径一定要改，因为上传之后图片路径变为http://localhost:8080/，在正常使用中图片不显示，要将该地址替换为服务器的IP地址；替换方法如下：
//获取本地IP地址,因为extjs的htmleditor上传的照片路径有问题，需要将路径替换为本机IP地址
InetAddress inet = InetAddress.getLocalHost();
shopSp.setSpTxms(shopSp.getSpTxms().replace("localhost", inet.getHostAddress().toString()));
这样基本就完成了这个HTMLEditor上传图片功能。
如图：
⑷ Ext的HTMLEditor在插入图片时，如何控制插入的图片大小
Ext技术交流q群 210573705
⑸ extjs中HtmlEditor怎样使用，
var descriptionHtmlEditor = new Ext.form.HtmlEditor({
id:'dhtml',
name: 'description',
allowBlank:true,
width:590,
height:450
})
var fpmu=new Ext.form.FormPanel({
border:false,
width:350,
frame:true,
autoHeight:true,
layout:'form',
border:false,
items:[descriptionHtmlEditor]
})
var win = new Ext.Window({
title : '窗口',
closeAction : 'hide',
layout:'fit',
width : 750,
height : 360,
resizable : false,
modal : true,
items:[fpmu],
buttons:[{text:'提交',handler:function(){
fpmu.getForm().submit({
url:'test.aspx?cmd=htmleidtor',
method:'post',
waitMsg:'正在上传文件中...',
// params:{he:Ext.state.Manager.get("cun")},
success:function(descriptionHtmlEditor,o){
// Ext.Msg.alert('提示',o.result.message);
if(o.result.message=='上传成功'){
}
},
failure:function(descriptionHtmlEditor,o){
Ext.Msg.alert('信息','操作失败!'+ o.result.error);
}
})
}}]
});
win.show();
测试通过，FIREBUG有POST值到后台。
⑹ ExtJs htmleditor如何设置不显示工具栏
enableFont : Boolean
允许字体选项。Safari 中无效。(默认为 true)。Enable... 允许字体选项。Safari 中无效。(默认为 true)。Enable font selection. Not
available in Safari. (defaults to true) HtmlEditor
enableFontSize : Boolean
允许增大/缩小字号按钮(默认为 true)。Enable the in... 允许增大/缩小字号按钮(默认为 true)。Enable the increase/decrease font size
buttons (defaults to true) HtmlEditor
enableFormat : Boolean
允许粗体、斜体和下划线按钮(默认为 true)。Enable the ... 允许粗体、斜体和下划线按钮(默认为 true)。Enable the bold, italic and underline
buttons (defaults to true) HtmlEditor
enableLinks : Boolean
允许创建链接按钮。Safari 中无效。(默认为 true)。Enab... 允许创建链接按钮。Safari 中无效。(默认为 true)。Enable the create link button.
Not available in Safari. (defaults to true) HtmlEditor
enableLists : Boolean
允许项目和列表符号按钮。Safari 中无效。(默认为 true)。E... 允许项目和列表符号按钮。Safari 中无效。(默认为 true)。Enable the bullet and numbered
list buttons. Not available in Safari. (defaults to true) HtmlEditor
enableSourceEdit :
Boolean
允许切换到源码编辑按钮。Safari 中无效。(默认为 true)。E... 允许切换到源码编辑按钮。Safari 中无效。(默认为 true)。Enable the switch to source
edit button. Not available in Safari. (defaults to true) HtmlEditor
fieldClass : String 表单元素一般状态CSS样式（默认为"x-form
快快把分给我...
⑺ Ckeditor HTML编辑器 如何批量上传图片
Ckeditor上传图片是要配合Ckfinder进行的，只要有了Ckfinder,图片就可以批量上传了。这两个工具本来是一体的，后来分割成了两个东东。
⑻ ext 中htmleditor 文本编辑器，怎么添加插入图片这一个功能，有例子的话更好，谢谢。
html: '<div><img src="images/icon/yellow_light.png" align="top"/>低标预警</div>',
{xtype: 'fieldcontainer',
anchor: '100%',
layout: 'hbox',
items : [{
html: '<div><img src="images/icon/yellow_light.png" align="top"/>低标预警</div>',
border: false,
flex : 1,
margin: '0 20 0 0',
bodyStyle : 'background:transparent; text-align:center;',
height: 20
}]
}
⑼ extjs4 的htmleditor 要怎么改才能插入图片啊！ 谁有现成代码啊！
对extjs研究不深，不敢妄加回答，，你看看这个（extjs-htmleditor-plugins）
http://hi..com/eredlab/blog/item/a8d17f90d004d09aa977a48b.html
给你一个建议，不要直接要代码，那些高手反感这样的行为（见《提问的智慧》），基本是不会帮你的，而胡乱给你贴个代码，有些东西不是可以简单套用的…………建议你还是要好好学学基础知识，JS-AJAX-EXTJS（大概这个顺序，本菜鸟的想法，不用较真，参考吧），不能急于求成…………等到学精了，自己开发个htmleditor类的的东西，也不是不可以啊……
还有，请把问题移到csdn，我打赌不会和这里一样冷清…………就这些，希望帮得上你……
⑽ 如何直接调用ewebeditor编辑器中的上传文件功能
本身是带有上传功能的，想要独立的，你得去看看它的演示目录_example下，里边有，复制下代码就可以了。或去找独立的上传组件单独使用。