开发工具与关键技术:VS C#
撰写时间:2019年5月27日
富文本编辑器是跟Word文档差不多的,可以在里面编写文章还可以调节它的样式。ckeditor富文本编辑器是一个插件,要使用它就要引入它的插件。但直接引入它的插件是不会在页面上起效果的,Ckeditor插件跟其他的插件有些区别,Ckeditor插件要初始化才可以在页面上显示出来。
首先,引入Ckeditor4.11最新版本的插件。
其次,初始化富文本编辑器。
代码如下:
然后,简单介绍一下Ckeditor是怎么保存图片的。用户在页面上编写文章的时候,富文本编辑器会以HTML的代码识别文章,保存到一个txt文本里。富文本编辑器会自动把页面的内容转换成代码再保存,对图片也是一样的。识别页面上的图片再以代码的格式保存到一个图片文件夹里,返回图片的时候要用三个参数来返回。一个是上传的图片,一个是状态,一个是提示。但Ckeditor插件自己本身是不包含这几个参数的,所以要封装一个实体类来接收。富文本编辑器的图片那个按钮是在Ckeditor插件里的,所以要在配置上传图片的插件里写上传图片的路径,触发图片的按钮。
代码如下:
1、 上传图片的时候要读取文件夹的图片,把图片临时保存到Image的文件夹里。用封装的实体来接收图片:
Ckeditor4UploadResult ckeditor4UploadResult = new Ckeditor4UploadResult();
2、判断传输过来的文件是否为空:
if (upload != null)
3、获取文件的后缀名:
string fileExtension = Path.GetExtension(upload.FileName);
判断后缀名是否为空:
if (fileExtension != null)
判断后缀名是否为图片的类型,区分大小写,再保存图片;然后判断的后缀名为空就提醒用户只能上传图片。
代码如下:
4、重命名文件的名称。
string fileName =
DateTime.Now.ToString("yyyy-MM-dd") + "-" + Guid.NewGuid() + fileExtension;
5、检查保存文件的目录是否存在,不存在就创建。
存在就保存文件的路径。
string filePath = Server.MapPath("~/Document/Temp/") + fileName;
6、前面用了一个try{ } catch (Exception){ throw; } 来捕捉错误。否则,上传失败。