提供部分代码。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表示可输入的最大字符长度是20allowBlank: 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: '<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: "验证身份",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: '<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,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

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

  1. vue中引入TinyMCE实现富文本编辑器

    整片文章是以vue2.X 引入tinymce富文本编译器 首先,先确认你的vue版本是 2 还是 3 ,查看项目的package.json中vue的版本,我的是2.5.2 一共两个步骤 vue工程中安 ...

  2. vue-quill-editor富文本编辑器自定义上传图片功能

    问题描述:vue-quill-editor富文本默认上传图片是将图片转换成base64进行存储,字段过长:然后进行自定义上传图片,只保存图片路径,减少服务器压力 解决思路: 1.先创建一个上传图片的组 ...

  3. VUE+tinymce(富文本编辑器)

    效果图: VUE项目引入tinymce 1.tinymce安装以及下载 npm install @tinymce/tinymce-vue -save npm install tinymce -save ...

  4. KindEditor富文本编辑器上传功能PHP语言报错问题

    问题产生过程:项目原本使用的是Ueditor编辑器,由于其中js代码有使用parentNode获取HTML节点,IE浏览器内核不支持parentNode ,会有二次加载富文本编辑器不渲染的问题,所以更 ...

  5. kindeditor java上传_富文本编辑器kindeditor上传图片的配置方法

    [导读]这篇文章主要介绍了使用富文本编辑器上传图片实例详解的相关资料,需要的朋友可以参考下 富文本编辑器上传图片 一.导入kindeditor的js 二.将kindeditor与一个文本域textar ...

  6. vue-quill-editor 富文本编辑器 自定义上传图片

    ① 安装插件,以及引入插件 使用命令:npm install vue-quill-editor -S ② main.js 中引入 // 导入富文本编辑器 import VueQuillEditor f ...

  7. vue使用WangEditor富文本编辑器(批量上传图片到服务器)

    最近要写一个官网,但是这个官网要写成活的可配置的项目,于是要先写一后台管理系统,用来配置官网的菜单和页面,配置菜单自然是vue+ElementUI表格表单的增删改查,但是配置页面就要有排版.样式等等, ...

  8. 小程序(二十五)微信小程序富文本编辑器editor上传图片

    官方给出的示例代码中图片上传功能是将图片上传至小程序的缓存中,代码如下所示: insertImage(e) {console.log(e);const that = thiswx.chooseImag ...

  9. 富文本编辑器vue-quill-editor上传图片过大

    项目场景: 提示:这里简述项目相关背景: vue_wetland项目中使用富文本编辑器vue-quill-editor完成发表文章模块. 问题描述 提示:这里描述项目中遇到的问题: 在项目中使用富文本 ...

最新文章

  1. 前缀和算法原理及代码
  2. [转]web标准的几个误区
  3. spring jdbc设计与实现
  4. 【转】游戏编程中的人工智能技术--神经网络
  5. 如何用 Blazor 实现 Ant Design 组件库(二)
  6. linux之使用md5sum命令比较两个文件是否一样
  7. 吴恩达 神经网络和深度学习 第一课 第三周 (代码)planar data classify
  8. 限制使用su命令的用户与使用sudo机制提升权限
  9. linux关闭mysql strict mode的方法介绍
  10. 程序员的圣诞节后-零
  11. 如何获取函数的变长参数(va_list, va_start, va_arg, va_end)
  12. Go语言:面向对象编程
  13. python函数传入对象
  14. paip.软件版本完善计划C426fromVC423
  15. 2018年TI杯大学生电子设计竞赛题C-无线充电电动小车 题目加答案,非常详细
  16. cdlinux U盘启动制作方法
  17. 牛顿-莱布尼兹公式的几何意义-微分和积分的几何关系
  18. iphone装android软件,黑科技降临,红手指教你苹果手机如何安装安卓APP
  19. Java核心技术卷Ⅰ-第四章对象和类
  20. Jedis使用lua脚本完成令牌桶限流

热门文章

  1. 微信小程序 解决内层页面分享出去后 用户无法通过分享页面返回首页问题
  2. uniapp无法返回上一页_uni-app 返回上一页或返回多页后刷新页面
  3. 手机号码归属地查询JS跨域
  4. 停止浪费:彪马为旗下经典运动鞋的可生物降解版本RE:SUEDE进行前导测试
  5. 最低松弛度优先LLF(Least Laxity First)算法
  6. 第十二届省赛嵌入式设计与开发《停车计费系统》
  7. r440服务器显示输出,dell r440服务器介绍
  8. 计算机组成原理课程设计(1)
  9. bzoj 4009: [HNOI2015]接水果 整体二分+k-d tree
  10. [深入研究4G/5G/6G专题-39]: URLLC-10-《3GPP URLLC相关协议、规范、技术原理深度解读》-4-如何区分URLLC业务?网络切片的架构与技术详解