/
index.js
113 lines (107 loc) · 4.12 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
var ace = require('brace');
var init = false;
module.exports = {
template: "<pre :style=\"style\"></pre>",
props: {
value: {
type: String,
required: true
},
style: {
type: Object,
default: function() {
return {
height: '300px',
width: '100%'
}
}
},
config: {
type: Object,
default: function() {
return {
language: 'sql',
theme: 'chrome',
fontsize: 16,
enableBasicAutocompletion: true,
enableSnippets: true,
enableLiveAutocompletion: true,
wrapLimitRange1: null,
wrapLimitRange2: null,
isWrap: true,
isShowPrintMargin: false,
placeholder: 'Insert Code Here!'
}
}
}
},
data() {
return {
editor: null,
editContent: ""
}
},
methods: {
setConfig() {
var _this = this;
_this.editor.$blockScrolling = Infinity;
_this.editor.setFontSize(_this.config.fontsize); //设置编辑器里字体的大小,貌似这个可以在外面加CSS样式,但是我试了不行,所以这样写
_this.editor.session.setMode("ace/mode/" + _this.config.language); //设置代码补全和提示的语法为python,这个需要为不同的语言写不同的模块,不然没有提示功能
_this.editor.setOptions({ //这个到大括号结束是说设置编辑器是否自动补全,是否自动提示等
enableBasicAutocompletion: _this.config.enableBasicAutocompletion,
enableSnippets: _this.config.enableSnippets,
enableLiveAutocompletion: _this.config.enableLiveAutocompletion
});
_this.editor.setTheme("ace/theme/" + _this.config.theme); //设置主题为chrome
//设置编辑器自动换行
_this.editor.getSession().setWrapLimitRange(_this.config.wrapLimitRange1, _this.config.wrapLimitRange2);
_this.editor.getSession().setUseWrapMode(_this.config.isWrap);
//是否显示垂直衬线
_this.editor.renderer.setShowPrintMargin(_this.config.isShowPrintMargin);
//设置编辑器为空时的提示
_this.editor.on("input", function() {
_this.update(_this.config.placeholder)
});
setTimeout(function() {
_this.update(_this.config.placeholder)
}, 100);
},
update(str) {
var _this = this,
shouldShow = !_this.editor.session.getValue().length,
node = _this.editor.renderer.emptyMessageNode;
if (!shouldShow && node) {
_this.editor.renderer.scroller.removeChild(_this.editor.renderer.emptyMessageNode);
_this.editor.renderer.emptyMessageNode = null;
} else if (shouldShow && !node) {
node = _this.editor.renderer.emptyMessageNode = document.createElement("div");
node.textContent = str;
node.className = "ace_invisible ace_emptyMessage";
node.style.padding = "0 9px";
_this.editor.renderer.scroller.appendChild(node);
}
}
},
watch: {
value: function(val) {
if (this.editContent !== val)
this.editor.setValue(val, 1);
}
},
ready() {
var _this = this,
lang = _this.config.lang || 'sql',
theme = _this.config.theme || 'chrome';
if (!init) {
_this.$dispatch('vue-ace-editor:init');
init = true;
}
editor = _this.editor = ace.edit(_this.$el);
_this.setConfig();
editor.setValue(_this.value, 1);
editor.on('change', function() {
_this.value = editor.getValue();
_this.editContent = _this.value;
});
}
}