extjshtmleditor的简单介绍

发布时间：2023-12-08

extjshtmleditor的简单介绍

更新：2022-11-16 09:26

本文目录一览：

  1. [关于Extjs 中htmlEditor的问题，怎么动态的在htmleditor初始化时赋值，默认值就不要了](#关于Extjs 中htmlEditor的问题，怎么动态的在htmleditor初始化时赋值，默认值就不要了)
  2. Extjs4.0如何限制的htmleditor的输入长度，具体的方法
  3. extjs中HtmlEditor怎样使用，
  4. [extjs 3.4中 怎么给htmlEdit添加图片插件 实现图片上传功能](#extjs 3.4中 怎么给htmlEdit添加图片插件 实现图片上传功能)
  5. [ExtJs htmleditor如何设置不显示工具栏？](#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,
        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:'正在上传文件中...',
                success:function(descriptionHtmlEditor,o){
                    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/>的方式，这样 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);
                            }
                            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)
  • enableFontSize : Boolean
    允许增大/缩小字号按钮(默认为 true)
  • enableFormat : Boolean
    允许粗体、斜体和下划线按钮(默认为 true)
  • enableLinks : Boolean
    允许创建链接按钮。Safari 中无效。(默认为 true)
  • enableLists : Boolean
    允许项目和列表符号按钮。Safari 中无效。(默认为 true)
  • enableSourceEdit : Boolean
    允许切换到源码编辑按钮。Safari 中无效。(默认为 true)
  • fieldClass : String
    表单元素一般状态CSS样式（默认为"x-form"） 快快把分给我...
推荐文章