vue-codemirror 编辑器设置

参考：https://github.com/WhaleShark-Team/cobra
<codemirror v-model="source" :options="option" class="cm-s-material" ref="code" :class="{'important': !source}"></codemirror>

<div class="widget-list">
  <ul class="widget-trigger">
    <li>
      author：<span title="author" class="author">{{detail.commitAuthor}}</span>
    </li>
    <li>
      desc：<span class="desc">{{detail.desc}}</span>
    </li>
  </ul>
</div>

<script>
  import $ from 'jquery'
  import { codemirror } from 'vue-codemirror'
  import 'codemirror/lib/codemirror.css'
  import 'codemirror/theme/material.css'
  import 'codemirror/addon/fold/foldgutter.css'
  import 'codemirror/addon/dialog/dialog.css'
  import 'codemirror/addon/search/matchesonscrollbar.css'
  import 'codemirror/addon/scroll/simplescrollbars.css'
  import 'codemirror/addon/display/fullscreen.css'
  import 'codemirror/addon/fold/foldcode.js'
  import 'codemirror/addon/fold/foldgutter.js'
  import 'codemirror/addon/fold/markdown-fold.js'
  import 'codemirror/addon/fold/comment-fold.js'
  import 'codemirror/addon/fold/xml-fold.js'
  import 'codemirror/addon/fold/brace-fold.js'
  import 'codemirror/addon/display/placeholder.js'
  import 'codemirror/addon/display/fullscreen.js'
  import 'codemirror/addon/display/panel.js'
  import 'codemirror/addon/edit/matchbrackets.js'
  import 'codemirror/addon/edit/matchtags.js'
  import 'codemirror/addon/dialog/dialog.js'
  import 'codemirror/addon/search/searchcursor.js'
  import 'codemirror/addon/search/search.js'
  import 'codemirror/addon/scroll/annotatescrollbar.js'
  import 'codemirror/addon/search/matchesonscrollbar.js'
  import 'codemirror/addon/search/jump-to-line.js'
  import 'codemirror/addon/search/match-highlighter.js'
  import 'codemirror/addon/scroll/simplescrollbars.js'
  import 'codemirror/addon/selection/active-line.js'
  import 'codemirror/mode/markdown/markdown.js'
  import 'codemirror/mode/javascript/javascript.js'
  import 'codemirror/mode/css/css.js'
  import 'codemirror/mode/xml/xml.js'
  import 'codemirror/mode/yaml/yaml.js'
  import 'codemirror/mode/htmlmixed/htmlmixed.js'
  import 'codemirror/mode/php/php.js'
  import 'codemirror/mode/python/python.js'
  import 'codemirror/mode/ruby/ruby.js'
  import 'codemirror/mode/perl/perl.js'
  import 'codemirror/mode/lua/lua.js'
  import 'codemirror/mode/go/go.js'
  import 'codemirror/mode/cmake/cmake.js'
  import 'codemirror/mode/shell/shell.js'
  import 'codemirror/mode/sql/sql.js'
  import 'codemirror/mode/clike/clike.js'
  import 'codemirror/mode/properties/properties.js'

  export default {
    data () {
      return {
        option: {
          mode: 'php',
          lineNumbers: true,
          lineWrapping: true,
          matchBrackets: true,
          styleActiveLine: true,
          matchTags: {bothTags: true},
          indentUnit: 4,
          indentWithTabs: true,
          foldGutter: true,
          autofocus: false,
          readOnly: true,
          highlightSelectionMatches: {showToken: /\w/, annotateScrollbar: true},
          gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter']
        }
      }
    },
    created: function () {
      this.getData()
    },
    methods: {
      getData: function () {},
      onReady: function () {
        let that = this
        // 获取DOM
        let codeMirrorDOM = that.$refs.code.codemirror
        // 设置文件语言
        that.option.mode = that.detail.language
        // 为编辑器设置内容
        codeMirrorDOM.getDoc().setValue('编辑器内容')
        // 设置浮动窗口
        codeMirrorDOM.operation(function () {
          function initWidget () {
            $('.detail-desc').text('描述文字')
            $('.detail-author').text('作者')
          }
          initWidget()
          // 复制一份注释内容
          let widgetTriggerLine = $('.widget-trigger').clone().get(0)
          let widgetConfig = {
            coverGutter: false,
            noHScroll: false
          }
          // 获取高亮行
          let lineNumber = parseInt('具体的代码行') - 1
          // 在高亮行下添加注释信息
          codeMirrorDOM.addLineWidget(lineNumber, widgetTriggerLine, widgetConfig)
          // 设置高亮行在编辑器中居中显示
          let h = codeMirrorDOM.getScrollInfo().clientHeight
          let coords = codeMirrorDOM.charCoords({
            line: lineNumber,
            ch: 0
          }, 'local')
          codeMirrorDOM.scrollTo(null, (coords.top + coords.bottom - h) / 2)
          codeMirrorDOM.setCursor({line: lineNumber, ch: 0})
        })
      }
    },
    components: {
      codemirror
    },
    watch: {
      $route (curVal, oldVal) {
        this.getData()
      }
    }
  }
</script>
dounai1306 / dounai1306.github.io

vue-codemirror 编辑器设置 #64
