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直接使用,懒的注册或者 ...
随机推荐
- 洛谷 P1618 三连击(升级版)
题目描述 将1,2,…,9共9个数分成三组,分别组成三个三位数,且使这三个三位数的比例是A:B:C,试求出所有满足条件的三个三位数,若无解,输出“No!!!”. //感谢黄小U饮品完善题意 输入输出格 ...
- flask_SQLAlchemy 中常用的过滤和执行器
常用的SQLAlchemy查询过滤器 过滤器 说明 filter() 把过滤器添加到原查询上,返回一个新查询 filter_by() 把等值过滤器添加到原查询上,返回一个新查询 limit 使用指定的 ...
- TensorFlow低阶API(二)—— 张量
简介 正如名字所示,TensorFlow这一框架定义和运行涉及张量的计算.张量是对矢量和矩阵向潜在的更高维度的泛化.TensorFlow在内部将张量表示为基本数据类型的n维数组. 在编写TensorF ...
- 【软件构造】第三章第五节 ADT和OOP中的等价性
第三章第五节 ADT和OOP中的等价性 在很多场景下,需要判定两个对象是否 “相等”,例如:判断某个Collection 中是否包含特定元素. ==和equals()有和区别?如何为自定义 ADT正确 ...
- JavaSE-29 Java8的Lambda表达式
概念说明 Lambda表达式是Java8提供的新特性,支持将代码块作为方法的参数. Lambda表达式支持使用简洁的代码创建只有一个方法的接口(函数式接口). 只包含一个方法的接口也称为函数式接口. ...
- CentOS7.6 修改密码
一.重启系统,在开机过程中,按下键盘上的e,进入编辑模式 三.将光标一直移动到 LANG=en_US.UTF-8 后面,空格,再追加init=/bin/sh.这里特别注意,需要写在UTF-8后,保 ...
- 如何移除浏览器一启动就打开lunchpage.org
lunchpage.org 就是一个劫持网站.症状就是你打开你电脑上的任何浏览器都会重定向到一个广告页面.这个很烦! 解决方法: 1. 安装 Zemana AntiMalware 便携版. 2. 打开 ...
- 洛谷 P1708 天然气井 题解
https://www.luogu.org/problemnew/show/P1708 这道题还是比较好的. 读完题目我们先想想如何计算某个天然气井($x_1,y_1$)和中转站($a_1,b_1$) ...
- 6. 将单独表空间(File-Per-Table Tablespaces)复制到另一个实例
6. 将单独表空间复制到另一个实例 本节介绍如何将单独表空间从一个MySQL实例复制 到另一个MySQL实例,也称为可传输表空间功能. 将InnoDB单独表空间复制到其他实例的原因有很多: - 在不对 ...
- Django之学员管理三
Django之学员管理三 web框架的本质: 本质是客户端和服务端的交互.用socket实现. socket客户端(浏览器) 2.发送ip和端口,http://www.baidu.com:80/ind ...