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";
配置完成即可使用图片上传功能
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: spring与mybatis的整合
下一篇: C语言实现简单猜拳小游戏