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"; 配置完成即可使用图片上传功能 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程小技巧。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |