ckeidtor编辑器添加图片上传功能

1.ckeditor默认没有上传图片功能，只能通过Url显示图片，图下图

2.首先说明，ckeditor是有上传功能的，只是隐藏了，需要通过配置让它显示

找到ckeditor/plugins/image/dialogs/image.js文件，搜索 id:"Upload" 把后面的hidden:!0改为hidden:false，然后就会显示上传页，如下图

3.光有上传页面也不能把图片上传到服务器，还需要设置一下上传对应的Action(使用MVC)，可以在ckeditor/plugins/config.js里配置，本人配置文件如下

CKEDITOR.editorConfig = function( config ) {// Define changes to default configuration here. For example:// config.language = 'fr';// config.uiColor = '#AADC6E';config.language = 'zh-cn'; // 配置语言  config.width = 'auto'; // 宽度  config.height = '500px'; // 高度  config.font_names = '宋体/SimSun;新宋体/NSimSun;仿宋_GB2312/FangSong_GB2312;楷体_GB2312/KaiTi_GB2312;黑体/SimHei;微软雅黑/Microsoft YaHei;' + config.font_names;config.image_previewText = ' '; //预览区域显示内容  config.filebrowserImageUploadUrl = "/Admin/Service/CKeditorUpload";//要上传的action
};

config.image_previewText = ' ';用来清除预览图区域一堆英文；

config.filebrowserImageUploadUrl = "/Admin/Service/CKeditorUpload";用来设置要上传图片的action4.在上传图片的Action中写上传图片代码，如下

       [HttpPost]public ActionResult CKeditorUpload(HttpPostedFileBase upload){var fileName = Path.GetFileName(upload.FileName);var filePhysicalPath = Server.MapPath("~/upload/" + fileName);//我把它保存在网站根目录的 upload 文件夹
upload.SaveAs(filePhysicalPath);var url = "/upload/" + FileName;var CKEditorFuncNum = System.Web.HttpContext.Current.Request["CKEditorFuncNum"];//上传成功后，我们还需要通过以下的一个脚本把图片返回到第一个tab选项return Content("<script>window.parent.CKEDITOR.tools.callFunction(" + CKEditorFuncNum + ", \"" + url + "\");</script>");}

OK，可以上传图片到服务器了

转载于:https://www.cnblogs.com/marshhu/p/7309449.html

ckeidtor编辑器添加图片上传功能相关推荐

vue3中使用vue-quill富文本编辑器重写图片上传功能
最近开发的一个vue3+element-plus的项目,需要用到富文本编辑器,最终选择了VueQuill这一款轻便型的富文本编辑器. 说说遇到的问题:富文本编辑器的图片上传,默认是直接以base64图 ...
kindeditor上传图片php,Kindeditor编辑器添加图片上传水印功能（php代码）
KindEditor 是一套开源的在线HTML编辑器,开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框.可以无缝地与 Java..NET.PH ...
Quill编辑器实现图片上传功能
我们引入Quill时是可以直接插入图片了,但是是Quill将图片转化成了base64格式,我们如果存数据库的话,肯定不是长久之计,而真正符合我们要求的便是图片上传之后返回图片路径,再插入图片 1.点击 ...
edui 富文本编辑_改造百度UMeditor(UEditor-min)富文本编辑器的图片上传功能
最近项目需要新增一个发布文章的模块,用的是百度的Ueditor富文本编辑器. 公司用的是阿里云的图片服务器,需要直接把文章中图片上传到服务器上,但是这个编辑器的上传图片是直接上传到Tomcat的根目录 ...
Smiditor实现图片上传功能
Simditor 是 Tower 开源的一个基于浏览器所见即所得的文本编辑器. 相比传统的编辑器它的特点是: 功能精简,加载快速输出格式化的标准 HTML 每一个功能都有非常优秀的使用体验兼容的主 ...
（转）淘淘商城系列——实现图片上传功能
http://blog.csdn.net/yerenyuan_pku/article/details/72808000 上文我们使用FastDFS-Client进行了简单的文件上传操作测试,淘淘商城项 ...
mavon-editor编辑器与图片上传
mavon-editor编辑器与图片上传图片上传是一个常用的功能,今天我们来实现基于Vue的Markdown编辑器--mavon-editor的图片上传功能. 一.安装与引入 1. 首先在命令行安装 ...
springboot+vue+element+七牛云+实现图片上传功能
注册七牛云链接地址: https://www.qiniu.com/products/kodo,免费有10G空间与免费一个月的域名地址注册后,开启对象存储,创建空间选择地区, 上传方式: 1:前端现将 ...
kindeditor编辑器和图片上传独立分开的配置细节
关于kindeditor编辑器上传按钮的异步加载最关键的部署问题,它的上传图片的组件都已经封装得很好了的,只需要监听到页面按钮的点击事件给编辑器对象传递一些对应的初始化参数即可显示图片上传的弹窗实现异 ...

ckeidtor编辑器添加图片上传功能

ckeidtor编辑器添加图片上传功能相关推荐

最新文章

热门文章