# @boldarialblack/code-editor

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

Latest version **0.0.1** (published 2020-10-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install @boldarialblack/code-editor
pnpm add @boldarialblack/code-editor
yarn add @boldarialblack/code-editor
bun add @boldarialblack/code-editor
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.1 |
| Published | 2020-10-12 |
| First published | 2020-10-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 7.3 MB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 31 |
| Author | BoldArialBlack |
| Maintainers | boldarialblack |
| Keywords | vue, code-editor, components |

## Links

- npm: https://www.npmjs.com/package/@boldarialblack/code-editor
- Repository: https://github.com/BoldArialBlack/code-editor
- Homepage: https://github.com/BoldArialBlack/code-editor#readme
- Issues: https://github.com/BoldArialBlack/code-editor/issues
- npm.io page: https://npm.io/package/@boldarialblack/code-editor

## Dependencies (5)

- [vue](https://npm.io/package/vue.md) ^2.3.3
- [element-ui](https://npm.io/package/element-ui.md) ^2.13.2
- [sql-formatter](https://npm.io/package/sql-formatter.md) ^2.3.3
- [vue-codemirror](https://npm.io/package/vue-codemirror.md) ^4.0.6
- [e-vue-contextmenu](https://npm.io/package/e-vue-contextmenu.md) ^0.1.3

## Alternatives

- [ext-list](https://npm.io/package/ext-list.md) — 6.3M weekly downloads
- [@lexical/selection](https://npm.io/package/@lexical/selection.md) — 3.8M weekly downloads
- [@lexical/text](https://npm.io/package/@lexical/text.md) — 3.6M weekly downloads
- [@lexical/clipboard](https://npm.io/package/@lexical/clipboard.md) — 3.0M weekly downloads
- [@tiptap/extension-mention](https://npm.io/package/@tiptap/extension-mention.md) — 3.0M weekly downloads

## Recent versions

- 0.0.1 (latest) — 2020-10-12

## README

# code-editor

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

## Install

```bash
npm install @boldarialblack/code-editor -S
```

## Quick Start

```bash
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](https://github.com/BoldArialBlack/code-editor.git) in our documentation.

## Build Setup

``` bash
# 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](http://opensource.org/licenses/MIT)

## 截图
![截图](./snap/example.gif)


## 基本用法
```
<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:
```javascript
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';`

---
_Source: https://npm.io/package/@boldarialblack/code-editor · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._