@bg2it/code-editor

code-editor

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

Install

npm install @boldarialblack/code-editor -S

Quick Start

import Vue from 'vue'
import CodeEditor from '@boldarialblack/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

参数	说明	类型	可选值	默认值
value	绑定值	String/Array	-	-
options	codemirror options选项，具体可以参考codemirror 的文档	Object	-	见下文
events	除默认监听事件外(changes,beforeChange,scroll)，额外监听的事件，具体可以参考vue-codemirror和codemirror的文档	Array	-	['contextmenu']
hint-list	补全内容的数据源	Object	-	-
sizeable	是否可以进行编辑区放大缩小	Boolean	-	true
context-menu	是否开启右键菜单自定义	Boolean	-	true
context-options	未选中文本时右键菜单选项	Array	-	-
selected-context-options	选中文本时右键菜单选项	Array	-	-
formatable	右键菜单选项是否有格式化/格式化选中选项	Boolean	-	true
commentable	右键菜单选项是否有切换注释/切换注释选中选项，如未引入codemirror/addon/comment/comment则自动隐藏	Boolean	-	true
format-text	右键菜单格式化/格式化选中选项文案	String	-	格式化
comment-text	右键菜单切换注释/切换注释选中选项文案	String	-	切换注释
z-index	右键菜单的z-index属性	Number	-	30000
context-append-to-body	右键菜单是否挂载在body上	Boolean	-	false
line-comment	注释的前缀符号	String	-	--
sql-lint	是否对输入内容进行sql语法检查，sqlLint插件支持外部引入(如node-sql-parser/dt-sql-parser)	Boolean	-	true
props	codemirror配置选项，具体可以参考code-mirror 的文档	Object	-	-
mask-props	mask配置选项，具体可以参考 gs-mask 的文档	Object	-	-
hint-props	codemirror中showHint函数传参选项，具体可以参考 codemirror 的文档	Object	-	-

CodeEditor Methods

方法名	说明	参数
refresh	刷新编辑器	-
getSelection	获取编辑器选中文本	-

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

事件名称	说明	回调参数
ready	编辑框初始化完成事件	codemirror
visible-change	mask遮罩（放大/缩小）变化事件	true/false
on-context-menu	编辑框内点击右键事件	instance, event, gutter, line
menu-content-click	非浏览器默认右键菜单选中事件	method, selection

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';