怎样在富文本编辑器插入图片


开发工具与关键技术：Visual Studio 作者：胡宁淇撰写时间：2019年4月13日

富文本编辑器的功能很强大，它可以在HTML页面上实现类似Word文档的效果，可以在页面中实现对文字和图片的编辑。

下面我们就来实现在富文本编辑器中插入图片。

一开始直接点击上图框中的图表会弹出模态框的，但是如果你要想上传图片就要对图片进行处理

下面就是我们写好的方法，对图片进行一系列的处理。

因为在页面传输过来的是一张图片，所以我们给的参数是接收文件的HttpPostedFileBase类型

public ActionResult UpEditorFile(HttpPostedFileBase upload) {

        实例化封装接收文件的实体Ckeditor4UploadResult ckeditor4UploadResult = new Ckeditor4UploadResult();try{if (upload!=null){获取页面传过来数据的后缀名，也就是文件类型string fileExtension = Path.GetExtension(upload.FileName);处理一下文件名，拼接当前时间和全球唯一标志符，确保文件名不会重复string fileName = DateTime.Now.ToString("yyyy-MM-dd") + "-" + Guid.NewGuid() + fileExtension;检查临时文件夹是否存在,不存在就创建if (!Directory.Exists(Server.MapPath("~/Document/Temp/"))){Directory.CreateDirectory(Server.MapPath("~/Document/Temp/"));}保存文件的路径为文件夹路径加处理过的文件名称string filePath = Server.MapPath("~/Document/Temp/") + fileName;

判断从页面传过来的文件是否为空

                if (fileExtension!=null){把文件后缀全都转换为小写fileExtension =

fileExtension.ToLower();

                    用后缀名判断从页面传过来的是不是一张图片if ("(.gif)|(.jpg)|(.bmp)|(.jpeg)|(.png)".Contains(fileExtension)){保存文件

upload.SaveAs(filePath);

                        var url = "/Document/Temp/" + fileName;用封装好的实体类里面的字段进行赋值(注：实体类里面的字段必须跟富文本编辑器的属性保持一致)

ckeditor4UploadResult.uploaded = 1;//上传成功

ckeditor4UploadResult.fileName = fileName;

ckeditor4UploadResult.url = url;

                    }else {

ckeditor4UploadResult.error.message = “只能上传图片”;

                    }}}}catch (Exception e){Console.WriteLine(e);ckeditor4UploadResult.error.message="上传失败";}return Json(ckeditor4UploadResult,JsonRequestBehavior.AllowGet);}

封装的实体的内容

public class Ckeditor4UploadResult

{//表示是上传成功 1成功 0失败public int uploaded { get; set; }//上传文件的名称public string fileName { get; set; }//上传文件的URL（URL编码）public string url { get; set; }//错误public Ckeditor4UploadResultErro error = new Ckeditor4UploadResultErro();}public class Ckeditor4UploadResultErro{//错误信息public string message { get; set; }

}

和其他方法不一样的是，这次我们写的方法并不是在页面上进行调用，而是将方法写在了富文本编辑器文件夹插件的config.js里面

下图我们可以我们可以很清楚地看到图片临时存储的位置以及经过处理后的文件名称

最后就把图片成功插入到富文本编辑器中啦

怎样在富文本编辑器插入图片相关推荐

Ueditor富文本编辑器修改图片上传路径
Ueditor富文本编辑器修改图片上传路径版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/QZPHP_L 由于网站后台使用Zend framewor ...
百度富文本编辑器UEditor 图片宽度100%自适应，手机端
有些时候富文本编辑器的图片在手机端显示超出,没有自动100% 修改ueditor.all.js的23774行(左右,不一定)和24533(左右,不一定),不行就搜索增加内容 loader.setAt ...
vue3中使用vue-quill富文本编辑器重写图片上传功能
最近开发的一个vue3+element-plus的项目,需要用到富文本编辑器,最终选择了VueQuill这一款轻便型的富文本编辑器. 说说遇到的问题:富文本编辑器的图片上传,默认是直接以base64图 ...
富文本在服务器上图片不显示,解决CKEditor 4 富文本编辑器在图片组件无法显示[上传]选项卡的相关问题...
关于解决CKEditor 4 富文本编辑器在图片组件无法显示[上传]选项卡的相关问题. 本文可能会对以下现象得以解决: 图片上传组件,没有 [上传] 选项卡. 资源无法加载 [imgupload] ( ...
关于移动手机端富文本编辑器qeditor图片上传改造
日前项目需要在移动端增加富文本编辑,上网找了下,大多数都是针对pc版的,不太兼容手机,当然由于手机屏幕小等原因也限制富文本编辑器的众多强大功能,所以要找的编辑器功能必须是精简的. 找了好久,发现qed ...
vue-quill富文本编辑器插入img标签时自定义属性
最近被quill.js这个富文本编辑器折磨了好几天,最终也算是完成需求.现描述一下这次遇到的需求时什么: 产品说需要在富文本编辑器加入一个图文混排的功能(图片需要支持缩放.并且图片与文字需要居中对齐) ...
vue-quill-editor富文本编辑器及图片上传到服务器
最近在做后台管理平台,该项目是使用vue+element-ui框架,有一个界面就是关于消息推送的,在网上找了一圈,比较适合的就是vue-quill-editor富文本编辑器 1.需求完成图: 此项目就 ...
edui 富文本编辑_改造百度UMeditor(UEditor-min)富文本编辑器的图片上传功能
最近项目需要新增一个发布文章的模块,用的是百度的Ueditor富文本编辑器. 公司用的是阿里云的图片服务器,需要直接把文章中图片上传到服务器上,但是这个编辑器的上传图片是直接上传到Tomcat的根目录 ...
Java处理富文本编辑器的图片转为base64编码
一.需求(场景) 后台(内网)通过富文本编辑器编辑的图文信息,需要在移动端(外网)展示,需要将内容中的图片的src的路径替换成base64编码的传递到前台. 二.思路 1.获取内容中的<img& ...
Ueditor 富文本编辑器插入 m3u8 和 mp4 视频（PHP）
当前环境:PHP.Ueditor的版本是1.4.3 新的需求是,需要在Ueditor 富文本编辑器中,插入视频播放,并且视频格式有MP4,也有M3U8. 百度编辑器默认的是embed,需要修改下配置. ...

怎样在富文本编辑器插入图片

怎样在富文本编辑器插入图片相关推荐

最新文章

热门文章