Extjs 3.0 htmleditor实现插入图片功能
首先感谢前辈们的无私奉献。贴出参考地址
http://zhidao.baidu.com/link?url=Q0ZM405OFNy_xAHSut9TepRJxgXCxFayQttrQz1N82dlA1_JnAb4Ojdl-b9T0AyzPNcgdHWI5h-66RUcVWLW6Mb295rWGUXJFyLw1GBrvwK
贴出效果图
按照前辈的指示。我复制代码存为了一个js文件。引入。关于之前的js代码请移步我贴出的链接。
最开始,我一字不改地复制了代码,除了修改了文件上传的url。测试,发现总是报错,并且不进入sucess也不进入failure。断点检查发现是因为服务器返回的数据格式不对,在解析成json的时候,extjs内部出错了。这里贴出一下后台关键代码仅供参考,后台我用的是asp.net:
protected void Page_Load(object sender, EventArgs e)
{
if (Request.QueryString["type"] != null && Request.QueryString["type"] == "newsImage")
{
Response.Write(InsertNewsImage());
Response.End();
}
}
private string InsertNewsImage()
{
string uploadPath = "D:\test";
string downloadPath = "http://localhost/UploadFiles";
try
{
string path = uploadPath + "/NewsImage/";
if (!Directory.Exists(path))
{
Directory.CreateDirectory(path);
}
HttpPostedFile file = Request.Files[0];
if (file == null || file.ContentLength == 0 || string.IsNullOrEmpty(file.FileName))
{
return "{success:false,error:'上传文件为空'}";
}
string extName = "." + file.FileName.Substring(file.FileName.LastIndexOf('.') + 1);
string saveName = Guid.NewGuid().ToString() + extName;
file.SaveAs(path + "\\" + saveName);
return "{success:true,filepath:'" + downloadPath + "/NewsImage/" + saveName + "'}";
}
catch (Exception e)
{
return "{success:false,error:'" + e.Message + "'}";
}
}
注意,后台一定要返回json格式的数组,并且带一个bool类型的success返回值。其他的就可以根据自己的需要返回。
目前为止,可以上传了,也可以显示图片了。但是美中不足的是,图片如果上传太大,显示的太大太大了就,不好控制。于是我加了一个宽高限定上去。
然后这里还有个问题,大家也都会发现。就是返回后的图片总是在文本的最前面,也就是说,无法插入到之前光标在的地方,为什么呢?
于是我仔细去看前辈的方法,也仔细去找extjs 的api看看有没有记录鼠标光标的方法。最后,我看到前辈们用的这个方法
if (Ext.isIE) {
editor.insertAtCursor(element.outerHTML);
}
我去翻阅了一下insertAtCursor的方法,这个方法是这样子的:
function(b){
if(!this.activated)
{
return
}
if(Ext.isIE)
{
this.win.focus();
var a=this.doc.selection.createRange();
if(a)
{
a.collapse(true);
a.pasteHTML(b);
this.syncValue();
this.deferFocus()
}
}
else
{
this.win.focus();
this.execCmd("InsertHTML",b);
this.deferFocus()
}
}
这里大家其实可以发现原因了。在插入图像之前,代码先获得文本框的焦点,在焦点处创建一个Range,这里可以理解成创建一个空元素吧,然后把后台返回的图像的html插入到这个元素里面。注意一下,这里获取焦点这个方法focus()是在上传图片之后执行的,获取焦点之后创建Range。问题就在这里了。在上传图片的时候,文本框是失去焦点的,也就是说,那个时候并不知道光标在哪个地方,因为没有焦点。所以最后总是把图片插在文字的最前面。我们只需要把获取焦点并创建Range的逻辑放在弹出上传对话框之前就好了。然后再把返回的图像路径放到Range里面。下面贴出插件全部代码!
var HTMLEditor = Ext.extend(Ext.form.HtmlEditor, {
addImage: function() {
var editor = this;
editor.win.focus();
var range = editor.doc.selection.createRange();
var imgform = new Ext.FormPanel({
region: 'center',
labelWidth: 55,
frame: true,
bodyStyle: 'padding:5px 5px 0',
autoScroll: true,
border: false,
fileUpload: true,
items: [{
xtype: 'textfield',
fieldLabel: '选择图片',
id: 'UserFile',
name: 'UserFile',
inputType: 'file',
allowBlank: false,
blankText: '文件不能为空',
anchor: '90%'
}, {
xtype: 'textfield',
fieldLabel: '高(像素)',
id: 'height',
name: 'height',
allowBlank: false,
regex: /^\d+$/,
regexText: '请输入数字',
blankText: '请填写图片显示的高度',
anchor: '90%'
}, {
xtype: 'textfield',
fieldLabel: '宽(像素)',
id: 'width',
name: 'width',
allowBlank: false,
regex: /^\d+$/,
regexText: '请输入数字',
blankText: '请填写图片显示的宽度',
anchor: '90%'
}],
buttons: [{
text: '上传',
handler: function() {
if (!imgform.form.isValid()) { return; }
var formValues = imgform.form.getValues();
var width = formValues["width"];
var height = formValues["height"];
if (!width || !height || width == "0" || height == "0") {
MessageBox('错误', "请填写正确的宽度和高度");
return;
}
imgform.form.submit({
waitMsg: '正在上传......',
url: 'SaveAffix.aspx?type=newsImage',
success: function(form, action) {
var element = document.createElement("img");
element.style.width = width + "px";
element.style.height = width + "px";
element.src = action.result.filepath;
if (Ext.isIE) {
if (range) {
range.collapse(true);
range.pasteHTML(element.outerHTML);
editor.syncValue();
editor.deferFocus()
}
} else {
var selection = editor.win.getSelection();
if (!selection.isCollapsed) {
selection.deleteFromDocument();
}
selection.getRangeAt(0).insertNode(element);
}
form.reset();
win.close();
},
failure: function(form, action) {
form.reset();
if (action.failureType == Ext.form.Action.SERVER_INVALID)
MessageBox('上传失败', action.result.error);
}
});
}
}, {
text: '关闭',
handler: function() {
win.close(this);
}
}]
}) var win = new Ext.Window({
title: "上传图片",
width: 300,
height: 200,
modal: true,
border: false,
iconCls: "img.gif",
layout: "fit",
items: imgform });
win.show();
},
createToolbar: function(editor) {
HTMLEditor.superclass.createToolbar.call(this, editor);
this.tb.insertButton(16, {
cls: "x-btn-icon",
icon: "img.gif",
handler: this.addImage,
scope: this
});
}
});
使用方法:var Content = new HTMLEditor({ fieldLabel: '内容', width: 600, height: 250, value: contentValue });
最后值得一提的是,这只是一个例子,我没有判断上传文件的类型。大家可以在前端判断也可以在后端判断返回错误提示。祝愉快。
Extjs 3.0 htmleditor实现插入图片功能的更多相关文章
- ext js/Ext.Net_演示 htmleditor 上传&插入图片
本文内容 解决方案结构 HtmlEditor_Upload.js 脚本 HtmlEditorUploadImg.ashx 上传图片到服务器 演示 htmleditor 控件添加插入图片功能 解决方 ...
- 富文本编辑器UEditor自定义工具栏(二、插入图片、音频、视频个性化功能按钮和弹层及自定义分页符)
导读:本篇将简单探讨插入图片.音频.视频的功能按钮实现方式 传送门:富文本编辑器UEditor自定义工具栏(一.基础配置与字体.背景色.行间距.超链接实现) 一.效果图 1.UEditor自定义工具栏 ...
- Java利用poi生成word(包含插入图片,动态表格,行合并)
转(小改): Java利用poi生成word(包含插入图片,动态表格,行合并) 2018年12月20日 09:06:51 wjw_11093010 阅读数:70 Java利用poi生成word(包含插 ...
- 扩展ExtJs 4.2.1 htmleditor 添加图片功能
做项目的时候遇到这样一个问题,因为我是用ExtJs做的后台管理框架,所以当我使用ExtJs htmleditor 控件 的时候,发现没有图片上传的功能,于是我打算在网上找找有关的文章,居然真有人写过, ...
- MWeb 1.4 新功能介绍一:引入文件夹到 MWeb 中管理,支持 Octpress、Jekyll 等静态博客拖拽插入图片和实时预览
之前在 MWeb 中打开非文档库中的 Markdown 文档,如果文档中有引用到本机图片,是没办法在 MWeb 中显示出来和预览的.这是因为 Apple 规定在 Mac App Store(MAS) ...
- Latex插入图片 分类: LaTex 2014-11-18 20:07 261人阅读 评论(0) 收藏
在Latex中插入图片的方式很多,我这里只介绍自己常用的一种方式,欢迎大家指导. 我习惯于使用graphicx宏包来插入图片,有时候会配合上subfigure宏包来同时插入多幅图片组合. 首先,需要在 ...
- NPOI2.2.0.0实例详解(十一)—向EXCEL插入图片
--------------------- 本文来自 天水宇 的CSDN 博客 ,全文地址请点击:https://blog.csdn.net/xxs77ch/article/details/50553 ...
- ckeditor 4.2.1_演示 ckeditor 上传&插入图片
本文内容 FineUI ckeditor fckeditor/ckeditor 演示 ckeditor 4.2.1 上传&插入图片 最近看了一下 FineUI_v3.3.1 控件,对里边的 c ...
- C#向PPT文档插入图片以及导出图片
PowerPoint演示文稿是我们日常工作中常用的办公软件之一,而图片则是PowerPoint文档的重要组成部分,那么如何向幻灯片插入图片以及导出图片呢?本文我将给大家分享如何使用一个免费版Power ...
随机推荐
- 从零开始PHP学习 - 第二天
写这个系列文章主要是为了督促自己 每天定时 定量消化一些知识! 同时也为了让需要的人 学到点啥~! 本人技术实在不高!本文中可能会有错误!希望大家发现后能提醒一下我和大家! 偷偷说下 本教程最后的目 ...
- 《转》java动态代理(JDK和cglib)
该文章转自:http://www.cnblogs.com/jqyp/archive/2010/08/20/1805041.html JAVA的动态代理 代理模式 代理模式是常用的java设计模式,他的 ...
- Windows-1252对Latin1编码有改变(并不完全兼容),而且Latin1缺失了好多西欧字符(法语,德语,西班牙语都有)
主要是80到9F的编码被改掉了.从latin1的控制字符,变成了可以输出的可见字符. latin1编码: ISO-8859-1 x0 x1 x2 x3 x4 x5 x6 x7 x8 x9 xA x ...
- 四种常见的提示弹出框(success,warning,error,loading)原生JavaScript和jQuery分别实现
原文:四种常见的提示弹出框(success,warning,error,loading)原生JavaScript和jQuery分别实现 虽然说现在官方的自带插件已经有很多了,但是有时候往往不能满足我们 ...
- mysql 主从实现
主库:192.168.1.19 从库:192.168.1.20 开启db_test单库复制 常见问题 参考文档 主配置 以mysql root用户登录,用下面sql创建专门用于主从复制的mysql用 ...
- android 解决ViewPager双层嵌套的滑动问题
解决ViewPager双层嵌套的滑动问题 今天我分享一下ViewPager的双层嵌套时影响内部ViewPager的触摸滑动问题 之前在做自己的一个项目的时候,遇到广告栏图片动态切换,我第一时间想到的就 ...
- MSSTDFMT.dll系统文件(附2种MSSTDFMT.dll 注册方法)-系统增强
MSSTDFMT.dll系统文件(附2种MSSTDFMT.dll 注册方法)-系统增强 msstdfmt.dll是微软标准数据格式对象相关动态链接库文件. msstdfmt.dll里面包含了定义好函数 ...
- MZL's xor
MZL's xor Time Limit : 2000/1000ms (Java/Other) Memory Limit : 65536/65536K (Java/Other) Total Sub ...
- Cocos2d-x3.0 捕Android菜单键和返回键
原文地址:http://blog.csdn.net/qqmcy/article/details/26172665 .h void onKeyReleased(EventKeyboard::KeyCod ...
- ceph启动脚本
放在/etc/init.d/目录下,用法如下: root@u253:~# /etc/init.d/ceph === mon.a === usage: /etc/init.d/ceph [options ...