vue2实现codemirror在线代码编辑器（代码提示，行数显示..）

项目需求

需要在管理系统模块中实现用户SQL语句自查询，实现一个代码编辑器，要求有执行，清空，代码提示，行数显示功能,，实现效果如下：
------------------------------------------------------------
实现思路
使用 codemirror 插件封装组件，然后再父组件中引入使用，通过组件之间的通信方法，进行值的传递。
子组件封装（writeSql.vue）
首先需要安装 codemirror ：cnpm i codemirror --save

<template><div class="in-coder-panel"><textarea ref="mycode" v-model="code" class="text_cls" ></textarea></div>
</template><script>
import 'codemirror/theme/ambiance.css'
import 'codemirror/lib/codemirror.css'
import 'codemirror/addon/hint/show-hint.css'
const 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: 'in-coder',props: {// 外部传入的内容，用于实现双向绑定valueC:{type:String,} ,// 外部传入的语法类型language: {type: String,default: null,},},watch: {valueC(newVal) {//父组件传过来的值，这个需求需要传入点击的数据库表名，默认展示“SELECT * FROM student”this.editor.setValue('SELECT * FROM '+newVal)},},data() {return {code: '',editor: null,content: '',}},mounted() {// 初始化this._initialize()},methods: {//父组件调用清空的方法resetData() {this.editor.setValue('')},// 初始化_initialize() {const mime = 'text/x-mariadb'// let theme = 'ambiance'//设置主题，不设置的会使用默认主题this.editor = CodeMirror.fromTextArea(this.$refs.mycode, {// 选择对应代码编辑器的语言，我这边选的是数据库，根据个人情况自行设置即可mode: mime, indentWithTabs: true,smartIndent: true,lineNumbers: true,matchBrackets: true,extraKeys: {// 触发提示按键Ctrl: 'autocomplete',},hintOptions: {// 自定义提示选项completeSingle: false, // 当匹配只有一项的时候是否自动补全tables: {}, // 代码提示},})this.editor.setValue(this.value || this.code)// 支持双向绑定this.editor.on('change', (coder) => {this.code = coder.getValue()if (this.$emit) {// 通过监听Input事件可以拿到动态改变的code值this.$emit('input', this.code)}})this.editor.on('inputRead', () => {this.editor.showHint()})},},
}
</script><style lang="less">
.CodeMirror {height: 180px !important;
}
.in-coder-panel {border-radius: 5px;flex-grow: 1;display: flex;position: relative;.text_cls {}.cm-variable {font-size: 18px;}
}
.CodeMirror {flex-grow: 1;z-index: 1;
}
.CodeMirror-code {line-height: 19px;
}.code-mode-select {position: absolute;z-index: 2;right: 10px;top: 10px;max-width: 130px;
}
</style>

父组件调用

引入：

import writeSql from '../../components/writeSql.vue

components: {writeSql,},

应用：

<write-sqlref="changeSql"@input="input":valueC="data_value"></write-sql>

父组件中 ----------------------------------------
ref="changeSql" 通过 this.$refs.changeSql.resetData() 调用子组件中的重置方法，清空代码块中的值。
@input="input" 子组件 $emit 返回的sql语句。
data_value 是点击数据库表名时送给子组件的值，默认显示 “SELECT * FROM 表名”。

vue2实现codemirror在线代码编辑器（代码提示，行数显示..）相关推荐

Anycodes，在线编程网站上线啦！支持六种编程语言，语法高亮，行数显示，和代码自动折叠。小伙伴们，请速度围观！
Anycodes项目说明项目名称:Anycodes 曾用名成:Anycodex 声明: 该项目,目前隶属于吉林市群龙科技有限公司,项目域名是anycodes.cn 该项目代码是原创, ...
VC++6.0显示代码行号【成功破解行数显示限制，完全免费！！！】
VC++6.0作为一款比较古老的编码IDE,软件本身不带代码行显示,这一点灰常不好! 查看了CSDN上几乎所有的博客,如果想要不花币,只能通过未破解版的行数显示插件在IDE上显示500行. 这让我灰常 ...
vscode代码行数显示与关闭
vscode代码行数显示与关闭在设置里搜索 editor.lineNumbers即可.
codeMirror 学习重置编辑器代码对比一行格式化
官方网站:CodeMirror 解决问题: 1.从后台获取的代码是压缩后的,怎么显示成json格式呢? 答: 先将数据json换,再格式化.(原理:codeMirror是用null作为默认换行符的) ...
在线HTML编辑器代码
1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML><HE ...
Python+tkinter打造类似于IDLE的代码编辑器（83行源码）
推荐图书: <Python程序设计(第3版)>,(ISBN:978-7-302-55083-9),清华大学出版社,2020年6月第1次印刷,7月第2次印刷京东购买链接:https://i ...
codemirror mysql_Angular6 CodeMirror在线编辑sql 智能提示
1. 安装ng2-codemirror包.codemirror包 npm install ng2-codemirror -- save npm install codemirror -- save 2 ...
C# RichTextBox 做简单的HTML代码编辑器 ---------利用WinApi修正左侧显示行号误差
说明:通过WinApi可以准确定准滚动位置. //行号生成显示这里rtbLineNum用的 RichTextBox,也可以用其它private void ShowLineNum(){rtbLine ...
java显示行号_java开发文本编辑器手记之行号显示
学java编程一段时间了,想利用java swing开发一个桌面的文本编辑器程序,首先想要实现的便是显示行号的功能,由于要实现一些关键词着色功能,选择了JTextPane,其实还有一个JEditorP ...

vue2实现codemirror在线代码编辑器（代码提示，行数显示..）

vue2实现codemirror在线代码编辑器（代码提示，行数显示..）相关推荐

最新文章

热门文章