博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
EXTJS中整合tinymce的富文本编辑器,添加上传图片功能
阅读量:5846 次
发布时间:2019-06-18

本文共 11506 字,大约阅读时间需要 38 分钟。

提供部分代码。 Ext.create('Ext.window.Window', {                id: 'wind',                title: 'CRUD窗口',                modal: true,                height: 800,                width: 1050,                hideMode: 'display',                closeAction: 'hide',                maximizable: false,                layout: { type: 'fit', align: 'left' },                bodyPadding: 0,                items: [{                    xtype: 'form',                    layout: 'anchor',                    autoScroll: true,                    bodyPadding: 10,                    defaults: {                        xtype: 'combo',                        anchor: '10',                        labelAlign: 'left'                    },                    items: [{                        fieldLabel: '(案件)物证名称', name: 'EName', maxLength: 100,                        allowBlank: false,                        queryMode: 'local',                        valueField: 'EName',                        displayField: 'EName',                        listConfig: {                            maxHeight: 200,                        },                        editable: true,                        value: '------请选择或输入(案件)物证名称------',                        store: Ext.StoreManager.lookup("comboEvidenceStore")                    }, {                        fieldLabel: '鉴定科目', name: 'IdentificationSubject', maxLength: 100,//maxLength表示可输入的最大字符长度是20                        allowBlank: false,                        queryMode: 'local',                        editable: false,                        listConfig: {                            maxHeight: 200,                        },                        valueField: 'IdentificationSubject',                        displayField: 'IdentificationSubject',                        store: Ext.StoreManager.lookup("IdentificationSubjectStore"),                        id: "IdentificationSubject",                        value: '------请选择或输入所需的鉴定科目-----',                        listeners: {                            select: function (combo, record, index) {                                // combo.getValue();                                                     }                    },                    {                        xtype: "tinymce_field", name: "content", height: 530, border: 1,                        tinyMCEConfig: {                            relative_urls: false,                            convert_urls: false,                            theme: "modern",                            file_browser_callback: function (field_name, url, type, win) {                                if (type == 'image') {                                    //$('#mce_135').css("z-index", "0");                                    var add_winForm = Ext.create('Ext.form.Panel', {                                        frame: true,   //frame属性                                          //title: 'Form Fields',                                          width: 350,                                        height: 140,                                        bodyPadding: 35, style: 'border-width:2 2 2 2;',                                        margin: 45,                                        bodyStyle: "padding:5px 5px 0",                                        //renderTo:"panel21",                                          fieldDefaults: {                                            labelAlign: 'center',                                            labelWidth: 60,                                            anchor: '100%'                                        },                                        items: [{                                            //显示文本框,相当于label                                              xtype: 'displayfield',                                            name: 'displayfield1',                                            fieldLabel: '',                                            value: '请输入你的登录系统密码',                                        }, {                                            //输入密码的文本框,输入的字符都会展现为.                                              xtype: 'textfield',                                            name: 'password1',                                            inputType: 'password',                                            fieldLabel: '密码'                                        }]                                    });                                    var win = Ext.create("Ext.window.Window", {                                        id: "myWin",                                        title: "验证身份",                                        width: 450,                                        height: 300, Layout: "fit",                                        modal: true,                                        resizable: false,                                        autoWidth: false,                                        items: [add_winForm],                                        buttons: [                                            {                                                xtype: "button", text: "确定",                                                handler: function () {                                                    var formValues = add_winForm.getForm().getValues();                                                    var pwd = formValues["password1"];                                                    if (pwd == "") {                                                        alert('密码不能为空!'); return;                                                    }                                                    else {                                                        if (add_winForm.getForm().isValid()) {                                                            add_winForm.getForm().submit({                                                                url: '/controler/authenticationIdentity.ashx?date=' + new Date().getMilliseconds() + '&password=' + pwd,                                                                submitEmptyText: true,                                                                waitTitle: '请稍等...',                                                                waitMsg: '正在提交信息...',                                                                method: 'POST',                                                                success: function (fp, o) {                                                                    win.close();                                                                    $('#my_form input').click();                                                                },                                                                failure: function () {                                                                    alert('密码输入有误!');                                                                    win.show(); win.setZIndex("80000");//设置模态窗口!!!                                                                }                                                            })                                                        }                                                    }                                                }                                            },                                            { xtype: "button", text: "取消", handler: function () { this.up("window").close(); } }                                        ]                                    });                                    win.show(); win.setZIndex("80000");//设置模态窗口!!!                                }                            },                            menubar: true,                            image_advtab: true, language: 'zh_CN',                            plugins: ["  advlink contextmenu emotions flash autosave style layer iespell insertdatetime paste preview print save noneditable spellchecker searchreplace table zoom directionality  fullpage inlinepopups fullpage",                                    "advlist newdocument autolink lists link image charmap print preview hr anchor pagebreak",                                    "searchreplace visualblocks visualchars code ",                                    "insertdatetime media nonbreaking save table contextmenu directionality",                                    "emoticons template paste textcolor",                                   "  markettoimages,autolink,lists,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordcount,advlist,autosave image",                            ],                            toolbar1: "undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image print preview media | forecolor backcolor emoticons markettoimages",                        },                        // external_plugins: { "filemanager" : "/filemanager/plugin.min.js"},                        //codemirror: {                        //    indentOnInit: true, // Whether or not to indent code on init.                         //    path: 'CodeMirror'},                        value: "",                        //tinyMCE.get("tinymce_field").setContent("123")                    }                    ],                    buttons: [                             { xtype: "displayfield", id: "lblMessage", flex: 1, fieldStyle: "color:#1C3E7E;font-weight:bold;" }, {                                 text: '保存',//修改、添加                                 id: 'saveBt'                             }, {                                 text: '获取内容',//修改、添加                                 handler: function () {                                     var content = this.up("form").down("tinymce_field").getValue();                                     alert(content);                                 }                             }, {                                 text: '加盖公章',                                 handler: function () {                                     location.href = "";                                 }                             },                    {                        text: '上传文件',                        handler: function () {                            var panel2 = new Ext.Panel({                                id: "panel1",                                fitToFrame: true,                                html: ''                            });                            var win = new Ext.Window({                                title: "上传文件",                                modal: true,                                layout: 'form',                                border: false,                                resizable: false,                                width: 480,                                height: 465,                                plain: true,                                items: ["panel1"],                                autoHeight: true,                                buttons: [                                    {                                        text: '关闭', handler: function () { win.close(); }                                    }]                            });                            win.show();                        }                    }]                }]            }).show().hide();

效果图如下o:

图片上传预览功能

转载于:https://www.cnblogs.com/jason-davis/p/4615449.html

你可能感兴趣的文章
Android通过Aidl调用Service实例
查看>>
找回使用Eclipse删除的文件
查看>>
rabbitmq 消息系统 消息队列
查看>>
Intellij IDEA神器居然还有这些小技巧
查看>>
HBase基本原理
查看>>
php使用qr生成二维码
查看>>
集成spring3、hibernate4、junit
查看>>
eclipse常用快捷键
查看>>
URL与ASCII
查看>>
Jetty9安装部署
查看>>
OpenGL的视图变换
查看>>
Redis.conf 说明
查看>>
shell-用grep查看输入的参数是否在/etc/passwd中
查看>>
ansible 启动tomcat遇到的问题
查看>>
我的友情链接
查看>>
搭建LNMP
查看>>
文件类型,文件权限
查看>>
Xamarin.Forms教程开发的Xcode的下载安装
查看>>
js 将json字符串转换为json兑现
查看>>
java读取properties配置文件
查看>>