Koa中使用富文本编辑器Koa-ueditor
UEditor 是由百度 web 前端研发部开发所见即所得富文本编辑器，具有轻量，可定制，注重用户体验等特点，开源基于 MIT 协议，允许自由使用和修改代码，下面给大家介绍一下基于Koa的UEditor富文本编辑器Koa2-ueditor的使用。
1.安装 Koa2-ueditor。
npm install koa2-ueditor --save 2.在后端路由中引入安装的Koa2-ueditor并配置。
// 引入Koa2-ueditor
const ueditor = require('koa2-ueditor');
// 配置编辑器上传图片接口
router.all('/editorUpload',
ueditor(['public', {
// 上传图片的格式
"imageAllowFiles": [".png", ".jpg", ".jpeg"],
// 最后保存的文件路径
"imagePathFormat": "/upload/ueditor/image/{yyyy}{mm}{dd}/{filename}"
}]
));3.下载Koa2-ueditor对应的前端文件，地址如下：
https://github.com/sealice/koa2-ueditor
下载完成以后把官方例子中example里public里的ueditor 文件夹复制到项目的前端文件里面，并找到ueditor.config.js文件，将里面的服务器统一请求接口路径改成与第2步中配置的路由地址一致，其它功能可以根据项目需要自行配置。
4.在模板文件或前端页面中引入第3步中下载的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标签，如下代码所示。
<!-- name为content定义提交的字段名 -->
<label class="col-sm-1 control-label no-padding-right">文章详情</label>
<div class="col-sm-10">
<script name="content" id="editor" type="text/plain" style="width:600px;height:300px;"></script>
</div>6.实例化编辑器并使用。
var ueditor = UE.getEditor('editor');
// 注意 UEditor 准备好之后才可以使用
ueditor.addListener("ready", function (){
// 设置内容
ueditor.setContent(`{{@list.content}}`);
})上面添加了监听事件，在页面卸载或关闭时，一定要销毁编辑器。
百度编辑器的很多使用API可以去官方文档查找，文档地址如下：
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2019/09/30 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
