luck-code-editor v1.0.2

组件说明

基于'monaco-editor'的WEB代码编辑器

使用方式

npm i luck-code-editor

import React, { useRef } from 'react';
import ReactDOM from 'react-dom';
import CodeEditor from './CodeEditor';

function App() {
    const codeEditorRef = useRef();

    const handleGetCode = () => {
        const code = codeEditorRef.current.editor.getValue();
        console.log(code);
    };

    const handleSetCode = () => {
        const newCode = `
function y() {
    console.log("Set new code!");
}
`;
        codeEditorRef.current.editor.setValue(newCode);
    };

    return (
        <>
            <div>
                <CodeEditor ref={codeEditorRef}
                    height='50vh'
                    options={{
                        theme: 'vs-dark',
                    }}
                >
                    {`
function x() {
    console.log("Hello world!");
}
`}
                </CodeEditor>
                <button onClick={handleGetCode}>Get Code</button>
                <button onClick={handleSetCode}>Set Code</button>
            </div>
        </>
    );
}

ReactDOM.render(<App />, document.getElementById('root'));