33.CodeMirror编辑器如何在vue项目中使用

1.封装组件

<template>
  <div className="yaml-editor">
    <textarea ref="textarea"/>
    <div>
      <span style="margin-right: 10px">Ctrl + F</span>
      <el-button @click="find">查找</el-button>
    </div>
  </div>
</template>

<script>
import CodeMirror from 'codemirror'
import 'codemirror/addon/lint/lint.css'
import 'codemirror/lib/codemirror.css'
import 'codemirror/theme/monokai.css'
import 'codemirror/theme/midnight.css'
import 'codemirror/theme/mdn-like.css'
import 'codemirror/mode/yaml/yaml'
import 'codemirror/addon/lint/lint'
import 'codemirror/addon/lint/yaml-lint'

// 代码折叠
import 'codemirror/addon/fold/foldgutter.css'
import 'codemirror/addon/fold/foldcode.js'
import 'codemirror/addon/fold/foldgutter.js'
import 'codemirr