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 文件

<template>
  <codemirror v-model="item" :options="cmOption" class="code-mirror" @ready="onCmReady3" @focus="onCmFocus" @input="onCmCodeChange" ref="myCmGenerate"></codemirror>
</template>

<script>
import { codemirror } from 'vue-codemirror'
// 我这里引入的是JS语言文件
import 'codemirror/mode/javascript/javascript.js'
import './setting.js'
export default {
    data () {
        return {
            item: '',
            cmOption: {
                tabSize: 2, // tab
                styleActiveLine: true, // 高亮选中行
                lineNumbers: true, // 显示行号
                styleSelectedText: true,
                line: true,
                foldGutter: true, // 块槽
                gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
                highlightSelectionMatches: { showToken: /\w/, annotateScrollbar: true }, // 可以启用该选项来突出显示当前选中的内容的所有实例
                mode: { // 模式, 可查看 codemirror/mode 中的所有模式
                  name: 'javascript',
                  json: true
                },
                // hint.js options
                hintOptions: {
                  // 当匹配只有一项的时候是否自动补全
                  completeSingle: false
                },     
                // 快捷键 可提供三种模式 sublime、emacs、vim
                keyMap: 'sublime',
                matchBrackets: true,
                showCursorWhenSelecting: true,
                theme: 'monokai', // 主题 
                extraKeys: { 'Ctrl': 'autocomplete' } // 可以用于为编辑器指定额外的键绑定,以及keyMap定义的键绑定
              }
            }
        }
    },
    methods: {
        onCmReady3() {
          this.$refs.myCmGenerate.codemirror.setSize('400px', '400px')
        },
        onCmFocus(instance, event) {
          console.log(instance)
          console.log(event)
        },
        onCmCodeChange(instance, obj) {
          console.log(instance)
          console.log(obj)
        }
      }
}
</script>
<style>
.CodeMirror-scroll {
  overflow: scroll !important;
  margin-bottom: 0;
  margin-right: 0;
  padding-bottom: 0;
  height: 100%;
  outline: none;
  position: relative;
  border: 1px solid #dddddd;
}
</style>
<style lang="less" scoped>
.code-mirror{
  font-size : 13px;
  line-height : 150%;
  text-align: left;
}
</style>
  • javascript 黑色风格,效果图如下:

        

  • mysql 淡黄色风格

    将 theme 换成 'solarized light' , 然后将 mode 改成 'text/x-mysql'

  •  白色主题风格

    将 theme 换成 'base16-light' 就行

        

更多支持的语言和主题可在源码中查看,或者参考这位作者的 codemirror API介绍 , 内容比较详细
       

  • 8
    点赞
  • 36
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
使用 vue-codemirror 的流程如下: 1. 在 Vue 项目中安装 vue-codemirror 插件。可以通过 npm 或 yarn 进行安装: ``` npm install vue-codemirror --save ``` 或 ``` yarn add vue-codemirror ``` 2. 在 main.js 或者需要使用的组件中导入和注册 vue-codemirror 插件: ```javascript import Vue from 'vue' import VueCodemirror from 'vue-codemirror' import 'codemirror/lib/codemirror.css' // 引入样式文件 import 'codemirror/theme/base16-dark.css' // 可选的主题样式文件,根据需要选择 Vue.use(VueCodemirror) ``` 3. 在需要使用 CodeMirror 的组件中,使用 `<vue-codemirror>` 标签来渲染 CodeMirror 编辑器: ```vue <template> <div> <vue-codemirror v-model="code" :options="editorOptions"></vue-codemirror> </div> </template> <script> export default { data() { return { code: '', editorOptions: { // CodeMirror 的配置选项 mode: 'javascript', // 设置编辑器模式 lineNumbers: true, // 是否显示行号 theme: 'base16-dark', // 设置主题样式 // 其他配置选项根据需要设置 } } } } </script> ``` 4. 可以通过 `v-model` 指令来双向绑定编辑器中的内容,实时获取用户输入的代码。 5. 可以根据需要在 `editorOptions` 中设置 CodeMirror 的配置选项,如编辑器模式、行号显示、主题样式等。 6. 运行 Vue 项目,即可在对应的页面中看到使用了 vue-codemirror 的 CodeMirror 编辑器。 以上就是使用 vue-codemirror 的最详细流程。希望对你有帮助!如有更多问题,请继续提问。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值