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直接使用,懒的注册或者 ...
随机推荐
- QTableWidget表头样式
转载请注明出处:http://www.cnblogs.com/dachen408/p/7742680.html QTableView { background-color: rgba(255, 255 ...
- Jenkins邮件扩展插件Email Extension Plugin配置使用
1.在管理插件中搜索并安装邮件扩展插件Email Extension Plugin: 2.在任务中增加构建后操作步骤,选择Editable Email Notification; 3.在高级中Add ...
- SQLite-删除查询
SQLite -删除查询 SQLite DELETE查询用于从一个表删除现有记录.您可以使用WHERE子句删除查询删除选定行,否则所有记录将被删除. 语法: 删除查询的WHERE子句的基本语法如下: ...
- Java面试题之HashSet 的实现原理?
HashSet 的实现原理?首先,我们需要知道它是Set的一个实现,所以保证了当中没有重复的元素.一方面Set中最重要的一个操作就是查找.而且通常我们会选择 HashSet来实现,因为它专门对快速查找 ...
- vs 2012安装ASP.NET MVC5
VS2012能使用MVC5开发,但VS2012不自带MVC5,需要安装“用于 Visual Studio 2012 的 ASP.NET 和 Web 工具 2013.1” 从下面提供的链接下载安装: h ...
- (1) LVS基本概念和三种模式
网站架构中,负载均衡技术是实现网站架构伸缩性的主要手段之一. 所谓"伸缩性",是指可以不断向集群中添加新的服务器来提升性能.缓解不断增加的并发用户访问压力.通俗地讲,就是一头牛拉不 ...
- (10) openssl dhparam(密钥交换)
openssl dhparam用于生成和管理dh文件.dh(Diffie-Hellman)是著名的密钥交换协议,或称为密钥协商协议,它可以保证通信双方安全地交换密钥. 但注意,它不是加密算法,所以不提 ...
- 第五章:C++程序的结构
主要内容: 1.作用域与可见性 2.对象的生存期 3.数据与函数 4.静态成员 5.共享数据的保护 6.友元 7.编译预处理命令 8.多文件结构和工程 作用域:函数原型作用域.块作用域.类作用域.文件 ...
- 剑指Offer(书):机器人的运动范围
题目:地上有一个m行和n列的方格.一个机器人从坐标0,0的格子开始移动,每一次只能向左,右,上,下四个方向移动一格,但是不能进入行坐标和列坐标的数位之和大于k的格子. 例如,当k为18时,机器人能够进 ...
- 关于自由拖拽完成的剪切区域(UI组件之图片剪切器)
var x, y,areaWidth,areaHeight; var down;//闪光的判断标准,很好 addEvent(canvas,'mousedown',function(e){ // con ...