需求: 一个代码编辑器,能够补全特定内容,且输入过的内容不可以再在补全内容中出现。
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&