Egg.js中使用富文本编辑器的方法

本文主要是介绍Egg.js中使用富文本编辑器的方法，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

通过wysiwyg-editor实现

wysiwyg-editor的主要参考文档包括下面两个：

Github官方文档：https://github.com/froala/wysiwyg-editor
配置参考文档：https://froala.com/wysiwyg-editor/docs/options

方式一：通过CDN引入

在需要使用富文本编辑器的页面，通过下面的cdn进行引入。

<link href="https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" /><textarea></textarea><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/froala-editor@latest/js/froala_editor.pkgd.min.js"></script><script>new FroalaEditor('textarea');
</script>

给富文本编辑器指定高度

  <script>new FroalaEditor('#content',{height: 200});</script>

给富文本编辑器指定语言。

<link href="/public/wysiwyg/css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript" src="/public/wysiwyg/js/froala_editor.pkgd.min.js"></script>
<script type="text/javascript" src="/public/wysiwyg/js/languages/zh_cn.js"></script><script>new FroalaEditor('#content',{height: 200,language: "zh_cn"});</script>

去掉富文本编辑器的版权。

  <script>new FroalaEditor('#content',{height: 200,language: "zh_cn",attribution: false});</script>

方式二：通过Github将源码下载下来后手动引入。

富文本编辑器实现图片的上传

Egg.js中配置针对一些地址关闭CSRF安全验证

只需在config.default.js中进行下面的配置即可，返回true的地址是不会进行CSRF校验的。

  config.security = {csrf: {ignore: ctx => {if (ctx.request.url === `/${config.adminPath}/product/doUpload`) {return true;} else {return false;}}}}

实现上传到富文本编辑器即上传到COS上

在静态文件上添加imageUploadURL属性

    new FroalaEditor('#content',{height: 200,language: "zh_cn",attribution: false,imageUploadURL: `/<%=adminPath%>/product/doUpload`});

关闭CSRF验证。
控制器中实现如下逻辑，需要注意的是需要给编辑器返回指定类型的json对象。

async doUpload() {const { ctx } = this;const body = ctx.request.body;const file = ctx.request.files[0];if (file) {var source = fs.createReadStream(file.filepath);var filename = this.ctx.service.tools.getCosUploadFile(file.filename);await this.ctx.service.tools.uploadCos(filename,source);}ctx.body = {link: this.config.cosUrl + "/" + filename};}