Koa中(模板引擎)使用百度富文本編輯器

koa2 版的 UEditor 百度編輯器，支持修改 UEditor 的配置，支持抓取遠程圖片

首先須要下載用到的靜態文件（裏面包括CSS、JS、圖片等...）

點我------>靜態文件下載

使用步驟：

1.安裝

npm install koa2-ueditor --save
或者
npm i koa2-ueditor

2.引入並配置

在你須要使用富文本編輯器的路由下引入並配置

// 而後修改 web 端的(你下載解壓後的文件夾下的) ueditor.config.js 配置文件
// 修改 serverUrl 爲對應路由地址
// serverUrl: "/editor/controller"
 
const router = require('koa-router')()
const ueditor = require('koa2-ueditor')
 
router.all('/editor/controller', ueditor('public'))
複製代碼

能夠根據本身的功能需求自行改變ueditor.config.js文件裏的toolbars

能夠修改 UEditor 的配置，具體參數參考 config.json

// 須要傳一個數組：靜態目錄和 UEditor 配置對象
// 好比要修改上傳圖片的類型、保存路徑
router.all('/editor/controller', ueditor(['public', {
    "imageAllowFiles": [".png", ".jpg", ".jpeg"]
    "imagePathFormat": "/upload/ueditor/image/{yyyy}{mm}{dd}/{filename}"  // 保存爲原文件名
}]))
複製代碼

3.在模板中引入 ueditor 靜態文件

引入靜態文件下的JS文件

<script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.all.min.js"> </script>
<script type="text/javascript" charset="utf-8" src="/ueditor/lang/zh-cn/zh-cn.js"></script>
複製代碼

在模板中須要使用富文本編輯器的地方添加下面一行代碼：

<script id="editor" type="text/plain"></script>
複製代碼

4.在模板中實例化編輯器

<script>
	UE.getEditor("editor")
</script>
複製代碼

---

^_<