React-ace 代码自动补全、修改代码补全内容、获取代码、获取代码格式报错信息、设置代码内容（json) 等问题

淩亂°似流年 2021-06-22 15:38 366阅读 0赞

**需求: 一个代码编辑器，能够补全特定内容，且输入过的内容不可以再在补全内容中出现。**

**1.下载**

** **这个很多其他博客有，略过不谈。

**2.引入**

import AceEditor from 'react-ace';
    import "brace/mode/json";
    import "brace/theme/monokai";
    import 'brace/ext/language_tools';

第一个是必定要引入的，第二个是引入的 编辑器模式，这个可以选的很多，第三个引入的是编辑器主题，第四个引入的是代码补全相关包。我看到网上有说，需要下载其他包才能实现代码补全，但是我直接用 npm/yarn 下载，也可以实现代码补全。

codeEditorAllList.length !== 0 && <AceEditor
        ref="editor" // 实例引用
        mode="json" // 模式
        theme="monokai" // 主题
        onChange={this.onCodeChange}
        onBlur={this.onCodeBlur}
        enableBasicAutocompletion //允许自动补全选项
        enableLiveAutocompletion
        enableSnippets
        name="UNIQUE_ID_OF_DIV" // 唯一明明
        value={codeRequestvalue}
        editorProps={
       { $blockScrolling: true }}
        fontSize={16}
        onLoad={this.complete.bind(this,codeEditorAllList)}
        width="100%"
    />

主要是在 onload 的 complete 函数下补全，我的代码中补全初始数据是 codeEditorAllList ，这个数据是从数据库加载的。不过要注意一下，可能在 codeEditorAllList 还没有加载的时候， AceEditor 就加载了，所以要做一个简单的判断。

3.代码补全

complete = (codeEditorAllList,editor) => {
     
          // const {allLexNameList} = this.state;
          const completers = codeEditorAllList.map(item => ({
            name:item,
            value:item,
            score:100,
            meta:'',
          }));
          console.log(completers)
          this.addCompleters(editor, completers); // 第一个参数是引用实体，第二个是补全数组
          // editor.completers.push(completers);
         
      }
     
      addCompleters= (editor,completers,completersNew)=>{
        if(completersNew){ // 如果是传入了新的补全内容，就要将之前的补全内容置空，然后加入新的内容
           const arr = [];
           editor.completers = arr;
           editor.completers.push({
             getCompletions(editor, session, pos, prefix, callback) {
               callback(null, completers);
             },
           });
           return
        }
        editor.completers.push({ // 第一次加载默认加载所有补全内容
          getCompletions(editor, session, pos, prefix, callback) {
            callback(null, completers);
          },
        });
      }

4.动态修改补全内容

onCodeChange = (e) => {
         
     
         const eidtor1 = this.refs.editor.editor; // 获取编辑器实体
         const {codeEditorAllList} = this.state;
         const arr = [];
         const str = String(e);
         codeEditorAllList.forEach(item=>{ // 剔除已经选择的补全内容
           if(str.indexOf(item) === -1){
             arr.push(item);
           }
         })
         const arr1 = arr.map(item=>({ // 将制定内容修改为特定格式
           name:item,
           value:item,
           score:100,
           meta:'',
         }))
         this.addCompleters(eidtor1, arr1,true); // 传入新的补全内容
        
       }

5.获取代码内容、判断格式是否错误

onCodeBlur = (event,e)=>{
          const value2 = e.getValue(); // 获取代码内容
          console.log(value2);
          if(e.getSession().getAnnotations().length !== 0){ // 判断代码格式是否有误
            message.error("必须输入 json 格式字符串！");
            this.setState({
              apiParamsStatus: false,
              codeRequestvalue:value2,
            })
            return;
          }
          const val3 = (value2 && String(e.getValue()).replace(/[\r\n]/g, "")) || ''; // 去除空行空格，直接获取到的值是有空行的，没办法给后台传成 json 格式
          let val4 = (val3 && val3.replace(/\ +/g, "")) || ''; // 去转义符
          const {codeEditorAllList} = this.state;
          codeEditorAllList.forEach(item => {
            if(val4.indexOf(item) !== -1){
              val4 = val4.replace(`@${item}`,`@${item}@`)
            }
          })
          const val5 = (val4 && JSON.parse(val4)) || ''; // 当然，拿到的内容也可以直接转化为 json 字符串，我这里好像做了一些多余的工作
          const val6 = (val5 && JSON.stringify(val5) ) || '';
          console.log(val6)
          const {apiParams} = this.state;
         if (val6 !== apiParams){
           this.setState({
            apiTest:false,
           })
         }
         e.setValue(value2) // 设置代码编辑器的内容，否则 输入代码后，失去焦点，则编辑器内容置空
        this.setState({
          apiParams: val6,
          apiParamsStatus:true,
          codeRequestvalue: value2,
        })
       }

补充：一般从编辑框获取到内容，要传给后端，可以直接这么做：

const = editor.getValue(); // 获取代码内容
    console.log(JSON.parse(code));// json对象
    
    console.log(JSON.stringify(JSON.parse(code)));//json对象字符串，可以传给后端

6.从后台拿到的 json 数据坐格式转化，使它在代码编辑器中展示时有空行和空格

(str2 && JSON.stringify(JSON.parse(str2), null, '\t'))|| '',

以上。