Koa中使用富文本编辑器Koa2-ueditor

本文链接： https://blog.csdn.net/weixin_40629244/article/details/101794702

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可以去官方文档查找，文档地址如下：

http://fex.baidu.com/ueditor/#api-common

Koa中使用富文本编辑器Koa2-ueditor

猜你喜欢