欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

CKEditor与dotnetcore实现图片上传功能

程序员文章站 2022-07-05 10:20:33
本文实例为大家分享了ckeditor与dotnetcore实现图片上传的具体代码,供大家参考,具体内容如下 ckeditor的使用 1.引入js库

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

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

CKEditor与dotnetcore实现图片上传功能

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