zoukankan      html  css  js  c++  java
  • 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:

    图片上传预览功能

  • 相关阅读:
    php实现二维码
    java课设 五子棋代码编写(团队)
    java第十四次作业
    java第十三次作业
    java第十二次作业
    java第十一次作业
    java第十周学习总结
    java第九次学习总结
    java第八周学习总结
    201521123056 《Java程序设计》第11周学习总结
  • 原文地址:https://www.cnblogs.com/jason-davis/p/4615449.html
Copyright © 2011-2022 走看看