react-ace编辑器的使用

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={<