博客
关于我
强烈建议你试试无所不能的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

你可能感兴趣的文章
NOIP2015 运输计划 二分答案+Tarjan LCA+树上差分
查看>>
基本信息项目目标文档
查看>>
移动开发Html 5前端性能优化指南
查看>>
silverlight style和template 使用之tip
查看>>
Eclipse配置python环境
查看>>
Import declarations are not supported by current JavaScript version--JavaScript版本不支持导入声明...
查看>>
晶振不起振的原因及其解决方法
查看>>
2015年个人总结
查看>>
《系统架构师》——操作系统和硬件基础
查看>>
如何看待一本图书
查看>>
oracle参数列表
查看>>
Wordpress3.2去除url中的category(不用插件实现)
查看>>
macOS Sierra 代码显示未来 Mac 将搭载 ARM 芯片
查看>>
Linux 中如何通过命令行访问 Dropbox
查看>>
开发进度——4
查看>>
JS里验证信息
查看>>
Akka actor tell, ask 函数的实现
查看>>
windows10 chrome 调试 ios safari 方法
查看>>
Hello , Ruby!
查看>>
Netty 4.1.35.Final 发布,经典开源 Java 网络服务框架
查看>>