codemirror--打造在线代码编辑器

npm包-codemirror
用户手册-英文

引入

npm i codemirror

<template>
  <el-dialog :title="`编辑数据-${title}`" :visible.sync="visible" width="60%">
    <textarea class="code"></textarea>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import codemirror from 'codemirror'
import 'codemirror/mode/javascript/javascript'

export default {
  data() {
    return {
      visible: false,
      title: ''
    }
  },
  methods: {
    show(item) {
      console.log('#setting-dialog')
      console.log(item)
      this.title = item.name
      this.visible = true
      this.$nextTick(() => {
        this.$codemirror || (this.$codemirror = codemirror.fromTextArea(this.$el.querySelector('.code'), {
          mode: { name: 'javascript', json: true },
          theme: 'monokai',
          lineWrapping: true,
          smartIndent: true,
          styleActiveLine: true,
          autoRefresh: true
        }))
        this._config = item.config
        this.$codemirror.setOption('value', JSON.stringify(item.config, null, '\t'))
      })
    },
    submit() {
      const setting = JSON.parse(this.$codemirror.getValue())
      if (setting.name !== this.$route.query.template) {
        this.$message.error('模板名字不一致')
      } else {
        window.$editor.experiments.find(x => x.config === this._config).config = setting
        window.$editor.timestamp = Date.now()
        this.visible = false
      }
    }
  }
}
</script>

<style lang="scss">
@import '~codemirror/lib/codemirror.css';
@import '~codemirror/theme/monokai.css';
.code {
  height: 400px;
  opacity: 0;
}
.CodeMirror {
  height: 400px;
  &-scroll {
    font-size: 14px;
  }
}
</style>

参考

使用 CodeMirror 打造在线代码编辑器