react-ace编辑器-格式化JSON数据

原创已于 2022-05-17 15:34:03 修改 · 3.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #json #javascript

于 2022-05-17 14:37:58 首次发布

javaScript 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何在React应用中使用ace编辑器来格式化和验证JSON数据，包括安装、配置、基本使用及编辑器属性的设置。

部署运行你感兴趣的模型镜像

1、安装命令

// 安装 react-ace
yarn add react-ace  或者  npm install react-ace
// 安装 js-yaml
npm install js-yaml

2、导入ace 组件的相关配置信息

// 1、引入 react-ace
import AceEditor from “react-ace”;
// 2、ace mode 模式 json 格式
import “ace-builds/src-noconflict/mode-json”;
// 3、ace theme 主题 monokai
import “ace-builds/src-noconflict/theme-monokai”;
// 4、ace 语法：代码联想
import “ace-builds/src-noconflict/ext-language_tools”;
// 5、检测是否是json数据
const jsonlint = require(‘jsonlint-mod’)

// 6、其他引入项
import 'ace-builds/src-noconflict/mode-jsx';// jsx模式的包
import 'ace-builds/src-noconflict/mode-golang'; // 
// js编辑器插件中实现sql格式化 sql-formatter
import { format } from 'sql-formatter';
import 'ace-builds/src-noconflict/mode-sql'; // sql模式的包
import 'ace-builds/src-noconflict/mode-mysql';// mysql模式的包
import 'ace-builds/src-noconflict/theme-xcode';// xcode,(亮白)的主题样式
import "ace-builds/src-noconflict/theme-twilight";// twilight,(暗黑)的主题样式
//以下import的是风格，还有好多种，可以根据自己需求导入
// github、tomorrow、kuioir、twilight、xcode、textmeta、terminal、solarized-light、solarized-dark
import 'ace-builds/src-noconflict/ext-language_tools'; //（编译代码的文件）


// 转成YAML形式展示-需再引入以下几项。
import yaml from 'js-yaml';
// language_tools语言工具，（这个好像是检测语法，有点忘了，想不起来从哪里找到的）
import 'brace/ext/language_tools';
// searchbox过滤框，快捷键ctrl+F
import 'brace/ext/searchbox';
import 'brace/mode/yaml';
import 'brace/theme/monokai';

3，组件使用

<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={{
    enableBasicAutocompletion: true,
    enableLiveAutocompletion: true,
    enableSnippets: true,
    showLineNumbers: true,
    tabSize: 2,
  }}
/>

4、检测输入数据是否符合json数据格式规范

function debounce(fn, delay) {
  let timer = null;
  return function () {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...arguments), delay);
  };
}
const onChange = debounce(jsonlintStr, 2000);
// let onChange = value => {let yamlTempValue = value;};
const jsonlintStr = (val) => {
      if(val.length===0) return false
      try {
        let result = jsonlint.parse(val);
        if(result){
          // 验正成功  doing。。。
        }
      } catch(e) {
        message.warning(e.message);
      }
  }

5、基本使用汇总

import React from 'react'
import { message } from  "antd"
import AceEditor from "react-ace";
import "ace-builds/src-noconflict/mode-json";
import "ace-builds/src-noconflict/theme-monokai";
import "ace-builds/src-noconflict/ext-language_tools";

const jsonlint = require('jsonlint-mod')
function debounce(fn, delay) {
  let timer = null;
  return function () {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...arguments), delay);
  };
}
const Index = (props) => {
  const placeholder =  (props.value && JSON.parse(props.value))
  const { height = 300 } = props
  const jsonlintStr = (val) => {
      if(val.length===0) return false
      try {
        let result = jsonlint.parse(val);
        if(result){
          props.onChange && props.onChange(val)
        }
      } catch(e) {
        message.warning(e.message);
      }
  }
  const onChange = debounce(jsonlintStr, 2000);
  return (
    <AceEditor
      mode="json"
      theme="monokai" // 设置主题 xcode cobalt monokai，twilight,(暗黑)，xcode,(亮白)
      value={placeholder && JSON.stringify(placeholder,null,'\t') }
      // value={(content && yaml.dump(content)) || ''} // 取到YAML的字符串，换成YAML格式展示
      placeholder={"{\n   }"}
      onChange={onChange}
      // onChange={value => { console.log(value);}} // 输出代码编辑器内值改变后的值
      name="UNIQUE_ID_OF_DIV" // 唯一名
      highlightActiveLine={false}
      displayIndentGuides={false}
      editorProps={{ $blockScrolling: false }}
      style={{width: '100%', height: height }}
      setOptions={{
        enableBasicAutocompletion: true, //启用基本自动完成功能 不推荐使用
        enableLiveAutocompletion: true,//启用实时自动完成功能 （比如：智能代码提示）
        enableSnippets: true,//启用代码段
        showLineNumbers: true,
        tabSize: 2,
        wrap: true, // 换行
        autoScrollEditorIntoView: true, // 自动滚动编辑器视图
      }}
      annotations={[{ row: 0, column: 2, type: 'error', text: 'Some error.'}]} // 错误，警告
       onBlur:(event,e)=>{
        const value2 = e.getValue(); // 获取代码内容
        try {
            let json0 = jsonlint().parse(value2);//jsonlint自己找代码来判断当前错误行数是多少，
            let json1 = JSON.stringify(json0)
        }catch (e) {

        }
        if(e.getSession().getAnnotations().length !== 0){ // 判断代码格式是否有误
            message.error("必须输入 json 格式字符串！");
            return;
        }
      },
    />
  )
}

export default Index

6、编辑器属性

Prop	Default	Type	Description
name	‘ace-editor’	String	用于编辑器的唯一ID
mode	‘’	String	解析和代码突出显示的语言
splits	2	Number	视图拆分
orientation	‘beside’	String	拆分的方向在旁边还是在下面
theme	‘’	String	使用的主题
value	‘’	Array of Strings	设置值
defaultValue	‘’	Array of Strings	每个编辑器的默认值
height	‘500px’ ·	String	高度的CSS值
width	‘500px’	String	宽度的CSS值
className		String	自定义类名
fontSize	12	Number	字体大小的像素值
showGutter	true	Boolean	显示槽
showPrintMargin	true	Boolean	显示打印边距
highlightActiveLine	true	Boolean	突出显示活动行
focus	false	Boolean	是否聚焦
cursorStart	1	Number	光标的位置
wrapEnabled	false	Boolean	包装线
readOnly	false	Boolean	使编辑器为只读
minLines	Number	显示的最小行数
maxLines	Number	显示的最大行数
enableBasicAutocompletion	false	Boolean	启用基本自动补全
enableLiveAutocompletion	false	Boolean	启用实时自动补全
enableSnippets	false	Boolean	启用摘要
tabSize	4	Number	tab空格值
debounceChangePeriod	null	Number	onChange事件的抖动延迟时间
onLoad		Function	在编辑器加载时调用。第一个参数是编辑器的实例
onBeforeLoad		Function	在编辑器加载之前调用。第一个参数是的实例ace
onChange		Function	发生在文档更改上，它具有2个参数，每个编辑器的值和事件
onCopy		Function	由编辑器copy事件触发，并将文本作为参数传递
onPaste		Function	由编辑器paste事件触发，并将文本作为参数传递
onSelectionChange		Function	由编辑器selectionChange事件触发，并且将Selection作为第一个参数传递，并将事件作为第二个参数传递
onCursorChange		Function	由编辑器changeCursor事件触发，并且将Selection作为第一个参数传递，并将事件作为第二个参数传递
onFocus		Function	由编辑器focus事件触发
onBlur		Function	由编辑器blur事件触发
onInput		Function	由编辑器input事件触发
onScroll		Function	由编辑器scroll事件触发
editorProps		Object	可直接应用于Ace编辑器实例的属性
setOptions		Object	直接应用于Ace编辑器实例的选项
keyboardHandler		String	对应于要设置的绑定模式（例如vim或emacs）
commands		Array	新命令添加到编辑器
annotations		Array of Arrays	要在编辑器中[{ row: 0, column: 2, type: ‘error’, text: ‘Some error.’}]显示的注释，即在装订线中显示
markers		Array of Arrays	要在编辑器中显示的标记，即[{ startRow: 0, startCol: 2, endRow: 1, endCol: 20, className: ‘error-marker’, type: ‘background’ }]
style		Object	驼峰属性