abp 集成在線編輯器summernote并增加上傳附件功能

前言

abp無疑是目前net程序員中最火最好的免費開源框架之一了聪黎。在實際開發(fā)應用中氢哮，經(jīng)常要用到的一個功能是所見即所得的在線編輯器句占，summernote就是一個免費淫僻、簡潔的開源的編輯器。而abp默認并沒有給我們集成進來阔拳，比如我開發(fā)的新聞模塊崭孤，就需要集成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格式毡惜，如果插入的圖片很多很大拓轻，保存到數(shù)據(jù)庫的話內(nèi)容一多，數(shù)據(jù)庫壓力很大经伙，而且默認沒有上傳附件文件的功能扶叉，在實際開發(fā)中，必須擴展這些功能帕膜，把圖片枣氧、音視頻文件、word垮刹、pdf,壓縮文件上傳到服務器并存成文件达吞，數(shù)據(jù)庫中中保留文件的名稱和路徑，這樣數(shù)據(jù)庫調(diào)用起來速度也快荒典。

我的集成例子和功能展示

我開發(fā)了一個新聞模塊來具體展示怎樣abp集成summernote并擴展summernote功能支持附件上傳功能酪劫，解決上面提到的summernote默認功能的不足。

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

例子中還包含了新聞模塊的全部代碼寺董，展示了abp開發(fā)的全過程覆糟。如果您不想自己摸索，只需要贊助本人一瓶飲料的費用遮咖，并在留言中留下您的郵箱滩字，我會很快（取決與是否在電腦旁邊）發(fā)送源代碼到您的郵箱，并感謝您的支持御吞，下面是我的微信收款碼：

支付.png

最后編輯于：2020.07.05 07:09:38

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者