This is the 23rd day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

Through wysiWYg-Editor

The main reference documents for wySIWYG-Editor include the following two:

  • Github official documentation: github.com/froala/wysi…
  • Configuration reference documents: froala.com/wysiwyg-edi…

Method 1: Import through CDN

For pages that require a rich text editor, import through the CDN below.

<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>
Copy the code

Specifies the height for the rich text editor

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

Specifies the language for the rich text editor.

<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>
Copy the code

Remove copyright from rich text editors.

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

Method 2: Download the source code from Github and import it manually.

The rich text editor realizes the uploading of pictures

The egg.js configuration turns off CSRF security authentication for some addresses

Simply do the following configuration in config.default.js. Addresses that return true will not be CSRF checked.

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

The implementation is uploaded to a rich text editor to COS

  1. Add the imageUploadURL attribute to the static file
    new FroalaEditor('#content', {height: 200.language: "zh_cn".attribution: false.imageUploadURL: `/<%=adminPath%>/product/doUpload`
    });
Copy the code

  1. Disable CSRF authentication.

  2. The controller implements the following logic, noting that the editor needs to return a JSON object of the specified type.

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};

  }
Copy the code

conclusion

Implementing a rich text editor with the plugins described above will allow us to stand on the shoulders of giants. This article only provides the basic usage, and more detailed configuration files and configuration information can be found at the two online addresses above.