一个包装 ace 灵感来自vue3-ace-editor ,目前已适配vue2.x.x版本
-
安装
npm i v-ace-editor
-
注册在
components
选项import AceEditor from 'v-ace-editor'; export default { data:{ test:'' }, methods, ... components: { AceEditor, }, }
-
Use the component in template
<ace-editor v-model="test" lang="html" theme="ambiance" style="height: 300px" />
道具
v-model
是必需的。<ace-editor>
默认没有高度。它的高度必须手动指定,或者同时设置min-lines
和max-lines
以使编辑器的高度自动增长。 proplang
,theme
具体可以参考 ace-editor的文档
目前支持按需加载,设置lazy=false
,添加自己需要的文件,具体可参考下方地址
https://github.com/ajaxorg/ace-builds/blob/a4103cb0a672a4fec9a16fc344f3116b51d6bcda/webpack-resolver.js
参数说明
Attribute | Description | Type |
---|---|---|
value |
值 | String |
lang |
语言 | String |
theme |
主题 | String |
options |
扩展参数 | Object |
placeholder |
提示 | String |
readonly |
只读 | Boolean |
wrap |
搜索到达结尾时,将搜索返回到开头 | Boolean |
printMargin |
显示打印边距和设置打印边距宽度的快捷方式 | Boolean, Number |
minLines |
至少行数 | Number |
maxLines |
至多行数 | Number |
lazy |
懒加载 | Boolean |
更多参数 |
MIT
作者:entfrm开发团队-王翔