vue2项目使用codemirror插件实现代码编辑器功能

1、使用npm安装依赖

npm install --save codemirror

2、在页面中放入如下代码

<template><textarea ref="mycode" class="codesql" v-model="code" style="height:200px;width:600px;"></textarea>
</template><script>import "codemirror/theme/ambiance.css";import "codemirror/lib/codemirror.css";import "codemirror/addon/hint/show-hint.css";let CodeMirror = require("codemirror/lib/codemirror");require("codemirror/addon/edit/matchbrackets");require("codemirror/addon/selection/active-line");require("codemirror/mode/sql/sql");require("codemirror/addon/hint/show-hint");require("codemirror/addon/hint/sql-hint");export default {name: "codeMirror",data () {return {code: '//按Ctrl键进行代码提示'}},mounted () {debuggerlet mime = 'text/x-mariadb'//let theme = 'ambiance'//设置主题，不设置的会使用默认主题let editor = CodeMirror.fromTextArea(this.$refs.mycode, {mode: mime,//选择对应代码编辑器的语言，我这边选的是数据库，根据个人情况自行设置即可indentWithTabs: true,smartIndent: true,lineNumbers: true,matchBrackets: true,//theme: theme,// autofocus: true,extraKeys: {'Ctrl': 'autocomplete'},//自定义快捷键hintOptions: {//自定义提示选项tables: {users: ['name', 'score', 'birthDate'],countries: ['name', 'population', 'size']}}})//代码自动提示功能，记住使用cursorActivity事件不要使用change事件，这是一个坑，那样页面直接会卡死editor.on('cursorActivity', function () {editor.showHint()})}}
</script><style>.codesql {font-size: 11pt;font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;}
</style>

vue2 ts 类装饰版本组件

<template><textarea ref="container" v-model="value"></textarea>
</template><script lang="ts">
import Vue from 'vue';
import { Component, Ref, Model, Emit, Watch, Prop } from 'vue-property-decorator';
import CodeMirror from 'codemirror';
import 'codemirror/lib/codemirror.css';
import 'codemirror/mode/sql/sql';
import 'codemirror/theme/neat.css';
import 'codemirror/addon/scroll/simplescrollbars.css';
import 'codemirror/addon/scroll/simplescrollbars';
import 'codemirror/addon/hint/show-hint';
import 'codemirror/addon/hint/show-hint.css';
import 'codemirror/addon/hint/sql-hint';
import 'codemirror/mode/meta';
import 'codemirror/addon/selection/active-line';@Component
export default class CodeEditor extends Vue {@Ref('container') container!: HTMLTextAreaElement;@Model('change') value!: string;@Prop(Array) list?: string[];@Prop(Number) ch?: number;@Prop(String) height?: string;mirror: CodeMirror.Editor = CodeMirror(this.container);constructor() {super();this.changeListener = this.changeListener.bind(this);}mounted() {this.mirror = CodeMirror.fromTextArea(this.container, {value: this.value,mode: 'text/x-sql',theme: 'neat',styleActiveLine: true,readOnly: false,smartIndent: true,scrollbarStyle: 'overlay',lineNumbers: true,// matchBrackets: true,autofocus: true,// autoMatchParens: true,// styleSelectedText: true,indentUnit: 4,extraKeys: { Ctrl: 'autocomplete' },showHint: true,autocorrect: true,autocapitalize: true,});this.mirror.setSize('heigth', this.height);this.mirror.on('change', this.changeListener);}private changeListener(editor: CodeMirror.Editor, change: CodeMirror.EditorChangeLinkedList) {this.handleContentChange(this.mirror.getValue());if (change.origin === '+input' || change.origin === '*compose') {setTimeout(() => {const cursor = editor.getCursor();const str = editor.getLine(cursor.line);if (this.list && this.list.length) {// eslint-disable-next-lineconst hint = () => {return {from: { ch: this.ch || str.lastIndexOf(' ') + 1, line: cursor.line },to: { ch: str.length, line: cursor.line },list: [...(this.list || ['allen'])],};};editor.showHint({completeSingle: false,hint,});} else {this.mirror.showHint({ completeSingle: false, hint: CodeMirror.hint.sql });}}, 20);}}@Watch('value')handleValueChange(newValue: string) {if (newValue !== this.mirror.getValue()) {if (!newValue) {this.mirror.setValue('');return;}const value = newValue.split(' ').filter((item) => !!item).join(' ');this.mirror.setValue(value);this.mirror.focus();this.mirror.setCursor(newValue.length);}}@Emit('change')handleContentChange(content: string) {return content;}beforeDestroy() {this.mirror.off('change', this.changeListener);}
}
</script><style lang="less">
.CodeMirror {line-height: 1.5;
}
</style>