The Monaco Editor has been used for many times in the background projects. Here is a brief overview.

The installation

When using the editor, it needs to be used with the corresponding WebPack plug-in, so NPM is installed first.

npm i monaco-editor monaco-editor-webpack-plugin --save

Webpack configuration

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
module.exports={
    ...
  // Add the following plugins to the webpack configuration file
  plugins: [
    new MonacoWebpackPlugin(['csharp'.'java'.'javascript'.'typescript'.'json'])],}Copy the code

Writing a component

Next, we can start writing a component to display the editor content as follows:

import React, { useEffect } from "react";
import * as monaco from "monaco-editor";
export default function Editor({id,height,children}) {
  // id:id name, height: editor height, children: child node
  useEffect(() = >{ createEditor(); } []);const createEditor = () = > {
    monaco.editor.create(document.getElementById(id), {
      readOnly: true.value: children,
      language: "html".lineNumbers: "off".scrollBeyondLastLine: false}); };return (
    <div
      id={id}
      style={{
        height.width: "100% ",border: "1px solid #f0f0f0",
        overflow: "hidden",
        margin: "5px 0,}} "></div>
  );
}
Copy the code

Using the component

And then you can use it everywhere

import React from "react";
import Editor from "./Editor.jsx";
export default function Help(props) {
  return (
    <div style={{ padding: "30px}} ">
      <Editor height="300px" id="xml-top">
        {`
<sitemapindex>
  <sitemap>
    <loc>
      http://www.abc.com/structure/index_1.xml
    </loc>
    <lastmod>The 2013-12-18 12:59:12</lastmod>
  </sitemap>
  <sitemap>
    <loc>
      http://www.abc.com/structure/index_2.xml=
    </loc>
    <lastmod>The 2013-12-18 12:59:13</lastmod>
  </sitemap>
</sitemapindex>`}
      </Editor>
    </div>
  );
}
Copy the code

rendering

The related documents

  • Code base: github.com/microsoft/m…
  • Demo code base: github.com/microsoft/m…