react-ace编辑自定义代码片段或者提示

安装 npm install react-ace ace-builds

使用

import React from "react";
import { render } from "react-dom";
import AceEditor from "react-ace";

import 'ace-builds/src-noconflict/mode-mysql';
import "ace-builds/src-noconflict/theme-github";
import "ace-builds/src-noconflict/ext-language_tools";
import { addCompleter } from 'ace-builds/src-noconflict/ext-language_tools';
function onChange(newValue) {
  console.log("change", newValue);
}
  componentDidMount() {


    addCompleter({
      getCompletions: (editor, session, pos, prefix, callback) => {
      //数据结构及说明如下
        callback(null, completions);
      },
    });
  }
// Render editor
render(
  <AceEditor
    mode="mysql"
    theme="github"
    onChange={onChange}
    name="UNIQUE_ID_OF_DIV"
    editorProps={{ $blockScrolling: true }}
  />,
  document.getElementById("example")
);

设置代码片段 在每个补全器的 getCompletions 方法中都会调用callback方法：将自己的结果合并到全局的数据中 ，补全字段如下 每个补全列表中的元素包含如下信息：

• caption ：字幕，也就是展示在列表中的内容
• meta ：展示类型
• name ：名称
• value ：值
• score ：分数，越大的排在越上面

示例 cosnt completions =[ { caption: 'hello', snippet: hello ${mqstate}, type: 'snippet', meta: '自定义1' }, { caption: 'test', name: 'test111', value: 'test111', score: 0, meta: '自定义2', type: 'keyword' }, { name: 'yes', value: 'ye11s', score: 0, meta: 'keyword', type: 'keyword', }, ]