【自用】【转载】记录monaco编辑器 + express + webpack实现在线React组件Demo效果

Monaco编辑器加入工程

引用：工作中的Monaco Editor使用经验总结

monaco-editor + monaco-editor-webpack-plugin

实现Editor组件

import React, {useEffect} from "react";
import * as monaco from 'monaco-editor';

export default function () {
    useEffect(() => {
        monaco.editor.create(document.getElementById("editor"), {
            value: [
                'function x() {',
                '\tconsole.log("Hello world!");',
                '}'
            ].join('\n'),
        })
    }, [])
    return (
        <div id="editor" style={{height: 500}} />
    )
};

支持jsx语法不报错

import React, {useEffect, useRef, useState} from "react";
import * as monaco from 'monaco-editor';

export default function (props) {
    const editorRef = useRef();
    const {
        code,
        onChange,
    } = props;
    useEffect(() => {
        editorRef.current = monaco.editor.create(document.getElementById('editor'), {
            value: code,
            language: 'javascript',
        });
        const model = editorRef.current.getModel();
        // jsx支持
        monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
            jsx: monaco.languages.typescript.JsxEmit.React,
            jsxFactory: 'React.createElement',
            reactNamespace: 'React',
            allowNonTsExtensions: true,
            allowJs: true,
            target: monaco.languages.typescript.ScriptTarget.Latest,
        });
        // model set
        monaco.editor.setModelLanguage(model, 'javascript');
    }, []);
    // Update editor with new external value
    useEffect(() => {
        if (editorRef.current && code !== editorRef.current.getValue()) {
            editorRef.current.setValue(code);
        }
    }, [code]);
    useEffect(() => {
        if (!editorRef.current) {
            return;
        }
        editorRef.current.onDidChangeModelContent(() => {
            onChange(editorRef.current.getValue());
        });
    }, [onChange]);

    return (
        <div id="editor" style={{height: 500}} />
    )
};

代码仓库地址