当前位置： 移动技术网 > IT编程>开发语言>.net > CKEditor与dotnetcore实现图片上传功能

CKEditor与dotnetcore实现图片上传功能

2017年10月07日  | 移动技术网IT编程  | 我要评论

充神榜,边演边看,远距离防身器材

本文实例为大家分享了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";

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

 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网