vue2项目使用codemirror插件实现代码编辑器功能
1、使用npm安装依赖npm install --save codemirror2、在页面中放入如下代码<template><textarea ref="mycode" class="codesql" v-model="code" style="height:200px;width:600px;"></textarea></template><
·
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 () {
debugger
let 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-line
const 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>
3、话不多说,直接上图
更多推荐
已为社区贡献19条内容
所有评论(0)