数码控科技猎奇Iphone动漫星座游戏电竞lolcosplay王者荣耀攻略allcnewsBLOGNEWSBLOGASKBLOGBLOGZSK全部技术问答问答技术问答it问答代码软件新闻开发博客电脑/网络手机/数码笔记本电脑互联网操作系统软件硬件编程开发360产品资源分享电脑知识文档中心IT全部全部分类全部分类技术牛文全部分类教程最新网页制作cms教程平面设计媒体动画操作系统网站运营网络安全服务器教程数据库工具网络安全软件教学vbscript正则表达式javascript批处理更多»编程更新教程更新游戏更新allitnewsJava新闻网络医疗信息化安全创业站长电商科技访谈域名会议专栏创业动态融资创投创业学院 / 产品经理创业公司人物访谈营销开发数据库服务器系统虚拟化云计算嵌入式移动开发作业作业1常见软件all电脑网络手机数码生活游戏体育运动明星影音休闲爱好文化艺术社会民生教育科学医疗健康金融管理情感社交地区其他电脑互联网软件硬件编程开发360相关产品手机平板其他电子产品摄影器材360硬件通讯智能设备购物时尚生活常识美容塑身服装服饰出行旅游交通汽车购房置业家居装修美食烹饪单机电脑游戏网页游戏电视游戏桌游棋牌游戏手机游戏小游戏掌机游戏客户端游戏集体游戏其他游戏体育赛事篮球足球其他运动球类运动赛车健身运动运动用品影视娱乐人物音乐动漫摄影摄像收藏宠物幽默搞笑起名花鸟鱼虫茶艺彩票星座占卜书画美术舞蹈小说图书器乐声乐小品相声戏剧戏曲手工艺品历史话题时事政治就业职场军事国防节日风俗法律法规宗教礼仪礼节自然灾害360维权社会人物升学入学人文社科外语资格考试公务员留学出国家庭教育学习方法语文物理生物工程学农业数学化学健康知识心理健康孕育早教内科外科妇产科儿科皮肤科五官科男科整形中医药品传染科其他疾病医院两性肿瘤科创业投资企业管理财务税务银行股票金融理财基金债券保险贸易商务文书国民经济爱情婚姻家庭烦恼北京上海重庆天津黑龙江吉林辽宁河北内蒙古山西陕西宁夏甘肃青海新疆西藏四川贵州云南河南湖北湖南山东江苏浙江安徽江西福建广东广西海南香港澳门台湾海外地区

CKEditor与dotnetcore实现图片上传功能

来源:脚本之家  责任编辑:小易  时间:2018/1/25 18:18:59

本文实例为大家分享了CKEditor与dotnetcore实现图片上传的具体代码,供大家参考,具体内容如下

CKEditor的使用

1.引入js库

<script src="https://cdn.ckeditor.com/4.6.1/standard-all/ckeditor.js"></script> 

2.定义一个textarea标签

<textarea id="editor">
 </textarea> 

3.用CkEditor替换textarea即可使用基本功能

CKEDITOR.replace('editor'); 

4.配置CkEditor

添加图片上传,代码插入工具

CKEDITOR.replace('editor-box', {
   //GitHub地址:https://github.com/ckeditor   
   toolbar: [
    { name: 'document', items: ['Source'] },
    { name: 'basicstyles', items: ['Bold', 'Italic'] },
    { name: 'paragraph', items: ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote'] },
    { name: 'links', items: ['Link', 'Unlink'] },
    { name: 'insert', items: ['Image','CodeSnippet'] },
    { name: 'styles', items: ['Format', 'Styles'] }
   ],
   filebrowserImageUploadUrl: '/Blogs/UploadImageUrl', //配置图片上传后台Url   
   customConfig: '',   
   extraPlugins: 'codesnippet,image2,uploadimage',   
   removePlugins: 'image',   
   //mathJaxLib: 'https://cdn.mathjax.org/mathjax/2.6-latest/MathJax.js?config=TeX-AMS_HTML',  
   codeSnippet_theme: 'ir_black',
   height: 450,   
   contentsCss: ['https://cdn.ckeditor.com/4.6.1/standard-all/contents.css'],   
   format_tags: 'p;h1;h2;h3;pre',   
   removeDialogTabs: 'image:advanced;link:advanced;link:target',  
   stylesSet: [
    /* Inline Styles */
    { name: 'Marker', element: 'span', attributes: { 'class': 'marker' } },
    { name: 'Cited Work', element: 'cite' },
    { name: 'Inline Quotation', element: 'q' },
    /* Object Styles */
    {
     name: 'Special Container',
     element: 'div',
     styles: {
      padding: '5px 10px',
      background: '#eee',
      border: '1px solid #ccc'
     }
    },
    {
     name: 'Compact table',
     element: 'table',
     attributes: {
      cellpadding: '5',
      cellspacing: '0',
      border: '1',
      bordercolor: '#ccc'
     },
     styles: {
      'border-collapse': 'collapse'
     }
    },
    { name: 'Borderless Table', element: 'table', styles: { 'border-style': 'hidden', 'background-color': '#E6E6FA' } },
    { name: 'Square Bulleted List', element: 'ul', styles: { 'list-style-type': 'square' } },
    /* Widget Styles */
    { name: 'Illustration', type: 'widget', widget: 'image', attributes: { 'class': 'image-illustration' } },
    { name: 'Featured snippet', type: 'widget', widget: 'codeSnippet', attributes: { 'class': 'code-featured' } },
    { name: 'Featured formula', type: 'widget', widget: 'mathjax', attributes: { 'class': 'math-featured' } }
   ]
  });

5.后台接收图片

/// <summary>
  /// 图片上传
  /// </summary>
  /// <param name="env"></param>
  /// <returns></returns>
  public async Task<IActionResult> UploadImageUrl([FromServices]IHostingEnvironment env)
  {
   // CKEditor提交的很重要的一个参数 
   string callback = Request.Query["CKEditorFuncNum"];
   var form = Request.Form;
   var img = form.Files[0]; //获取图片
   string fileName = img.FileName;
   var openReadStream = img.OpenReadStream();
   byte[] buff = new byte[openReadStream.Length];
   await openReadStream.ReadAsync(buff, 0, buff.Length);
   string filenameGuid = Guid.NewGuid().ToString();
   var bowerPath = PathUtils.GetSavePath(filenameGuid, true) + ".jpg";//获取到图片保存的路径,这边根据自己的实现
   var savePath = Path.Combine(env.WebRootPath, bowerPath);
   using (FileStream fs = new FileStream(savePath, FileMode.Create))
   {
    await fs.WriteAsync(buff, 0, buff.Length);
    //服务器返回JavaScript脚本
    string result = $"<script type=\"text/javascript\">window.parent.CKEDITOR.tools.callFunction(\"{callback}\", \"{"/"+bowerPath}\", \"\");</script>";
    Response.ContentType = "text/html;charset=UTF-8";
    return Content(result);
   }
  }
 

6.注意

服务器返回需要加上这个,否则会遇到前端页面不执行返回的JavaScript脚本的问题

Response.ContentType = "text/html;charset=UTF-8";

配置完成即可使用图片上传功能

 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

您可能感兴趣的文章:


  • 本文相关:
  • asp.net fckeditor 2.6.3 上传文件没有权限解决方法
  • 修改fckeditor的文件上传功能步骤
  • asp fckeditor自定义上传文件的文件名
  • fckeditor asp.net 上传附件研究
  • asp.net下fckeditor配置图片上传最简单的方法
  • 通过fckeditor把图片上传到独立图片服务器的方法
  • asp.net+fckeditor上传图片显示叉叉图片无法显示的问题的解决方法
  • 整合ckeditor+ckfinder,解决上传文件路径问题
  • 为ckeditor编辑器加上传图片的功能
  • fckeditor编辑器添加图片上传功能及图片路径问题解决方法
  • asp.net后台如何动态添加js文件和css文件的引用
  • 动态添加
  • asp.net的htmlform控件学习及post与get的区别概述
  • htmlform
  • 控件
  • post
  • get
  • .net 中按.(点)无法智能提示的bug解决方案
  • 智能提示
  • .net 读取项目assemblyinfo.cs属性值
  • .net
  • assemblyinfo.cs
  • 基于dapper实现分页效果 支持筛选、排序、结果集总数等
  • dapper
  • 分页
  • .net下文本相似度算法余弦定理和simhash浅析及应用实例分析
  • .net
  • 算法
  • radiobuttonlist绑定图片及泛型dictionary应用
  • radiobuttonlist
  • 泛型
  • dictionary
  • asp.net 页面间传值方法小结
  • asp.net
  • 页面间
  • 传值
  • asp.net通过remoting service上传文件
  • as
  • sp
  • pn
  • ne
  • et
  • t通
  • 通过
  • 过r
  • re
  • em
  • mo
  • ot
  • ti
  • in
  • ng
  • gs
  • se
  • er
  • rv
  • vi
  • ic
  • ce
  • e上
  • 上传
  • 传文
  • 文件
  • .net微信服务号发送红包
  • .net
  • 微信红包
  • 免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved