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:

    图片上传预览功能

  • 相关阅读:
    在Livemedia的基础上开发自己的流媒体客户端
    开源流媒体处理库live555服务器端、客户端源代码分析总结
    海康、大华IpCamera RTSP地址和格式
    专题:Windows编译x264、SDL、faac、ffmpeg过程
    linux下c/c++ IDE开发工具介绍
    socket选项自带的TCP异常断开检测
    logstash-input-jdbc实现mysql 与elasticsearch实时同步(ES与关系型数据库同步)
    哈希存储、哈希表原理
    APM系列-国外新兴厂商New Relic vs. AppDynamics
    SkyWalking 分布式追踪系统
  • 原文地址:https://www.cnblogs.com/jason-davis/p/4615449.html
Copyright © 2011-2022 走看看