1+ <template >
2+ <div >
3+ <editor
4+ v-model =" code"
5+ @init =" editorInit"
6+ :options =" options"
7+ :lang =" language"
8+ theme =" monokai"
9+ :height =" height"
10+ ref =" aceEditor"
11+ />
12+ </div >
13+ </template >
14+
15+ <script >
16+ import ace from " brace"
17+ export default {
18+ name: " AceEditor"
19+ components: {
20+ editor: require (" vue2-ace-editor"
21+ },
22+ props: {
23+ // 外部传入的内容，用于实现双向绑定
24+ value: {
25+ type: String ,
26+ default: " "
27+ },
28+ // 是否只读
29+ readOnly: {
30+ type: [Boolean , String ],
31+ default: false ,
32+ },
33+ // 外部传入的语法类型
34+ language: {
35+ type: String ,
36+ default: " python"
37+ },
38+ height: {
39+ type: [Number , String ],
40+ default: 800 ,
41+ },
42+ },
43+ data () {
44+ return {
45+ options: {
46+ readOnly: this .readOnly ,
47+ enableBasicAutocompletion: true ,
48+ enableSnippets: true ,
49+ enableLiveAutocompletion: true ,
50+ // enableBasicAutocompletion: [{
51+ // getCompletions: (editor, session, pos, prefix, callback) => {
52+ // // note, won't fire if caret is at a word that does not have these letters
53+ // callback(null, [
54+ // {name: 'hello', value: 'hello', score: 1, meta: 'some comment'},
55+ // {name: 'world', value: 'world', score: 1, meta: 'some other comment'},
56+ // ]);
57+ // },
58+ // }],
59+ },
60+ code: " "
61+ editor: null ,
62+ };
63+ },
64+ mounted () {
65+ this .setCodeContent (this .value || this .code );
66+ console .log (this .editor .completers );
67+ // 加入自定义语法提示
68+ },
69+ methods: {
70+ editorInit (editor ) {
71+ require (" brace/ext/language_tools"
72+ require (" brace/mode/python"
73+ require (" brace/theme/tomorrow_night_blue"
74+ require (" brace/theme/monokai"
75+ require (" brace/snippets/python"
76+
77+ // editor.on('change', this.change);
78+ // editor.commands.addCommand({
79+ // name: "save",
80+ // bindKey: { win: "Ctrl-S", mac: "Command-S" },
81+ // exec: (editor) => this.$emit("save-change", this.value, editor),
82+ // });
83+ // editor.commands.addCommand({
84+ // name: "formatter",
85+ // bindKey: { win: "Ctrl-Shift-F", mac: "Command-Shift-F" },
86+ // exec: () => this.$emit("formatter", this.editor),
87+ // });
88+ let that = this ;
89+ let langTools = ace .acequire (" ace/ext/language_tools"
90+ var customCompleter = {
91+ getCompletions : function (editor , session , pos , prefix , callback ) {
92+ that .setCompletions (editor, session, pos, prefix, callback);
93+ },
94+ };
95+ langTools .addCompleter (customCompleter);
96+
97+ this .editor = editor;
98+ },
99+ setCompletions (editor , session , pos , prefix , callback ) {
100+ // ace自定义提示文字列表
101+ let data = [
102+ { caption: " test" : " 解释：测试关键词" : " testKeyWord"
103+ ];
104+ if (prefix .length == 0 ) {
105+ return callback (null , []);
106+ } else {
107+ return callback (null , data);
108+ }
109+ },
110+ getCodeContent () {
111+ return this .code ;
112+ },
113+ setCodeContent (val ) {
114+ this .code = val;
115+ },
116+ },
117+ };
118+ script >
119+
120+ <style >
121+ style >
0 commit comments