EXTJS中整合tinymce的富文本编辑器,添加上传图片功能
提供部分代码。
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: '<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:


图片上传预览功能


EXTJS中整合tinymce的富文本编辑器,添加上传图片功能的更多相关文章
- Vue CLI 3+tinymce 5富文本编辑器整合
基于Vue CLI 3脚手架搭建的项目整合tinymce 5富文本编辑器,vue cli 2版本及tinymce 4版本参考:https://blog.csdn.net/liub37/article/ ...
- TinyMCE(富文本编辑器)在Asp.Net中的使用方法
TinyMCE(富文本编辑器)在Asp.Net中的使用方法 转至:http://www.cnblogs.com/freeliver54/archive/2013/02/28/2936506.htm ...
- TinyMCE(富文本编辑器)
[转]TinyMCE(富文本编辑器)在Asp.Net中的使用方法 官网演示以及示例代码:https://www.tinymce.com/docs/demo/image-tools/ 转自:http:/ ...
- 【转】TinyMCE(富文本编辑器)
效果预览:http://www.tinymce.com/tryit/full.php [转]TinyMCE(富文本编辑器)在Asp.Net中的使用方法 转自:http://www.cnblogs.co ...
- 在Asp.Net Core中配置使用MarkDown富文本编辑器实现图片上传和截图上传(开源代码.net core3.0)
我们的富文本编辑器不能没有图片上传尤其是截图上传,下面我来教大家怎么实现MarkDown富文本编辑器截图上传和图片上传. 1.配置编辑器到html页 <div id="test-edi ...
- 在Asp.Net或.Net Core中配置使用MarkDown富文本编辑器有开源模板代码(代码是.net core3.0版本)
研究如何使用Markdown你们可能要花好几天才能搞定,但是看我的文章或者下载了源码,你搞定一般在10分钟之内.我先给各位介绍下它: Markdown 是一种轻量级标记语言,它允许人们使用易读易写的纯 ...
- vue-quill-editor富文本编辑器,上传图片自定义为借口上传
vue-quill-editor富文本编辑器,上传图片自定义为借口上传 博客地址:https://blog.csdn.net/lyj2018gyq/article/details/82585194
- bootstrap-wysihtml5 ckeditor 修改富文本编辑器可以上传图片
bootstrap-wysihtml5 ckeditor 修改富文本编辑器可以上传图片 bootstrap-wysihtml5实际使用内核为ckeditor 故这里修改ckeditor即可 ...
- 15、Vue CLI 3+tinymce 5富文本编辑器整合
富文本编辑器里大佬们都说tinymce NB! 插件安装 inymce官方提供了一个vue的组件tinymce-vue 如果有注册或购买过服务的话,直接通过组件配置api-key直接使用,懒的注册或者 ...
随机推荐
- (转)使用JDK中的Proxy技术实现AOP功能
http://blog.csdn.net/yerenyuan_pku/article/details/52863780 AOP技术在企业开发中或多或少都会用到,但用的最多的大概就是做权限系统时,在做权 ...
- Android(java)学习笔记171:服务(service)之绑定服务调用服务里面的方法
1.绑定服务调用服务里面的方法,图解: 步骤: (1)在Activity代码里面绑定 bindService(),以bind的方式开启服务 : bindServ ...
- String系列之replaceAll方法替换.
直接使用String类的replaceall方法的第一个参数并不是简单的字符串,而是一个正则表达式.在正则表达式中,英文点号(.)表示任意字符,所以你原先的写法会把所有字符都替换成空白. 转义使用所以 ...
- CNN完成mnist数据集手写数字识别
# coding: utf-8 import tensorflow as tf from tensorflow.examples.tutorials.mnist import input_data d ...
- freemarker list集合去重,实现hashset
在freemarker中没有提供去重的方法,虽然有提供定义hash的方法,如:<#assign myHash = { "name": "mouse", & ...
- Java集合系列之HashMap
概要 第1部分 HashMap介绍 HashMap简介 HashMap 是一个散列表,它存储的内容是键值对(key-value)映射.HashMap 继承于AbstractMap,实现了Map.Clo ...
- Report Builder 打开报错
提示:REP-0756:警告:找不到PL/SQL程序库’inv.pll’. 解决办法 处理:1.运行 ---输入REgedit ,在注册表内,查找注册表项Reports_path. 2.将下载的.pl ...
- luogu P4752
给定一个数字 A ,这个 A 由 a1,a2,...,aN 相乘得到. 给定一个数字 B ,这个 B 由 b1,b2,⋯,bM 相乘得到. 如果 A/B 是一个质数,请输出YES,否则输出NO. 输 ...
- nginx 获取真实ip
使用阿里云SLB,无法获取真实ip问题 官方给出的是如下用法,需要安装模块,大体上是没有错的,但是比较模糊,实际操作中可能会踩坑,所以参考学习即可,不必照搬.(那个http_realip_module ...
- LeetCode02-两数相加
''' 给出两个 非空 的链表用来表示两个非负的整数.其中,它们各自的位数是按照 逆序 的方式存储的,并且它们的每个节点只能存储 一位 数字. 如果,我们将这两个数相加起来,则会返回一个新的链表来表示 ...