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>
复制代码

---

^_<