Koa2富文本编辑器ueditor的配置使用- Koa2 ueditor


Koajs入门视频教程在线学习地址https://www.bilibili.com/video/BV1xm4y1c7zr/?p=1

Koajs入门视频教程网盘下载地址https://pan.baidu.com/s/1QN_XkXRXmIw6V7HevntBQQ 提取码:abcd


一、Koa2 ueditor 以及Ueditor介绍


UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码。




官网:http://ueditor.baidu.com/


第三方sdk:http://ueditor.baidu.com/website/thirdproject.html


二、Koa 中使用koa2-ueditor


1.安装Koa2 的koa2-ueditor:




npm install koa2-ueditor --save    /   cnpm install koa2-ueditor --save




2.手动下载koa2-ueditor 


下载地址:https://github.com/htzhanglong/koa2-ueditor
下载完成以后把官方例子中的example->public->ueditor复制到我们的项目里面






3.对应的koa业务逻辑中配置koa2-ueditor 模块 :



const ueditor = require('koa2-ueditor')
router.all('/editor/controller', ueditor(['public', {
"imageAllowFiles": [".png", ".jpg", ".jpeg"]
"imagePathFormat": "/upload/ueditor/image/{yyyy}{mm}{dd}/{filename}"  
}]))



4.在模板中引入ueditor静态文件


<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>



5、用到的文本框替换成下面代码


<script id="editor" type="text/plain" style="width:800px;height:300px;"></script>


6、实例化编辑器


var ue = UE.getEditor('editor');    //注意和第五条的id对应起来




7、编辑器放入内容

var ueditor = UE.getEditor('editor');
ueditor.addListener("ready", function (){  /*注意*/
// editor准备好之后才可以使用
ueditor.setContent(`{{@list.content}}`);
});

三、koa2-ueditor的一些配置


ueditor非常强大,可以自定义很多参数,找到ueditor里面的ueditor.config.js进行配置



配置上传资源接口:serverUrl     *安全
配置导航显示内容:toolbars
配置自动长高:autoHeightEnabled:false