nuxt.js使用代码编辑器codemirror

红太狼 2022-05-09 09:38 417阅读 0赞

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.使用

<template>
      <section class="container">
        <no-ssr placeholder="Codemirror Loading...">
          <codemirror v-model="code" 
                      :options="cmOption"
                      @cursorActivity="onCmCursorActivity"
                      @ready="onCmReady"
                      @focus="onCmFocus"
                      @blur="onCmBlur">
          </codemirror>
        </no-ssr>
      </section>
    </template>
    
    <script>
      export default {
        data() {
          const code =
    `<template>
      <h1>Hello World!</h1>
      <codemirror v-model="code" :options="cmOption"></codemirror>
    </template>
    <script>
      // import 'some-codemirror-resource'
      export default {
        data() {
          return {
            code: 'const A = 10',
            cmOption: {
              tabSize: 4,
              styleActiveLine: true,
              lineNumbers: true,
              line: true,
              foldGutter: true,
              styleSelectedText: true,
              mode: 'text/javascript',
              keyMap: "sublime",
              matchBrackets: true,
              showCursorWhenSelecting: true,
              theme: "monokai",
              extraKeys: { "Ctrl": "autocomplete" },
              hintOptions:{
                completeSingle: false
              }
            }
          }
        }
      }
    <\/script>
    <style lang="scss">
      @import './sass/mixins';
      @import './sass/variables';
      main {
        position: relative;
      }
    </style>`
          return {
            code,
            cmOption: {
              tabSize: 4,
              foldGutter: true,
              styleActiveLine: true,
              lineNumbers: true,
              line: true,
              keyMap: "sublime",
              mode: 'text/x-vue',
              theme: 'base16-dark',
              extraKeys: {
                'F11'(cm) {
                  cm.setOption("fullScreen", !cm.getOption("fullScreen"))
                },
                'Esc'(cm) {
                  if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false)
                }
              }
            }
          }
        },
        methods: {
          onCmCursorActivity(codemirror) {
            console.log('onCmCursorActivity', codemirror)
          },
          onCmReady(codemirror) {
            console.log('onCmReady', codemirror)
          },
          onCmFocus(codemirror) {
            console.log('onCmFocus', codemirror)
          },
          onCmBlur(codemirror) {
            console.log('onCmBlur', codemirror)
          }
        }
      }
    </script>
    
    <style lang="scss" scoped>
      .container {
        width: 60%;
        margin: 0 auto;
        padding: 50px 0;
        text-align: left;
      }
    </style>

参考[https://github.com/surmon-china/vue-codemirror/tree/master/examples/nuxt-ssr-example][https_github.com_surmon-china_vue-codemirror_tree_master_examples_nuxt-ssr-example]

文档[https://www.npmjs.com/package/vue-codemirror][https_www.npmjs.com_package_vue-codemirror]

[https_github.com_surmon-china_vue-codemirror_tree_master_examples_nuxt-ssr-example]: https://github.com/surmon-china/vue-codemirror/tree/master/examples/nuxt-ssr-example
[https_www.npmjs.com_package_vue-codemirror]: https://www.npmjs.com/package/vue-codemirror