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


Posted in Javascript onAugust 27, 2019

在vue项目中使用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 () {
   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>

3、话不多说,直接上图

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

总结

以上所述是小编给大家介绍的在vue项目中使用codemirror插件实现代码编辑器功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
将CKfinder整合进CKEditor3.0的新方法
Jan 10 Javascript
Jquery跨域获得Json时invalid label错误的解决办法
Jan 11 Javascript
Javascript 倒计时源代码.(时.分.秒) 详细注释版
May 09 Javascript
iframe如何动态创建及释放其所占内存
Sep 03 Javascript
前端实现文件的断点续传(前端文件提交+后端PHP文件接收)
Nov 04 Javascript
node.js多个异步过程中判断执行是否完成的解决方案
Dec 10 Javascript
Router解决跨模块下的页面跳转示例
Jan 11 Javascript
Vue在 Nuxt.js 中重定向 404 页面的方法
Apr 23 Javascript
9个JavaScript日常开发小技巧
Oct 06 Javascript
vue实现简单加法计算器
Oct 22 Javascript
实现一个简单得数据响应系统
Nov 11 Javascript
Javascript中Microtask和Macrotask鲜为人知的知识点
Apr 02 Javascript
vue使用codemirror的两种用法
Aug 27 #Javascript
微信小程序中为什么使用var that=this
Aug 27 #Javascript
JS常见面试试题总结【去重、遍历、闭包、继承等】
Aug 27 #Javascript
微信小程序模板消息限制实现无限制主动推送的示例代码
Aug 27 #Javascript
jQuery实现判断滚动条滚动到document底部的方法分析
Aug 27 #jQuery
JS多个表单数据提交下的serialize()应用实例分析
Aug 27 #Javascript
解决Vue中 父子传值 数据丢失问题
Aug 27 #Javascript
You might like
PHP通过header实现文本文件下载的代码
2010/08/08 PHP
php出现内存位置访问无效错误问题解决方法
2014/08/16 PHP
yii 框架实现按天,月,年,自定义时间段统计数据的方法分析
2020/04/04 PHP
js实现的真正的iframe高度自适应(兼容IE,FF,Opera)
2010/03/07 Javascript
javascript 拖动表格行实现代码
2011/05/05 Javascript
js获取指定日期周数以及星期几的小例子
2014/06/27 Javascript
jQuery中:password选择器用法实例
2015/01/03 Javascript
jQuery通过ajax方法获取json数据不执行success的原因及解决方法
2016/10/15 Javascript
详解JavaScript的闭包、IIFE、apply、函数与对象
2016/12/21 Javascript
js实现一个猜数字游戏
2017/03/31 Javascript
解决canvas画布使用fillRect()时高度出现双倍效果的问题
2017/08/03 Javascript
vue刷新和tab切换实例
2018/02/11 Javascript
javascript 设计模式之享元模式原理与应用详解
2020/04/08 Javascript
代码块高亮可复制显示js插件highlight.js+clipboard.js整合
2021/02/15 Javascript
200行自定义python异步非阻塞Web框架
2017/03/15 Python
Python中定时任务框架APScheduler的快速入门指南
2017/07/06 Python
Python爬虫之网页图片抓取的方法
2018/07/16 Python
不知道这5种下划线的含义,你就不算真的会Python!
2018/10/09 Python
python重试装饰器的简单实现方法
2019/01/31 Python
Python 随机按键模拟2小时
2020/12/30 Python
基于HTML5 Canvas 实现商场监控实例详解
2017/11/20 HTML / CSS
html5组织文档结构_动力节点Java学院整理
2017/07/11 HTML / CSS
如何开发一个JQuery插件
2016/07/28 面试题
实习评语
2013/12/16 职场文书
英语感恩演讲稿
2014/01/14 职场文书
优秀女职工事迹材料
2014/02/06 职场文书
老公爱的承诺书
2014/03/31 职场文书
人事专员岗位说明书
2014/07/29 职场文书
单位接收函格式
2015/01/30 职场文书
教师个人成长总结
2015/02/11 职场文书
导游词之泰山玉皇顶
2019/12/23 职场文书
纯CSS实现酷炫的霓虹灯效果
2021/04/13 HTML / CSS
如何搭建 MySQL 高可用高性能集群
2021/06/21 MySQL
MySQL系列之八 MySQL服务器变量
2021/07/02 MySQL
MySQL中几种插入和批量语句实例详解
2021/09/14 MySQL
新的CSS 伪类函数 :is() 和 :where()示例详解
2022/08/05 HTML / CSS