3xdata-ace 中文文档教程
vue2-ace-editor-support-chinese
A packaging of ace support chinese, and support autocomplete.
基于ace、vue2的支持中文的组件包
支持自动补全功能
How to use(如何使用)
Install
npm install --save-dev vue2-ace-editor-support-chinese
Require it in
components
of Vue options(推荐使用 ES6 写法)import editor from "vue2-ace-editor-support-chinese"; export default { data(){ return {} }, methods, ... components: { editor }, }
Require the editor's mode/theme module in custom methods
{ data, methods:{ editorInit:function () { // 这里需要哪种语言就引用那种,需要那个主题就用哪个。 // Import which one you want. require('brace/mode/javascript'); require('brace/theme/github'); } }, }
Use the component in template(以下是两种不同使用方法)
Direct use of v-model binding variables;(直接使用 v-model 绑定变量)
<editor v-model="content" @init="editorInit();" :autoComplete=true @setCompletions="setCompletions" lang="html" theme="chrome" width="500" height="100"></editor>
prop
v-model
is required(v-model必须)prop
lang
andtheme
is same as ace-editor's docprop
height
andwidth
could be one of these:200
,200px
,50%
prop
autoComplete
can define whether autoComplete is enabled(此标志定义自动提示,是否开启)prop
setCompletions
autoComplete callback(自动提示回调函数,在编辑器内容变化时触发,参数有四个)Separate value and input separately;(分别指定input 和 value)
<editor @init="editorInit();" @input="changeData" @setCompletions="setCompletions" :autoComplete=true :value='editData' lang="html" theme="chrome" width="500" height="100"></editor> { data(){ return { editData: editData //初始展示数据,必要时三目运算判空 } }, methods: { // value变化触发input执行, changeData: function (context) { this.editData = context; },
}/** * 设置自动补全回调函数,value变化实时执行。 * @param editor ace editor对象 * @param session * @param pos 当前字符位置:row、column * @param prefix 当前编辑字符 * @param callback 执行函数 */ setCompletions (editor, session, pos, prefix, callback) { let wordList = ['提示'] callback(null, wordList.map(function (word) { return { caption: word, value: word, meta: 'local' } })) } }
prop
@input
:value
is required(必须)prop
lang
andtheme
is same as ace-editor's docprop
height
andwidth
could be one of these:200
,200px
,50%
prop
autoComplete
can define whether autoComplete is enabled(此标志定义自动提示,是否开启)prop
setCompletions
autoComplete callback(自动提示回调函数,在编辑器内容变化时触发,参数有四个)