查看: 446|回复: 0

[ASP.NET教程] CKEditor与dotnetcore实现图片上传功能

发表于 2018-1-3 08:00:01

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

CKEditor的使用

1.引入js库

  1. <script src="https://cdn.ckeditor.com/4.6.1/standard-all/ckeditor.js"></script>
复制代码

2.定义一个textarea标签

  1. <textarea id="editor">
  2. </textarea>
复制代码

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

  1. CKEDITOR.replace('editor');
复制代码

4.配置CkEditor

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

  1. CKEDITOR.replace('editor-box', {
  2. //GitHub地址:https://github.com/ckeditor
  3. toolbar: [
  4. { name: 'document', items: ['Source'] },
  5. { name: 'basicstyles', items: ['Bold', 'Italic'] },
  6. { name: 'paragraph', items: ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote'] },
  7. { name: 'links', items: ['Link', 'Unlink'] },
  8. { name: 'insert', items: ['Image','CodeSnippet'] },
  9. { name: 'styles', items: ['Format', 'Styles'] }
  10. ],
  11. filebrowserImageUploadUrl: '/Blogs/UploadImageUrl', //配置图片上传后台Url
  12. customConfig: '',
  13. extraPlugins: 'codesnippet,image2,uploadimage',
  14. removePlugins: 'image',
  15. //mathJaxLib: 'https://cdn.mathjax.org/mathjax/2.6-latest/MathJax.js?config=TeX-AMS_HTML',
  16. codeSnippet_theme: 'ir_black',
  17. height: 450,
  18. contentsCss: ['https://cdn.ckeditor.com/4.6.1/standard-all/contents.css'],
  19. format_tags: 'p;h1;h2;h3;pre',
  20. removeDialogTabs: 'image:advanced;link:advanced;link:target',
  21. stylesSet: [
  22. /* Inline Styles */
  23. { name: 'Marker', element: 'span', attributes: { 'class': 'marker' } },
  24. { name: 'Cited Work', element: 'cite' },
  25. { name: 'Inline Quotation', element: 'q' },
  26. /* Object Styles */
  27. {
  28. name: 'Special Container',
  29. element: 'div',
  30. styles: {
  31. padding: '5px 10px',
  32. background: '#eee',
  33. border: '1px solid #ccc'
  34. }
  35. },
  36. {
  37. name: 'Compact table',
  38. element: 'table',
  39. attributes: {
  40. cellpadding: '5',
  41. cellspacing: '0',
  42. border: '1',
  43. bordercolor: '#ccc'
  44. },
  45. styles: {
  46. 'border-collapse': 'collapse'
  47. }
  48. },
  49. { name: 'Borderless Table', element: 'table', styles: { 'border-style': 'hidden', 'background-color': '#E6E6FA' } },
  50. { name: 'Square Bulleted List', element: 'ul', styles: { 'list-style-type': 'square' } },
  51. /* Widget Styles */
  52. { name: 'Illustration', type: 'widget', widget: 'image', attributes: { 'class': 'image-illustration' } },
  53. { name: 'Featured snippet', type: 'widget', widget: 'codeSnippet', attributes: { 'class': 'code-featured' } },
  54. { name: 'Featured formula', type: 'widget', widget: 'mathjax', attributes: { 'class': 'math-featured' } }
  55. ]
  56. });
复制代码

5.后台接收图片

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

6.注意

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

  1. Response.ContentType = "text/html;charset=UTF-8";
复制代码

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

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



回复

使用道具 举报