react-ace 组件库
一,安装命令
yarn add react-ace 或者 npm install react-ace
二,在使用ace 的组件中导入相关配置信息
引入 react-ace
import AceEditor from “react-ace”;
ace mode 模式 json 格式
import “ace-builds/src-noconflict/mode-json”;
ace theme 主题 monokai
import “ace-builds/src-noconflict/theme-monokai”;
ace 语法
import “ace-builds/src-noconflict/ext-language_tools”;
检测是否是json数据
const jsonlint = require(‘jsonlint-mod’)
三,组建使用
<AceEditor
mode="json"
theme="monokai"
value={ json字符串 }
placeholder={“默认json数据”}
onChange={ onChange }
name="UNIQUE_ID_OF_DIV"
highlightActiveLine={false}
displayIndentGuides={false}
editorProps={
{ $blockScrolling: false }}
style={
{width: '100%', height: height }}
setOptions={<