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

这是我参与11月更文挑战的第23天，活动详情查看：2021最后一次更文挑战

通过wysiwyg-editor实现

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

Github官方文档：github.com/froala/wysi…
配置参考文档：froala.com/wysiwyg-edi…

方式一：通过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};

  }

总结

通过上文介绍的插件来实现富文本编辑器，可以让我们站在巨人的肩膀上继续前进，本文只是给出了基本的使用方法，更加详细的配置文件和配置信息请查看上文的两个在线地址。