@boldarialblack/code-editor v0.0.1

code-editor

一个默认支持美化、高亮、报错、格式化、注释、补全、缩放的代码编辑器(sql为默认语言)，主体基于Vue和CodeMirror等。

Install

npm install code-editor -S

Quick Start

import Vue from 'vue'
import CodeEditor from 'code-editor'
# Vue.component('code-editor', CodeEditor) # 可以指定组件名称
Vue.use(CodeEditor) # 组件名称 `code-editor`

For more information, please refer to CodeEditor in our documentation.

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for demo with minification
npm run demo:build

# build for gh-pages with minification
npm run demo:prepublish

# build for production with minification
npm run build

# generate gh-pages
npm run deploy

LICENSE

MIT

截图

基本用法

<template>
  <div class="vd-demo__block vd-demo__block-2">
    <div style="display: flex">
      <el-button @click="addHintList">
        添加补全内容
      </el-button>
      <el-button @click="getSelection">
        获取选中文本
      </el-button>
      <span>选中: {{ selection || '-' }}</span>
    </div>
    <code-editor
      ref="editor"
      v-model="value"
      :context-options="[{label: 'test', method: test}]"
      :events="['contextmenu', 'blur']"
      :hint-list="hintList"
      context-append-to-body
      @blur="blur"
      @ready="ready"
    />
  </div>
</template>

<script>
// 可单独引入外部sqlLint语法检查插件
/* import { Parser } from 'node-sql-parser';
window.sqlLint = new Parser();  */
/* 也支持dt-sql-parser
import { parser } from 'dt-sql-parser';
window.sqlLint = parser;
*/

  export default {
    data () {
      return {
        value: 'SELECT * FRO \'test_table\'',
        hintList: {},
        selection: ''
      }
    },
    methods: {
      test() {
        console.log('test');
      },
      ready() {
        console.log('ready');
      },
      blur() {
        console.log('blur');
      },
      addHintList() {
        this.hintList[`hint${Object.keys(this.hintList).length + 1}`] = [];
      },
      getSelection() {
        this.selection = this.$refs.editor.getSelection();
      }
    }
  }
</script>

CodeEditor props

CodeEditor Methods

CodeEditor events(除编辑器监听事件外)

CodeEditor slot

CodeEditor options 默认值

  tabSize: 4,
  styleActiveLine: true,
  lineNumbers: true,
  line: true,
  extraKeys: {
    'Tab': 'autocomplete',
    'Ctrl-/': this.toggleComment
  },
  mode: 'text/x-mysql',
  addOverlay: 'text/x-mysql',
  gutters: ['CodeMirror-lint-markers'],
  lint: this.sqlLint,
  matchBrackets: true,
  hintOptions: {
    completeSingle: false,
    tables: this.hintList
  },
  delay: 700

CodeEditor 语法检查（实验）

目前要对输入进行语法检查有两种方法：

外部插件检查

用法： 1. 引入报错js：import 'codemirror/addon/lint/lint';和import 'code-editor/lint/sql-lint';2. 安装选择的语法检查插件（目前明确支持的有node-sql-parser和dt-sql-parser`插件），并且引入后将window.sqlLint配置

Demo:

import 'codemirror/addon/lint/lint';
import 'code-editor/lint/sql';

// 按需引入sqlLint语法检查插件
import { Parser } from 'node-sql-parser';
window.sqlLint = new Parser();
/* 也支持dt-sql-parser
import { parser } from 'dt-sql-parser';
window.sqlLint = parser;
*/

内部工具检查(Deprecated)

已修改为默认检查，无需单独 1. 引入语法检查js：import 'code-editor/parser/sql';或import 'code-editor/parser/hive'; 2. 引入报错js：import 'codemirror/addon/lint/lint';和import 'code-editor/lint/sql';