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下，里邊有，復制下代碼就可以了。或去找獨立的上傳組件單獨使用。