在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 相关文章推荐
HTML node相关的一些资料整理
Jan 01 Javascript
jQuery实现购物车计算价格功能的方法
Mar 25 Javascript
同步文本框内容JS代码实现
Aug 04 Javascript
Angular中封装fancyBox(图片预览)遇到问题小结
Sep 01 Javascript
JS库之Highlight.js的用法详解
Sep 13 Javascript
js的函数的按值传递参数(实例讲解)
Nov 16 Javascript
JS实现生成由字母与数字组合的随机字符串功能详解
May 25 Javascript
vue移动端轻量级的轮播组件实现代码
Jul 12 Javascript
Bootstrap导航菜单点击后无法自动添加active的处理方法
Aug 10 Javascript
Vue Cli 3项目使用融云IM实现聊天功能的方法
Apr 19 Javascript
LayUi使用switch开关,动态的去控制它是否被启用的方法
Sep 21 Javascript
JavaScript实现简单计时器
Jun 22 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
人族 Terran 魔法与科技
2020/03/14 星际争霸
ionCube 一款类似zend的PHP加密/解密工具
2010/07/25 PHP
php实现图片等比例缩放代码
2015/07/23 PHP
layui数据表格自定义每页条数limit设置
2019/10/26 PHP
javascript 框架小结 个人工作经验
2009/06/13 Javascript
js计算页面刷新的次数
2009/07/20 Javascript
jQuery EasyUI中对表格进行编辑的实现代码
2010/06/10 Javascript
jQuery ajax cache缓存问题
2010/07/01 Javascript
JavaScript 高级篇之DOM文档,简单封装及调用、动态添加、删除样式(六)
2012/04/07 Javascript
子窗体与父窗体传值示例js代码
2013/08/01 Javascript
js获取系统的根路径实现介绍
2013/09/08 Javascript
javascript实现一个数值加法函数
2015/06/26 Javascript
Bootstrap CSS布局之代码
2016/12/17 Javascript
node.js爬虫爬取拉勾网职位信息
2017/03/14 Javascript
详解Vue源码学习之callHook钩子函数
2018/07/25 Javascript
vue.js 添加 fastclick的支持方法
2018/08/28 Javascript
基于html+css+js实现简易计算器代码实例
2020/02/28 Javascript
vue同个按钮控制展开和折叠同个事件操作
2020/07/29 Javascript
微信小程序中data-key属性之数据传输(经验总结)
2020/08/22 Javascript
Python实现简单HTML表格解析的方法
2015/06/15 Python
Python实现购物车程序
2018/04/16 Python
django中静态文件配置static的方法
2018/05/20 Python
Python2包含中文报错的解决方法
2018/07/09 Python
Django的Modelforms用法简介
2019/07/27 Python
Python爬取知乎图片代码实现解析
2019/09/17 Python
牦牛毛户外探险服装:Kora
2019/02/08 全球购物
会计系中文个人求职信
2013/12/24 职场文书
茶叶店创业计划书范文
2014/01/19 职场文书
业绩倒数第一的检讨书
2014/09/24 职场文书
国际贸易实训报告
2014/11/05 职场文书
幼儿园保教工作总结2015
2015/10/15 职场文书
2019年房屋委托租赁合同范本(通用版)!
2019/07/17 职场文书
Java SSH 秘钥连接mysql数据库的方法
2021/06/28 Java/Android
Java+swing实现抖音上的表白程序详解
2022/06/25 Java/Android
MySQL新手入门进阶语句汇总
2022/09/23 MySQL
TS 类型兼容教程示例详解
2022/09/23 Javascript