Vue m ace editor

An ace editor component for vue.

Version: 1.0.0 Updated: 05/21/2018

By: mengdu License: MIT

Downloads Last 30 Days: 22

Install

npm i vue-m-ace-editor
yarn add vue-m-ace-editor

Repository: https://github.com/mengdu/m-ace-editor

CDNs

bundle.run: https://bundle.run/vue-m-ace-editor

jsDelivr: https://cdn.jsdelivr.net/npm/vue-m-ace-editor

unpkg: https://unpkg.com/vue-m-ace-editor

m-ace-editor

Vue ace 编辑器组件。

npm

npm install -S vue-m-ace-editor

use

import MAceEditor from 'vue-m-ace-editor'

Vue.use(MAceEditor) // 注册 m-ace-editor 组件
<m-ace-editor height="250px" v-model="content" :line-number="false"></m-ace-editor>

如果你要设置其他的主题和模式,你需要导入ace支持的,主题和模式

import 'brace'
import 'brace/mode/markdown'
import 'brace/mode/javascript'
import 'brace/theme/clouds_midnight'
<m-ace-editor height="250px" v-model="content" :line-number="false" mode="javascript" theme="chrome"></m-ace-editor>

MAceEditor Attributes

参数 说明 类型 可选值 默认值
width 宽度 string/number
height 高度 string/number
line-height 内容行高 string/number
value 内容 string
font-size 字体大小 string 14px
line-number 是否显示行号 boolean true
highlight-active-line 高亮当前行 boolean true
mode 模式 string markdown
theme 主题 string

MAceEditor Events

事件 说明 参数
change 内容改变 value
blur 失去焦点 editor
focus 获取焦点 editor
init 初始化 editor

更多设置

ACE API

Contributors



lanyue
commits

Dependencies


DevDependencies


Categories: Vue js
Tags: