vue-ace-editor-compate
A packaging of ace support chinese
vue-ace的兼容版本,主要更改index.js,自动填充,和扩展语法
How to use(如何使用)
-
Install
npm install --save-dev vue-ace-editor-compate
-
Require it in
components
of Vue options(推荐使用 ES6 写法)import editor from "vue-ace-editor-compate"; export default { data(){ return {} }, methods, ... components: { editor }, }
-
Require the editor's mode/theme module in custom methods
{ data, methods:{ editorInit:function () { require('brace/mode/html'); require('brace/mode/javascript'); require('brace/mode/groovy'); require('brace/theme/chrome'); } }, }
-
Use the component in template(以下是两种不同方法使用)
-
Direct use of v-model binding variables;(直接使用 v-model 绑定变量)
<editor v-model="content" @init="editorInit();" 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%
-
Separate value and input separately;(分别指定input 和 value)
<editor @init="editorInit();" lang="html" theme="chrome" width="500" height="100" @input="changeData" :value='editData'></editor> { data(){ return { editData: editData //初始展示数据,必要时三目运算判空 } }, methods: { // value变化触发input执行, changeData: function (context) { this.editData = context; }, } }
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%
-