README
vf-vue-ace
Vue Ace Editor
如何使用
install
npm install --save vf-vue-ace
npm install --save ace-builds
usage
// mian.js
// 全局安装插件
import Vue from "vue";
import VFACE from "vf-vue-ace";
Vue.use(VFACE);
<template>
<vf-ace
width="100%"
height="500px"
placeholder="vf-ace 编辑器"
:fontSize="20"
:enableLiveAutocompletion="true"
mode="mysql"
theme="monokai"
/>
</template>
import "ace-builds/src-min-noconflict/ext-searchbox";
import "ace-builds/src-min-noconflict/ext-language_tools";
const languages = ["mysql", "golang"];
const themes = ["monokai", "solarized_light"];
languages.forEach((lang) => {
require(`ace-builds/src-noconflict/mode-${lang}`);
});
themes.forEach((theme) => {
require(`ace-builds/src-noconflict/theme-${theme}`);
});
vf-ace
vf-split
vf-diff
Project setup
npm install
// run example
npm run dev
主要功能
属性 | 类型 | 描述 | 默认值 |
---|---|---|---|
width | string |
组件宽度,一般设置100% |
500px |
height | string |
组件高度 | 500px |
placeholder | string |
placeholder | - |
fontSize | number |
编辑器字体大小 | 12 |
enableLiveAutocompletion | boolean |
编辑器自动提示 | - |
mode | string |
选择编辑器语言 | - |
theme | string |
选择编辑器主题 | - |