document editor

https://note.youdao.com/ynoteshare/index.html?id=4835579af41c46645f1d03eb81ccc655&type=note&_time=1654692325654https://note.youdao.com/ynoteshare/index.html?id=4835579af41c46645f1d03eb81ccc655&type=note&_time=1654692325654
Agreement Management User agreement , Privacy agreement file -> Become a web page

Ideas ：
1. b The client management platform uploads the web page code to the server  
   * front end Web page editor can input code
   * Back end Provide the interface Save the code entered by the user to the database
2. C End Click the link Open Netease of user agreement
   * The backend provides an interface According to id Get different html Structure returns to the front-end display

Using the rich text editor

Example ： Plug in and code highlighting and color

import React, { PureComponent } from "react";
import { Input, Button } from "antd";
import { UnControlled as CodeMirror } from "react-codemirror2";
import "codemirror/lib/codemirror.css";
//  Style theme 
import "codemirror/theme/material.css";
//  The code in the editor highlights 
import "codemirror/mode/javascript/javascript";

The overall code

import React, { PureComponent } from "react";
import { Input, Button } from "antd";
import { UnControlled as CodeMirror } from "react-codemirror2";
import "codemirror/lib/codemirror.css";
//  Style theme 
import "codemirror/theme/material.css";
//  The code in the editor highlights 
import "codemirror/mode/javascript/javascript";

import { createHtml } from "./service" // Send the code written in the front page to the back-end interface , Save the page to the server's database 
class Demo extends PureComponent {
  code = ''
  title = ''
  importHtml = async () => {
    const result = await createHtml({
      title: this.title,
      code: this.code// Here, the code written in the rich text edit box is passed to the server through parameters 
    }) 
    console.log(result)
  }
  render() {
    return (
      <div>
        <label > Name of agreement </label> 
        <Input onChange={(e) => {
          this.title = e.target.value
        }}></Input>
        {/*  Here is the rich text editor , You can write code in it , Transfer to the server after writing  */}
        <CodeMirror
          value="<h1> welcome  lazy coder</h1>"
          options={
   {
            mode: "javascript",
            theme: "material",
            lineNumbers: true,
          }}
          onChange={(eitor, data, value) => {
           this.code = value
          }}
        />
        <hr />  
        <Button onClick={this.importHtml}> Import template </Button> {/*  Click to call the interface for transferring pages to the server  */}
      </div>
    );
  }

  componentDidMount() {}
}

export default Demo;