加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 创业 > C语言 > 正文

CKEditor与dotnetcore实现图片上传功能

发布时间:2020-12-15 03:37:13 所属栏目:C语言 来源:网络整理
导读:本文实例为大家分享了CKEditor与dotnetcore实现图片上传的具体代码,供大家参考,具体内容如下 CKEditor的使用 1.引入js库 script src="https://cdn.ckeditor.com/4.6.1/standard-all/ckeditor.js"/script 2.定义一个textarea标签 textarea id="editor" /tex

本文实例为大家分享了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',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',widget: 'codeSnippet',attributes: { 'class': 'code-featured' } },{ name: 'Featured formula',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,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,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";

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

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

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读