Gremlin Editor
基于 Ace 的 React 版本的 Gremlin 编辑器。
用法
import React, { useState } from 'react';
import { GremlinEditor } from '../index';
export default () => {
const [value, setValue] = useState('');
const handleClick = (str: string) => {
setValue(str)
};
return (
<div>
<h1 className="title">Page index</h1>
<GremlinEditor
height={500}
gremlinId="test"
initValue=""
onValueChange={str => handleClick(str)}
/>
<div>{value}</div>
</div>
);
};
配置项
ace-gremlin-editor 提供了以下配置项:
- height:编辑器高度,默认 150px;
- gremlinId:编辑器唯一标识,不能重复;
- initValue:编辑器初始值,可为空;
- showGutter:是否显示左侧的序号,默认为 true。
API
ace-gremlin-editor 提供了以下两个API:
- onValueChange(value: string):编辑器内输入的值发生变化的回调函数;
- onSelectChange(value: string):选择的内容发生变化后的回调函数。