react-monaco-editor如何实现网页代码编辑器？

前言

最近有时间改造了一下自己博客的代码编辑器，之前的编辑器没有代码提示，不能格式化，还没有检错功能，用着很不方便，无意间发现一个微软出的一个monaco eidtor代码编辑器，它可以像vscode一样，用着很方便，于是乎，好东西一定要收录到自己的博客中，废话不多说，直接上效果和代码。

效果展示

先来看看效果 这网页编辑器简直太完美了

react-monaco-editor介绍及使用

我这个项目用的是react技术栈，所以我就用react相关的技术了，如果用其它的技术栈也可以直接去查看monaco-editor官网 使用之前可以先在线体验

第一步安装依赖

下载依赖

1、npm i react-monaco-editor 或者 yarn add react-monaco-editor 我使用版本是0.58.0 2、npm i monaco-editor 或者 yarn add monaco-editor 我使用的版本是0.52.2

汉化插件安装

npm i monaco-editor-chinese-plugin 或者 yarn add monaco-editor-chinese-plugin 我使用的版本是0.0.4

语法高亮、代码提示、检查错误 功能插件安装

npm i monaco-editor-webpack-plugin 或者 yarn add monaco-editor-webpack-plugin 我使用的版本是7.1.0

第二步配置webpack

先找到并打开webpack.config.js文件 然后引入相关插件

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
const MonacoChinesePlugin = require('monaco-editor-chinese-plugin');

然后在plugins配置项中加入插件

new MonacoWebpackPlugin(),
new MonacoChinesePlugin(),

最后相关代码使用

import { useState, useEffect } from 'react'
import MonacoEditor from 'react-monaco-editor';
import propTypes from "prop-types";

const Editor = (props) => {
    //值
    const [value, setValue] = useState(props.value);
    //渲染获取到的代码
    useEffect(() => {
        if (props.value) {
            setValue(props.value)
        }
    }, [props.value])
    //改变代码时触发
    const handleChange = (val) => {
        setValue(val)
        props.onChange(val)
    }

    const editorDidMount = (editor) => {
        // eslint-disable-next-line no-console
        console.log("editorDidMount", editor, editor.getValue(), editor.getModel());
    };

    return (
        <>
            <MonacoEditor
                width={props.width}
                height={props.height}
                language={props.language}
                theme={props.theme}
                defaultValue={props.defaultValue}
                value={value}
                onChange={handleChange}
                options={props.options}
                editorDidMount={editorDidMount}
            >
            </MonacoEditor>
        </>

    )
}

Editor.propTypes = {
    width: propTypes.string,
    height: propTypes.string,
    language: propTypes.string,
    theme: propTypes.string,
    defaultValue: propTypes.string,
    value: propTypes.string,
    onChange: propTypes.func,
    options: propTypes.object
}

Editor.defaultProps = {
    width: '100%',
    height: '100%',
    language: 'html',
    theme: 'vs-dark',
    defaultValue: '{}',
    value: '{}',
    onChange: () => { },
    options: {
        readOnly: false, // 是否只读
        selectOnLineNumbers: true,
        matchBrackets: 'near'
    }
}

export default Editor;

我这里用到了prop-types，如有需要，可自行下载。

相关配置项说明

最后把完整的相关配置项说明网址放在这里，有需要的朋友，拿走不谢~~