KindEditor粘贴时候自动上传远程图片(非本地)
KindEditor版本:4.1.10 (2013-11-23),具体可以去官网下载:http://kindeditor.net/down.php
基本的配置这里不说了,官网有文档,贴代码:
- <textarea id="content" style="width:80%;height:100px;">textarea>
- //定义编辑器对象
- var editor;
- //异步加载编辑器
- $.getScript('../kindeditor/kindeditor-min.js', function () {
- KindEditor.basePath = '../kindeditor/';
- editor = KindEditor.create('textarea[id="content"]', {
- id : 'editor_id',
- uploadJson : '../kindeditor/asp.net/upload_json.ashx',
- fileManagerJson : '../kindeditor/asp.net/file_manager_json.ashx',
- allowFileManager : true, //默认false
- resizeType : 1,
- items : [
- 'undo', 'redo', '|',
- 'fontname', 'fontsize', '|',
- 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline', 'removeformat', '|',
- 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist', 'insertunorderedlist', '|',
- 'image', 'link', '|', 'preview'],
- autoHeightMode : true, //默认值: false
- afterCreate : function () {
- this.loadPlugin('autoheight');
- var __doc = this.edit.doc;
- //KindEditor.ctrl(__doc, 'V', function () {
- // alert('123');
- //});
- $(__doc).bind('paste', null, function () { //右键粘贴, 包括 ctrl+v
- setTimeout(function () {
- parent.uploadWebImg(editor);
- }, 200);
- });
- },
- afterChange : function () {
- $('.word_count').html(this.count()); //(字数统计包含HTML代码。)
- },
- });
- });
通过源代码可以在这里看到:https://github.com/kindsoft/kindeditor/blob/master/kindeditor-all.js
影响的具体方法就看自己这么写了,我的uploadWebImg代码贴到下面,用的layer弹窗组件,具体看它的官网api,这里不多说。
- //上传远程图片
- function uploadWebImg(editor) {
- var relaceSrc = []; //图片地址对象容器
- var imgs = $(editor.html()).find('img');
- imgs.map(function () {
- var _src = $(this).attr('src');
- //if ((_src.indexOf('http://') >= 0 || _src.indexOf('https://') >= 0) && checkimgok(_src)) {
- if (_src.indexOf('http://') >= 0 || _src.indexOf('https://') >= 0) { //考虑可能有动态生成的图片
- relaceSrc.push({ k: _src });
- };
- });
- if (relaceSrc.length == 0) return;
- var msg = '内容包含' + relaceSrc.length.toString() + '张远程图片,是否现在上传?';
- confirmLayerNormal(msg, function (_index) {
- var loading = layer.load(0);
- var paramdata = {
- action: "791c252eee12530f4f3af326674b7d97",
- arg: { imgs: relaceSrc },
- };
- doAjaxPost(paramdata, function (result) {
- layer.close(loading);
- if (!result.success) {
- SuperSite.MsgError(result.msg);
- return;
- }
- //替换编辑器图片源
- var _content = editor.html();
- $(relaceSrc).each(function (idx, dom) {
- _content = _content.replace(dom.k, result.data[idx].value);
- });
- editor.html(_content);
- SuperSite.MsgOK('远程图片上传成功');
- });
- layer.close(_index);
- });
- };
服务端的代码:
-
///
- /// 上传远程图片
- ///
- private void UploadWebImg()
- {
-
var ajaxdata = base.GetActionParamData
(); - if (ajaxdata == null || ajaxdata.imgs == null || ajaxdata.imgs.Count == 0)
- Outmsg(false, outmsg: "未获取到上传的图片地址");
- var len = ajaxdata.imgs.Count;
-
var tempurl = new List
(); -
var stkimg = new Stack
(len); //上传栈列 - for (int i = 0; i < len; i++)
- {
- var img = ajaxdata.imgs[i].k.Trim();
- if (stkimg.Any(x => x.value == img)) //刚刚上传过了(说明有重复的图片要上传)
- {
- var loadedpath = stkimg.First(x => x.value == img).value;
- tempurl.Add(new KeyValueDesc
- {
- key = i.ToString(),
- value = loadedpath,
- desc = (int)EnumCenter.UploadImgStatus.Repeat
- });
- continue;
- }
- var tb = DownLoadWebImg(img);
- stkimg.Push(new KeyValue { key = i.ToString(), value = tb.Item2 }); //推入栈
- tempurl.Add(new KeyValueDesc
- {
- key = i.ToString(),
- value = tb.Item2,
- desc = tb.Item1 ?
- (int)EnumCenter.UploadImgStatus.OK :
- (int)EnumCenter.UploadImgStatus.Error
- });
- }
- Outmsg(true, outdata: tempurl);
- }
- private Tuple<bool, string> DownLoadWebImg(string url)
- {
- try
- {
- var dt = DateTime.Now;
- var folder = "/upload/image/" + dt.ToString("yyyyMMdd", DateTimeFormatInfo.InvariantInfo) + "/";
- var newfile = dt.ToString("HHmmss_ffff", DateTimeFormatInfo.InvariantInfo)
- + url.Substring(url.LastIndexOf('.')); //扩展名(带.号)
- var filepath = Server.MapPath(folder);
- if (!Directory.Exists(filepath))
- {
- Directory.CreateDirectory(filepath);
- }
- using (WebClient mywebclient = new WebClient())
- {
- mywebclient.DownloadFile(url, filepath + newfile);
- return new Tuple<bool, string>(true, folder + newfile);
- }
- }
- catch (Exception ex)
- {
- Tools.LogHelp.WriteLog("下载远程图片失败", ex);
- return new Tuple<bool, string>(false, url); //返回原图地址
- }
- }
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:service@webmeng.net 进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。
以上信息是否解决您的问题?
相关问题
- 邮件系统架设步骤
- 第三方美化界面资源
- 解决宝塔远程mysql问题
- Navicat连接错误1130:is not allowed to...
- 解决1130 is not allowed to connect ...
- 宝塔面板安装nginx,宝塔nginx配置文件
- MySQL PHPmyadmin 数据库导出报错Fatal err...
- Winwebmail能发邮件不能收邮件的解决方法
- 中国境内ICP备案材料清单
- winwebmail邮件系统 v3.9.0.7中文破解版
- C盘空间不足怎么办?5种方法获得更多空间!
- 安全实用的应用迁移方法推荐!
- linux开启端口命令
- linux开启端口
- Linux怎么查看操作系统版本号
- linux centos中升级更新命令yum upgrade和yu...
- Linux下平滑升级nginx
- 50个最常用的Unix/Linux命令
- [分享]云服务器挂马清理实例
- 新手入门——部署一个网站需要准备什么
- 虚拟主机相关基础知识
- 从域名到网站,只需四步!
- 全国各省备案基本要求一览表
- 互联网网站如何备案?
- 域名的实名审核需要多久?
- 怎么在服务器绑定域名
- 快速添加域名解析
- 无法登录云服务器?
- Mysql安装出现的问题Building CXX object s...
- Linux面板7.9.0安装脚本
- linux旧版本如何升级成新版本
- 宝塔Linux面板最新自动磁盘挂载脚本,一键挂载数据盘到www目录...
- 如何在Linux中清除缓存(Cache)
- Linux用指令来释放缓存方法
- Linux清除系统缓存释放内存命令介绍
- 企业邮局域名解析设置
- 如何连接到远程windows服务器
- Webmeng 2022 V13.0.1 下载地址
- wap手机网页html通过特殊链接:打电话,发短信,发邮件详细教程
- Webmeng分类导航标签,模板
餐厅介绍
自助餐厅
用户评论