EXTJS中整合tinymce的富文本编辑器,添加上传图片功能

  
提供部分代码。
Ext.create('Ext.window.Window', { id: 'wind', title: 'CRUD窗口', modal: true, height: 800, 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', 350, height: 140, bodyPadding: 35, style: 'border-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: '<font size=3><b>请输入你的登录系统密码</b></font>', }, { //输入密码的文本框,输入的字符都会展现为. xtype: 'textfield', name: 'password1', inputType: 'password', fieldLabel: '<b>密码</b>' }] }); var win = Ext.create("Ext.window.Window", { id: "myWin", title: "验证身份", 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: '<iframe id="frame1" src="upload.html" frameborder="0" width="580px" height="500px"></iframe>' }); var win = new Ext.Window({ title: "上传文件", modal: true, layout: 'form', border: false, resizable: false, 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