vf-vue-ace

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	选择编辑器主题	-