Ckeditor插件

开发工具与关键技术：VS ckeditor
作者：微凉之夏
撰写日期：2019年06月27日

我们在使用这个插件时只需要在你所要的页面中引入ckeditor.js就可以了，然后我们再去另外的一个config.js文件是配置文件在里面就可以配置出你所需要的参数文件，里面有三个默认参数（第一个你可以配置默认的语言（config.language = ‘zh-cn’）;一般我们设置为中文（简洁中文是zh-cn）,其它的就可以留在那里默认就好了）然后你可以去ckeditor/samples/toolbarconfigurator中的index里面复制一些你所要用到的格式到config.js中的中括号里面就行了，这样的话你就可以自定义格式了，如下：

再到页面中初始化（editorArticle = CKEDITOR.replace(‘NoticeMainBody’)；replace替换掉原生textarea）一下它不过呢我们还要在上面写个不变量来接收它（var editorArticle; //富文本编辑器），在这之前我们还要整备一个文本域（）相当于个多行的文本框还有个优势就是可以拖动行数,里面有如上这些参数它还有个参数叫rows你可以给它指定的行数它就会按照你给定的行数来，如果你不给定行数他一般默认是三行，给CKEDITOR初始化之后它就会显示出来了，就可以在里面写内容了不过图片还没有实现其他的基本可以使用了，如下：

我们要实现图片上传的话还要再改下配置第一张图片中的最后一句代码（config.filebrowserImageUploadUrl = ‘/ContentManagement/Article/UpEditorFile’;就是配置图片上传的路径）文件和图片要通过路径才能上传到控制器上的，后面的URL路径是根据你所需要的路径来改只要你找到你自已的控制器就可以了，不过前面的不能改你一改的话就不对了，接着到控制中写UpEditorFile的方法其中它的接收参数是HttpPostedFileBase接收的变量一定要是upload先用个try{} catch (Exception){} 防止在应用程序执行过程中发生的错误再判断upload不能为空获取文件的扩展名称拼接一个新的文件名称检查文件是否存在，如果不存在就创建（server就是我们运行服务器、mappath用来转换路径把相对路径转换成绝对路径、CreateDirectory就是创建路径方法）接下来就是保存文件的路径了（如果fileExtension这个为空的话，那就把它转换成小写fileExtension = fileExtension.ToLower();为什么要转成小写呢,因为有些事大写字母的）再判断下图片类型（if ("(.gif)|(.jpg)|(.bmp)|(.jpeg)|(.png)".Contains(fileExtension))）保存文件（upload.SaveAs(filePath);），如下：


上图还要封装一个实体类Ckeditor4UploadResult先在Ckeditor4UploadResult中写引用如果出错了就写个error它又是一个对象，在它当中写message提示是什么错误（返回一个信息）如下：