C#富文本编辑器处理文章

开发工具与关键技术:VS   MVC、SQL
撰写时间:2019/5/7

对于一些系统新增的信息,保存下来的信息为HTML内容格式,可以通过富文本编辑器实现。在页面要用到富文本编辑器,要在项目里引入富文本编辑器的插件ckeditor,使用的时候需要渲染,渲染使用到富文本编辑器自身的方法。插件所包含的内容如下截图:

渲染富文本编辑器插件:其渲染富文本编辑器是,通过声明变量editorNotice,引用其插件的方法调用插件;页面上布局了一个大文本框,富文本编辑器的内容替换了大文本框,即富文本编辑器显示在大文本框的位置。

富文本编辑相对于文档格式,一样可以设置文字的格式,大小,颜色等文档原生的内容,在富文本编辑器都具有。编辑器还可以把文章的内容通过源代码显示,即根据文章的内容生成HTML代码。富文本编辑器在页面的显示效果:

在富文本编辑器上传图片时,需要定义方法,方法需要传入参数,HttpPostedFileBase充当类的基类,这些类提供对客户端已上载的单独文件的方法,以HttpPostedFileBase upload作为参数传入方法;
封装接收文件的实体,通过封装实体类记录文件上传的状态,以及文件的URl,错误的信息等,在上传方法中需要使用上传的状态的时候,直接实例化这个封装的实体类即可。如下截图是封装接收文件的实体代码:

判断传入的参数是否为空;不为空获取文件的后缀名,给传入的文件重命名;判断要存放的文件的文件夹是否建在项目的文件夹里,如果没有这个文件夹的存在,就通过代码新增文件夹。设置文件保存的路径,限定文件的格式,只能上传图片文件,其他文件限制。
富文本编辑器上传图片文件的代码,如下截图:

富文本编辑器比较特殊,因为上传图片是在富文本编辑器内容中触发上传文件的界面;其文件上传的路径是写在插件的config.js里的文件路径:

在富文本编辑器中上传的文件可以设置其格式的大小,同时也可以设置其样式,比如边框;在富文本编辑中,不仅仅可以上传图片,也可以在里面编辑文章,在文章里可以适当插入图片;比如在文档已写好的文章,也可以直接粘贴复制到编辑器上,编辑器显示复制的内容时是保存原来的格式,图片也可以复制进去;其复制进去的图片,与上传的图片路径是有所差别的。在编辑器上编辑好的文章内容,也可以转换为HTML的内容显示;如果保存编辑器的全部内容时,通过保存文件的路径到数据库中;其保存的格式是txt文本格式的文件,文本的内容是以HTML的格式显示。如下截图是保存在编辑器编辑的内容:

在富文本编辑器中上传的文件,可以通过富文本编辑器自身的编辑作用可以更改上传到页面图片的大小等,其上传的效果如下截图所示:

总结:1、在项目中要用到各种各样的插件是,都需要在项目的文件夹中引入插件的文件;2、使用插件,需要在对应的页面引用插件的js、css等文件;3、插件的内容,有些并不是引用其css、js文件就可以直接使用,有些插件是需要通过其插件自身的方法渲染,才能显示插件的内容;4、在项目中很多文件,如果直接把这些文件保存到数据库的话,会增加数据库的自身压力,加大数据库的内存,减慢数据库响应的速度;从而降低项目的运行速度;我们可以通过把文件保存在项目的文件夹中,这样可以尽量避免数据库响应速度降低的情况。

更多推荐

C#富文本编辑器处理文章