CKEditor与dotnetcore实现图片上传功能

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

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

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

CKEditor与dotnetcore实现图片上传功能

猜你在找的程序笔记相关文章