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>

3、话不多说，直接上图

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

CodeMIrror.js在线代码编辑器简单使用
代码高亮是程序员的刚需,不管是在笔记类,论坛类,博客类web网站中,都对代码高亮提出要求,不高亮的代码阅读体验很差,codeMirror是一个前端代码高亮库,使用方便.CodeMirror 是一款在线 ...
使用 CodeMirror 打造在线代码编辑器
前提写这个的目的是因为教学的过程中,需要减少环境搭建所浪费的时间,减少我的边际成本. CodeMirror 我觉得作为一款在线代码编辑器还是不错,也看到过有些网站用到过在线代码编辑,当然我不知道他们 ...
vue2项目中按钮实现防抖、节流功能，包含封装代码以及使用
1. 描述: 本文章是在vue2项目中对防抖节流函数进行封装,在项目按钮中使用的实际应用. ,哪里有写的不太清楚或者有错的请各位大佬指正.留言:如果对您有所帮助,希望点赞给予支持和鼓励. 2. .v ...
【C++】Visual Studio教程(十二) -代码编辑器功能
00. 目录文章目录 00. 目录 01. 概述 02. 编辑器功能 03. 高级编辑功能 04. 导航和查找代码 05. 在基本代码中查找引用 06. 自定义编辑器 07. 附录 01. 概述 V ...
《Cocos Creator 代码编辑器》插件使用说明
cocos 代码编辑插件一览: 使用教程: 使用前:日常工作中游戏脚本通常绑定在节点上,需要修改脚本代码时需打开第三方代码编辑器进行编辑. 使用后:使用本插件后点击场景的节点可直接在creator上 ...
【Vue3+Vite+TS项目集成ESlint +Prettier实现代码规范检查和代码格式化】
目录前言创建项目安装初始化ESlint 安装ESlint: 初始化ESlint: 安装配置Prettier 安装prettier: 配置prettier: 配置VScode保存时自动格式化代码 ...
React中CodeMirror插件的使用及封装
目录一.CodeMirror是什么二.React中CodeMirror的基本使用介绍 (一)引入CodeMirror 1. 安装CodeMirror插件 2.引入 CodeMirror 插件 (二 ...
适用于Mac和Windows的12种最佳WordPress编辑器的代码编辑器
We often get asked about what's the best code editor for modifying WordPress files? Well you can use ...
常用的八款免费程序员喜欢的代码编辑器推荐「你用哪个」
我们每个人心目中肯定有自己认为值得拥有的代码编辑器.作为程序员的你,平时使用哪款代码编辑器呢?作为我们工作效率工具,在这篇文章中准备整理8个常用且免费的代码编辑器.看看其中有没有你在用的这款.如果没有 ...

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

1、使用npm安装依赖

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

3、话不多说，直接上图

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

最新文章

热门文章