nuxt.js使用代码编辑器codemirror

1.安装

npm install vue-codemirror --save

2.在plugins中创建nuxt-codemirror-plugin.js

import Vue from 'vue'
import VueCodemirror from 'vue-codemirror'

// language
import 'codemirror/mode/vue/vue.js'

// active-line.js
import 'codemirror/addon/selection/active-line.js'

// styleSelectedText
import 'codemirror/addon/selection/mark-selection.js'
import 'codemirror/addon/search/searchcursor.js'

// highlightSelectionMatches
import 'codemirror/addon/scroll/annotatescrollbar.js'
import 'codemirror/addon/search/matchesonscrollbar.js'
import 'codemirror/addon/search/searchcursor.js'
import 'codemirror/addon/search/match-highlighter.js'

// keyMap
import 'codemirror/mode/clike/clike.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'

// more...

Vue.use(VueCodemirror)

3.在nuxt.config.js中引入

module.exports = {
  // some nuxt config...
  plugins: [
    { src: '~plugins/nuxt-codemirror-plugin.js', ssr: false }
  ],
  // some nuxt config...
  css: [
    // lib css
    'codemirror/lib/codemirror.css',
    // merge css
    'codemirror/addon/merge/merge.css'
    // theme css
    'codemirror/theme/base16-dark.css'
  ],
  // some nuxt config...
}

4.使用

 

参考https://github.com/surmon-china/vue-codemirror/tree/master/examples/nuxt-ssr-example

文档https://www.npmjs.com/package/vue-codemirror