版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
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可以去官方文档查找,文档地址如下: