本文目录一览：
- 1、关于Extjs 中htmlEditor的问题，怎么动态的在htmleditor初始化时赋值，默认值就不要了
- 2、Extjs4.0如何限制的htmleditor的输入长度，具体的方法
- 3、extjs中HtmlEditor怎样使用，
- 4、extjs 3.4中 怎么给htmlEdit添加图片插件 实现图片上传功能
- 5、ExtJs htmleditor如何设置不显示工具栏？
关于Extjs 中htmlEditor的问题，怎么动态的在htmleditor初始化时赋值，默认值就不要了
你好，Ext一般都是读取json格式数据。htmlEditor属于Ext form表单里的，所以我找到了以前做的一个关于form赋值的代码例子给你贴出来，希望你能有所启示。 代码格式可能有点乱，不过你要相信一点，Ext处理数据一般都会用store。。。还有不懂的话随时问e.....加油哈
注： 重点关注 下面items项内容
function editDept() {
var fp = new Ext.FormPanel({
frame : true,
border : 0,
items : [{
fieldLabel : '紧急程度',
xtype : "combo",
store : new Ext.data.JsonStore({
fields : ["id", 'text', 'value'],
idProperty : 'id',
data : [{ //这里的数据可以通过Ext ajax与后后台联系，读取后台数据
id : 'c0',
text : '清除',
value : 0
}, {
id : 'c1',
text : 'img src="../images/dwbj.gif"',
value : 1
}, {
id : 'c2',
text : 'img src="../images/dwbj.gif"img src="../images/dwbj.gif"',
value : 2
}]
}),
valueField : 'id',// 值,可选
displayField : 'text',// 显示文本
mode : 'local',
forceSelection : true,// 必须选择一项
triggerAction : 'all',// 因为这个下拉是只能选择的，所以一定要设置属性triggerAction为all，不然当你选择了某个选项后，你的下拉将只会出现匹配选项值文本的选择项，其它选择项是不会再显示了，这样你就不能更改其它选项了。
editable : false,// 不允许输入
selectOnFocus : true,
width : 200,
id : 'wenshu',
listeners : {
'select' : function(combo, srecord, indexss) {
var array = Ext.getCmp('mygrid').getSelectionModel()
.getSelections();
var ids = "";
for (var i = 0; i array.length; i++) {
ids += array[i].get('sginfo.sgid') + ",";
}
Ext.Ajax.request({
url : "sgJyInfo!updJjd.action",
params : {
"jjd" : srecord.get("value"),
"sgids" : ids
},
callback : function(options, success, response) {
var v = Ext.util.JSON.decode(response.responseText);
if (v.suc) {
for (var i = 0; i array.length; i++) {
array[i].set('jjd', srecord.get("value"));
};
_win.close();
} else {
Ext.Msg.alert("提示", v.msg);
}
}
});
}
}
}]
})
var _win = new Ext.Window({
title : "修改处理情况",
height : 83,
modal : true,
width : 370,
// iconCls : _iconCls,
id : "edit_win",
bodyStyle : 'padding:5px 5px',
items : [fp]
});
_win.show();
}
Extjs4.0如何限制的htmleditor的输入长度，具体的方法
htmleditor 没有相应的属性限制长度。
只能是输入完之后，提交的时候验证一下。
这个不用给你写了吧？ 还是写一下吧。。
var htmleditor = new Ext.form.field.HtmlEditor({.....});
if(htmleditor.getValue().length 100){
Ext.Msg.alert('提示', '不能超出100字符');
return;
}
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 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上传的图片路径一定要改，因为上传之后图片路径变为，在正常使用中图片不显示，要将该地址替换为服务器的IP地址；替换方法如下：
//获取本地IP地址,因为extjs的htmleditor上传的照片路径有问题，需要将路径替换为本机IP地址
InetAddress inet = InetAddress.getLocalHost();
shopSp.setSpTxms(shopSp.getSpTxms().replace("localhost", inet.getHostAddress().toString()));
这样基本就完成了这个HTMLEditor上传图片功能。
如图：
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
快快把分给我...
