在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 相关文章推荐
分享20多个很棒的jQuery 文件上传插件或教程
Sep 04 Javascript
js为空或不是对象问题的快速解决方法
Dec 11 Javascript
使用JavaScript的ActiveXObject对象检测应用程序是否安装的方法
Apr 15 Javascript
javascript表单验证大全
Aug 12 Javascript
javascript对象的创建和访问
Mar 08 Javascript
使用伪命名空间封装保护独自创建的对象方法
Aug 04 Javascript
jQuery 翻页组件yunm.pager.js实现div局部刷新的思路
Aug 11 Javascript
使用Browserify来实现CommonJS的浏览器加载方法
May 14 Javascript
JS实现经典的中国地区三级联动下拉菜单功能实例【测试可用】
Jun 06 Javascript
vue 2.0 购物车小球抛物线的示例代码
Feb 01 Javascript
layui表单验证select下拉框实现验证的方法
Sep 05 Javascript
Vue中Table组件行内右键菜单实现方法(基于 vue + AntDesign)
Nov 21 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 CLI模式下的多进程应用分析
2013/06/03 PHP
ThinkPHP的RBAC(基于角色权限控制)深入解析
2013/06/17 PHP
ThinkPHP中URL路径访问与模块控制器之间的关系
2014/08/23 PHP
Smarty实现页面静态化(生成HTML)的方法
2016/05/23 PHP
thinkphp5 框架结合plupload实现图片批量上传功能示例
2020/04/04 PHP
firebug的一个有趣现象介绍
2011/11/30 Javascript
E3 tree 1.6在Firefox下显示问题的修复方法
2013/01/30 Javascript
使用javascript过滤html的字符串(注释标记法)
2013/07/08 Javascript
JQuery中clone方法复制节点
2015/05/18 Javascript
jQuery实现带有洗牌效果的动画分页实例
2015/08/31 Javascript
jquery获取input type=text中的值的各种方式(总结)
2016/12/02 Javascript
基于javascript实现按圆形排列DIV元素(一)
2016/12/02 Javascript
jQuery中弹出iframe内嵌页面元素到父页面并全屏化的实例代码
2016/12/27 Javascript
AngularJS 防止页面闪烁的方法
2017/03/09 Javascript
NodeJS学习笔记之Module的简介
2017/03/24 NodeJs
Angular 4.x 路由快速入门学习
2017/05/03 Javascript
解决angularjs前后端分离调用接口传递中文时中文乱码的问题
2018/08/13 Javascript
Puppeteer环境搭建的详细步骤
2018/09/21 Javascript
babel7.x和webpack4.x配置vue项目的方法步骤
2019/05/12 Javascript
基于vue和websocket的多人在线聊天室
2020/02/01 Javascript
微信小程序拖拽排序列表的示例代码
2020/07/08 Javascript
Vue之封装公用变量以及实现方式
2020/07/31 Javascript
简单介绍Python中的len()函数的使用
2015/04/07 Python
Python编程对列表中字典元素进行排序的方法详解
2017/05/26 Python
Python爬虫——爬取豆瓣电影Top250代码实例
2019/04/17 Python
python实现的汉诺塔算法示例
2019/10/23 Python
Python使用Pyqt5实现简易浏览器(最新版本测试过)
2020/04/27 Python
巴黎卡诗美国官方网站:始于1964年的头发头皮护理专家
2017/07/10 全球购物
ProForm英国站点:健身房和健身器材网上商店
2019/06/05 全球购物
AURALog面试题软件测试方面
2013/10/22 面试题
Static Nested Class 和 Inner Class的不同
2013/11/28 面试题
产品陈列协议书(标准版)
2014/09/17 职场文书
构建和谐校园倡议书
2015/01/19 职场文书
2016年清明节红领巾广播稿
2015/12/17 职场文书
企业管理不到位检讨书
2019/06/27 职场文书
javascript之Object.assign()的痛点分析
2022/03/03 Javascript