abp 集成在线编辑器summernote并增加上传附件功能

前言

abp无疑是目前net程序员中最火最好的免费开源框架之一了。在实际开发应用中，经常要用到的一个功能是所见即所得的在线编辑器，summernote就是一个免费、简洁的开源的编辑器。而abp默认并没有给我们集成进来，比如我开发的新闻模块，就需要集成summernote编辑器，下面我介绍一下集成的过程

基本集成过程

1、从https://aspnetboilerplate.com/Templates下载最新的代码，我用的是asp.net core 多页面版本

image.png
2、下载完成后，打开解决方案，打开Web.Mvc项目根目录下的libman.json，增加一行：

{
      "library": "summernote@0.8.18",
      "destination": "wwwroot/libs/summernote"
    } 

然后右键选择libman.json文件，选择还原客户端

image.png

3、在views/share/layout/_Scripts.cshtml中添加summernote相应的js

@*summernote scripts start*@
<script src="~/libs/summernote/dist/summernote.js"></script>
<script src="~/libs/summernote/dist/lang/summernote-zh-CN.js"></script>
<script src="~/libs/summernote/dist/plugin/files/summernote-file.js"></script>
@*summernote scripts end*@

4、在views/share/layout/_Styles.cshtml中添加summernote相应的css

 <link href="~/libs/summernote/summernote.css" rel="stylesheet" asp-append-version="true" />

这样就在全局中配置好了summernote,在需要使用的地方引入就可以了。
比如界面上：

<textarea id="summernote" name="NewsContent"></textarea>

后台js代码

$('#summernote').summernote();

基本的界面如图：

image.png

默认summernote功能的不足

summernote 默认的功能插入图片是保存图片为base64格式，如果插入的图片很多很大，保存到数据库的话内容一多，数据库压力很大，而且默认没有上传附件文件的功能，在实际开发中，必须扩展这些功能，把图片、音视频文件、word、pdf,压缩文件上传到服务器并存成文件，数据库中中保留文件的名称和路径，这样数据库调用起来速度也快。

我的集成例子和功能展示

我开发了一个新闻模块来具体展示怎样abp集成summernote并扩展summernote功能支持附件上传功能，解决上面提到的summernote默认功能的不足。

GIF 2020-7-5 7-03-49.gif

例子中还包含了新闻模块的全部代码，展示了abp开发的全过程。如果您不想自己摸索，只需要赞助本人一瓶饮料的费用，并在留言中留下您的邮箱，我会很快（取决与是否在电脑旁边）发送源代码到您的邮箱，并感谢您的支持，下面是我的微信收款码：

支付.png