如何使用 addCompleter 或 setCompleter 等函数从 index.js 在基于 React 的 ace 编辑器中添加自定义完成器
import { render } from "react-dom";
import AceEditor from "../src/ace";
import "brace/mode/jsx";
import 'brace/mode/HCPCustomCalcs'
import 'brace/theme/monokai'
import "brace/snippets/HCPCustomCalcs";
import "brace/ext/language_tools";
const defaultValue = `function onLoad(editor) {
console.log("i've loaded");
}`;
class App extends Component {
constructor(props, context) {
super(props, context);
this.onChange = this.onChange.bind(this);
}
onChange(newValue) {
console.log('changes:', newValue);
}
render() {
return (
<div>
<AceEditor
mode="HCPCustomCalcs"
theme="monokai"
width={ '100%' }
height={ '100vh' }
onChange={this.onChange}
name="UNIQUE_ID_OF_DIV"
editorProps={{
$blockScrolling: true
}}
enableBasicAutocompletion={true}
enableLiveAutocompletion={true}
enableSnippets={true}
/>
</div>
);
}
}
render(<App />, document.getElementById("example"));
我想从这里添加我的自定义完成者。我的完成者是这样的
var myCompleter ={
getCompletions: function(editor, session, pos, prefix, callback) {
var completions = [];
["word1", "word2"].forEach(function(w) {
completions.push({
value: w,
meta: "my completion",
});
});
callback(null, completions);
}
})}
在普通的 Ace 编辑器中,它是直截了当的。只需调用
var langTools = ace.require("ace/ext/language_tools")
langTools.addCompleter(myCompleter1);```
最佳答案
您可以执行与普通 Ace 编辑器非常相似的操作。
const langTools = ace.acequire('ace/ext/language_tools');
langTools.addCompleter(myCompleter);
使用
ace.acequire
允许您访问隐藏的 ACE 功能。这里有一些文档:https://github.com/thlorenz/brace/wiki/Advanced:-Accessing-somewhat-hidden-ACE-features
关于ace-editor - 如何从language_tools外部在react ace编辑器中添加自定义完成器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57605252/