使用v-md-editor开发sql查看器--实战_前端sql编辑器插件

v-md-editor

markdown编辑器

文档：https://code-farmer-i.github.io/vue-markdown-editor/zh/

echo 创建一个空目录，使用vscode打开此空目录，进入终端，输入如下命令
npm create vite@latest . -- --template vue
echo 选择 vue 和 typescript.
npm install
npm run dev
echo  vue空项目创建完成.
echo 安装v-md-editor和codemirror@5
yarn add @kangc/v-md-editor@next
yarn add codemirror@5
yarn add @codemirror/lang-markdown
yarn add @codemirror/lang-sql
yarn add vite-plugin-prismjs
1
2
3
4
5
6
7
8
9
10
11
12

main.ts

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

import VueMarkdownEditor from '@kangc/v-md-editor/lib/codemirror-editor';
import '@kangc/v-md-editor/lib/style/codemirror-editor.css';
import vuepressTheme from '@kangc/v-md-editor/lib/theme/vuepress.js';
import '@kangc/v-md-editor/lib/theme/style/vuepress.css';
import '/@/assets/css/ext-v-md-editor-vue-press.css'

// // highlightjs
// import hljs from 'highlight.js';
// codemirror 编辑器的相关资源
import Codemirror from 'codemirror';
// mode
import 'codemirror/mode/markdown/markdown';
import 'codemirror/mode/javascript/javascript';
import 'codemirror/mode/css/css';
import 'codemirror/mode/htmlmixed/htmlmixed';
import 'codemirror/mode/vue/vue';
// edit
import 'codemirror/addon/edit/closebrackets';
import 'codemirror/addon/edit/closetag';
import 'codemirror/addon/edit/matchbrackets';
// placeholder
import 'codemirror/addon/display/placeholder';
// active-line
import 'codemirror/addon/selection/active-line';
// scrollbar
import 'codemirror/addon/scroll/simplescrollbars';
import 'codemirror/addon/scroll/simplescrollbars.css';
// style
import 'codemirror/lib/codemirror.css';
import Prism from 'prismjs';

import createLineNumbertPlugin from '@kangc/v-md-editor/lib/plugins/line-number/index';
import createHighlightLinesPlugin from '@kangc/v-md-editor/lib/plugins/highlight-lines/index';
import '@kangc/v-md-editor/lib/plugins/highlight-lines/highlight-lines.css';

VueMarkdownEditor.use(
  vuepressTheme,{
  Prism,
}).use(createLineNumbertPlugin())
.use(createHighlightLinesPlugin())
;
VueMarkdownEditor.Codemirror = Codemirror;
createApp(App).use(VueMarkdownEditor).mount('#app')

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

vite-config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path';
import { prismjsPlugin  } from 'vite-plugin-prismjs';

function pathResolve(dir: string) {
  return resolve(process.cwd(), '.', dir);
}

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(),prismjsPlugin({
    languages: 'all',
    // 配置行号插件
    plugins: ['line-numbers'],
    css: true,
  }),],
  resolve: {
    alias: [
      // /@/xxxx => src/xxxx
      {
        find: /\/@\//,
        replacement: pathResolve('src') + '/',
      },
    ],
  },
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

最终效果图