Vuejs使用ace-editor自动补全

1
2

import ace from 'ace-builds'
ace.config.set('basePath', '/node_modules/ace-builds/src-min-noconflict');

1
2
3
4
5
6

// 写法1
import extTool from 'ace-builds/src-noconflict/ext-language_tools';  
ace.config.setModuleUrl('ace/ext/language_tools', extTool);

// 写法2
import extTool from 'ace-builds/src-noconflict/ext-language_tools';

1
2
3
4
5
6
7
8

import ace  from 'ace-builds'  
import extTool from 'ace-builds/src-noconflict/ext-language_tools';  
import modeC_Cpp from 'ace-builds/src-noconflict/mode-c_cpp';  
import monokai from "ace-builds/src-noconflict/theme-monokai";  
  
ace.config.setModuleUrl('ace/ext/language_tools', extTool);  
ace.config.setModuleUrl("ace/mode/c_cpp", modeC_Cpp);  
ace.config.setModuleUrl("ace/theme/monokai", monokai);

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

<script setup>
...

// 自动补全选项
const aceOptions = ref({  
  enableBasicAutocompletion: true,  
  enableSnippets: true,  
  enableLiveAutocompletion: true,  
})

onMounted(()=> {  
  editor.session.setMode("ace/mode/c_cpp");   // 设置语言
  editor.setTheme('ace/theme/monokai');  // 设置主题 
  editor.setOptions(aceOptions.value);  
  editor.completers = [customCompleter]  // 设置自定义自动补全
})
</script>

<template>
<div id="editor10" style="width: 100%; height: 200px"></div>
</template>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

// 自定义补全
const customCompleter = {  
  getCompletions: function(editor, session, pos, prefix, callback) {  
    const completions = [  
      {caption: "print", value: "print", meta: "keyword"},  
      {caption: "if", value: "if", meta: "keyword"},  
      {caption: "else", value: "else", meta: "keyword"},  
      {caption: "function", value: "function", meta: "keyword"},  
    ];  
    callback(null, completions);  
  }  
};

onMounted(()=> {  
  ...
  editor.completers = [customCompleter]  // 设置自定义自动补全
})

1
2
3
4
5

onMounted(()=> {  
  // editor.completers = [customCompleter]  
  const langTools = ace.require('ace/ext/language_tools');  
  langTools.addCompleter(customCompleter)  
})

1

npm install pinyin-pro

1
2
3
4
5
6
7

const character_arr = ['你好', '世界', '测试']  
const character_pinyin_map_arr = []  
character_arr.forEach(item=> {  
  character_pinyin_map_arr.push(  
      {caption: pinyin(item, {'toneType':'none'}), value: item, meta: item}  
  )  
})

1
2
3
4
5
6

const customCompleter = {  
  getCompletions: function(editor, session, pos, prefix, callback) {  
    const completions = generateCompletions()  
    callback(null, completions);  
  }
};