codemirror mysql_vue-codemirror 最全踩坑之路
1. npm i vue-codemirror --save-D
2. 在组件中使用
公共的配置文件 setting.js
import 'codemirror/lib/codemirror.css'
// require active-line.js
import 'codemirror/addon/selection/active-line.js'
// styleSelectedText
import 'codemirror/addon/selection/mark-selection.js'
// hint
import 'codemirror/addon/hint/show-hint.js'
import 'codemirror/addon/hint/sql-hint.js'
import 'codemirror/addon/hint/show-hint.css'
import 'codemirror/addon/hint/javascript-hint.js'
// highlightSelectionMatches
import 'codemirror/addon/scroll/annotatescrollbar.js'
import 'codemirror/addon/search/matchesonscrollbar.js'
import 'codemirror/addon/search/match-highlighter.js'
// keyMap
import 'codemirror/mode/clike/clike.js'
import 'codemirror/mode/sql/sql.js'
import 'codemirror/addon/edit/matchbrackets.js'
import 'codemirror/addon/comment/comment.js'
import 'codemirror/addon/dialog/dialog.js'
import 'codemirror/addon/dialog/dialog.css'
import 'codemirror/addon/search/searchcursor.js'
import 'codemirror/addon/search/search.js'
import 'codemirror/keymap/sublime.js'
// foldGutter
import 'codemirror/addon/fold/foldgutter.css'
import 'codemirror/addon/fold/brace-fold.js'
import 'codemirror/addon/fold/comment-fold.js'
import 'codemirror/addon/fold/foldcode.js'
import 'codemirror/addon/fold/foldgutter.js'
import 'codemirror/addon/fold/indent-fold.js'
import 'codemirror/addon/fold/markdown-fold.js'
import 'codemirror/addon/fold/xml-fold.js'
// 编辑的主题文件
import 'codemirror/theme/monokai.css'
import 'codemirror/theme/base16-light.css'
基础 vue 文件
javascript 黑色风格,效果图如下:
mysql 淡黄色风格
将 theme 换成 'solarized light' , 然后将 mode 改成 'text/x-mysql'
白色主题风格
将 theme 换成 'base16-light' 就行
更多支持的语言和主题可在源码中查看,或者参考这位作者的 codemirror API介绍 , 内容比较详细
codemirror mysql_vue-codemirror 最全踩坑之路相关推荐
- mybatis mapper.xml dtd_全栈开发踩坑之路4-用MyBatis实现服务
1.前言 上一篇文章介绍了如何设计后端的Mysql数据库:Alex Wang:全栈开发踩坑之路3-MySql数据库设计,本文介绍如何用MyBatis实现后端服务. 本后端项目的Github地址(撰写中 ...
- [Java灵信LED] -- 踩坑之路
灵信led -T8 控制板卡 --踩坑之路 下载lv_led.dll 动态库链接 https://pan.baidu.com/s/11ZO-M6kllsq2AyhVW4AKoA 提取码:unsb 提取 ...
- jmeter 3版本到5版本踩坑之路
jmeter 3-5版本升级踩坑路 新版本下载安装 踩坑之路 新版本下载安装 下载新版本软件 ,链接: https://jmeter.apache.org/download_jmeter.cgi: 配 ...
- 微信小程序实现大转盘抽奖----踩坑之路
微信小程序实现大转盘抽奖----踩坑之路 需求:现在有一个小程序抽奖页面如下,此类抽奖方式为大转盘 思路:由服务端获取抽奖次数和奖品,根据服务端的中奖概率来决定是否中奖,最后利用小程序动画将转盘转起来 ...
- contentprovider踩坑之路之Failed to find provider info for com.example.app.provider和cursor=null空指针问题
目录 bug1.Failed to find provider info for com.example.app.provider bug2:cursor=null bug1.Failed to fi ...
- 2021-11-01 富文本编辑器Vue-Quill-Editor 踩坑之路
Vue-Quill-Editor 基于 Quill.适用于 Vue 的富文本编辑器,支持服务端渲染和单页应用. 相对于ssr,spa是通过component进行工作 ssr和spa的区别 1 踩坑之路 ...
- webpack踩坑之路 (2)——图片的路径与打包
webpack踩坑之路 (2)--图片的路径与打包 刚开始用webpack的同学很容易掉进图片打包这个坑里,比如打包出来的图片地址不对或者有的图片并不能打包进我们的目标文件夹里(bundle).下面我 ...
- 基于dx11的动作游戏踩坑之路--1
基于dx11的动作游戏踩坑之路--1 首先要声明所有的博客都是学习博客,不是技术博,只是用来记录.整理自己的学习路线,以及日后可以回顾一下.本人也只是一个小菜鸡,可能会有很多错误与纰漏,有大佬愿意指出 ...
- 公司自建电商系统对接Ariba PunchOut ----踩坑之路
Ariba Network是ariba公司开发的供应商采购平台.punchout功能对接数据传输基于cxml. 主要是实现接口登录.购物车信息返回到airba系统,以及等订单功能. 开发手册中有相应的 ...
最新文章
- Matlab与线性代数 -- 矩阵的重组4
- AI 影像诊断平台的5大设计要点
- Junit 3 与 Junit 4写法
- python代码覆盖率测试_unittest+coverage单元测试代码覆盖操作实例详解_python
- Python MetaClass
- 通达信交易服务器修改,通达信修改快捷键实现一键涨停买卖。
- 计算机修改wifimac,怎么修改mac地址?(手机和电脑mac地址修改方法)
- 用Python能下载抖音无水印视频?免费教程来了!
- 最小二乘法-线性拟合
- MATLAB(1)---将mat文件转换为csv文件
- php生成数字订单号,php生成订单号函数
- Excel表格误删怎么恢复
- 2021秋软工实践第一次结对编程作业
- 工业相机概述-选型事项-生产厂家汇总
- 移动端处理输入法表情
- 使用WASD键移动对象
- ✔✔✔ TensorBoard 的正确打开方法(含错误解决方法,超详细) ✔✔✔
- webView显示白屏的问题
- 微信小程序会员卡开发(开发效果示例图+详细介绍+接口说明)
- 用Qt设计一个图片浏览器