---
title: 代码编辑器
order: 1
---

<!-- prettier-ignore -->
````jsx

import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import ScriptEditor, { LANGUAGES } from '@riil-frontend/component-script-editor';
import { Select, Button } from '@alifd/next';

const ds = LANGUAGES.map((item) => ({ value: item.id, label: item.id }));

const themeDs = ['vs', 'vs-dark', 'hc-black'].map((item) => ({ value: item, label: item }));

const defaultValue = ['function helloWorld() {', '   console.log("Hello world!");', '}'].join('\n');

const newvalue = `public class HelloWorld {

                public static void main(String[] args) {
                    // Prints "Hello, World" to the terminal window.
                    System.out.println("Hello, New World");
                }

}`;

function App() {
	const [lang, setlang] = useState('javascript');
	const [theme, setTheme] = useState(undefined);
	const [readOnly, setReadOnly] = useState(false);
	const [value, setValue] = useState(defaultValue);
	const onChange = (val) => {
		console.log('当前文本为', val);
		setValue(val);
	};
	return (
		<div style={{ height: '70vh', width: '70vw' }}>
			<div style={{ height: 40 }}>
				<Select dataSource={ds} onChange={(value) => setlang(value)} value={lang} />
				<Select dataSource={themeDs} onChange={(value) => setTheme(value)} value={theme} placeholder="切换主题" />
				<Button onClick={() => setReadOnly(!readOnly)}>{`切换只读模式为${!readOnly}`}</Button>
				<Button onClick={() => setValue(newvalue)}>set NewValue</Button>
			</div>
			<div style={{ height: 'calc(100% - 40px)' }}>
				<ScriptEditor language={lang} value={value} readOnly={readOnly} theme={theme} onChange={onChange} />
			</div>
		</div>
	);
}

ReactDOM.render(<App />, mountNode);


````
