集成在线代码编辑器codemirror

// 元素
<el-button @click="importFile">导入文件</div>
<div class="editor-body">
  <div ref="editor" class="editor-content" />
</div>
// 将导入的文件写入代码编辑器
<input ref="file" :key="fileKey" type="file" style="display:none" @change="fileChange">


// 数据
data() {
  return {
    myEditor: null,
    doc: '',
    fileKey: 0
  }
}


// 方法
importFile() {
  this.$refs.file && this.$refs.file.click()
},
fileChange() {
  if (this.$refs.file.files.length < 1) {
    console.error('请选择文件')
    return
  }
  const files = this.$refs.file.files
  this.fileKey++
  files[0}.text().then(data => {
    this.myEditor.setState(EditorState.create({
      extensions: this.getExtensions()
      doc: Text.of(this.strSplit(data))
    })
  })
},
// 编辑器方法
initEditor() {
  if (this.myEditor) return 
  this.myEditor = new EditorView({
    extensions: this.getExtensions(), // 自定义样式
    parent: this.$refs.editor, // 绑定容器
    doc: this.doc
  })
},
getExtensions（） {
  const extensions = [
    basicSetup,
    EditorView.theme({
      '.cc': {
        'color': '#ffdd2b'
      },
      、、、
    })
  ]
}