一個(gè)內(nèi)容系統(tǒng)自然離不開(kāi)富文本編輯器的支持，這里選擇了老牌的百度編輯器（UEditor）作為用戶內(nèi)容輸入的控件。個(gè)人多年下來(lái)也習(xí)慣它的風(fēng)格與功能也認(rèn)為UEditor是非常棒的富文本編輯器。雖然目前已經(jīng)很少再更新了，但也不妨礙我們使用。

下載UEditor包后 在public將UEditor放到這個(gè)目錄

?vue里面還需要下章vue-ueditor-wrap組件 https://github.com/HaoChuan9421/vue-ueditor-wrap/tree/2.x 【一個(gè)“包裝”了 UEditor 的 Vue 組件，支持通過(guò) v-model 來(lái)綁定富文本編輯器的內(nèi)容，讓 UEditor 的使用簡(jiǎn)單到像 Input 框一樣?！?/p>

Installation

服務(wù)端將使用 UEditor.Core 對(duì) UEditor 文件上傳支持【https://github.com/fangjun953322/UEditor.Core】

在YiAim.Cms.HttpApi安裝UEditor.Core包依賴 將UEditor項(xiàng)目里面的config.json復(fù)制到YiAim.Cms.Web里面并重命名為uEditorConfig.json同時(shí)將文件設(shè)為可復(fù)制 在YiAim.Cms.HttpApi的CmsHttpApiModule.cs 注入U(xiǎn)Editor的服務(wù)

將blog里面的curd方法補(bǔ)全同時(shí)確保api能正常訪問(wèn)，這里將文章分類設(shè)為可空（本人項(xiàng)目需求）

需要注意的是添加、修改文章的時(shí)候要用事務(wù)，確保文章、標(biāo)簽、文章標(biāo)簽關(guān)聯(lián)的數(shù)據(jù)能一起保存 這里使用abp自動(dòng)生成的crud時(shí)，對(duì)于添加文章來(lái)說(shuō)很明顯是不能滿足我們的業(yè)務(wù)需求的，所有這里選擇了重寫(xiě)，按照滿足業(yè)務(wù)需求的方式進(jìn)行實(shí)現(xiàn)，同時(shí)采用 ABP框架的工作單元(UOW) 實(shí)現(xiàn)事務(wù)控制 【https://docs.abp.io/zh-Hans/abp/6.0/Unit-Of-Work】

Category.cs 改為

進(jìn)行數(shù)據(jù)遷移，重新生成表結(jié)構(gòu)。這是blog表已經(jīng)移除了外鍵關(guān)聯(lián)

IBlogService.cs

BlogService.cs

訪問(wèn)swagger 可以看到blog與UEditor的api都是正常的

回到vue里面，在 src\api\blogs\blog.js里面補(bǔ)全blog接口請(qǐng)求

blog.js

在 src\views\cms\blog文件夾里面，創(chuàng)建index.vue 列表頁(yè)、edit.vue編輯頁(yè)、create.vue創(chuàng)建頁(yè)，不管是創(chuàng)建還是編輯本質(zhì)都是from表單，所有把用戶輸入的表單抽出成為一個(gè)公共組件，新建components文件夾里面，新建ArticleFromDetail.vue

index.vue

create.vue

edit.vue

• ArticleFromDetail.vue 文件里面為了防止代碼過(guò)多、方便管理，我們將js、css 都單獨(dú)抽離出來(lái)

articleEdit.js 放在 src\assets\js里面

articleEdit.css 放在 src\styles里面

由于前端代碼太多，這里只貼幾個(gè)關(guān)鍵的代碼

來(lái)看一下目前實(shí)現(xiàn)的效果

到此，本章就基本完成文章管理&富文本百度編輯器（UEditor）的使用，文章的修改、刪除之類的功能就不再貼出源碼，有需要的可以拉取源碼看一看。內(nèi)容管理系統(tǒng)里面還差一個(gè)上傳文件（圖片）的功能。下章就完成圖片上傳、裁剪的相關(guān)功能。