vf-vue-ace

A vue component for Ace Editor
5,691 3
Install
npm install vf-vue-ace
Latest Version:1.2.3
Vue:2
License:MIT
Last Updated:Jul 19, 2022
Links: GitHub  ·  npm
Maintainer: fea-sin

vf-vue-ace

vf-ace

Vue Ace Editor

NPM version NPM monthly downloads NPM total downloads codeStyle: Prettier types: TypeScript

如何使用

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-ace

vf-split

vf-ace

vf-diff

vf-ace

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

Related Packages

v-ace-editor

一个包装 ace 灵感来自vue3-ace-editor, javascript版本

1,707 3
vue2-brace-editor

A Vue component for integrating ace editor using brace

19,401 13
ace-editor-vue3

Like vue2-ace-editor but more functional and supports Vue 3

19,103 2
vue-json-tree-view

a JSON Tree View Component in Vue.js

380,792 473
@v-c/picker

picker ui component for vue

57,185 32

Version History

Version Released Vue License
1.2.3 ^2.0.0 MIT
1.2.2 ^2.0.0 MIT
1.2.1 ^2.0.0 MIT
1.2.0 ^2.0.0 MIT
1.1.9 ^2.0.0 MIT