React使用CodeMirror (代码编译器标签) 笔记

React使用CodeMirror (代码编译器标签) 笔记：

1. 下载CodeMirror：

• 下载CodeMirror：

  由于新版的CodeMirror下载的包少很多东西，这里我们下载老版的

  npm install codemirror@5.62.3
  

• 下载react-codemirror：

  npm install react-codemirror
  npm i --save-dev @types/react-codemirror
  

2. 使用CodeMirror：

• 导入CodeMirror组件：

  import CodeMirror from "react-codemirror"
  

  这里可能会问为什么不使用react-codemirror2？

  这是因为react-codemirror2的CodeMirror标签在加载过程中会被重复加载两次，也就是在前端显示两个CodeMirror标签，所以我们这里不用react-codemirror2。

• 引入核心文件：

  import "codemirror/lib/codemirror.js"
  import "codemirror/lib/codemirror.css"
  

• 引入其它的文件 (用于配置CodeMirror标签的一些属性)：

  // 引入代码模式
  import 'codemirror/mode/javascript/javascript'
  // 引入背景主题
  import "codemirror/theme/yonce.css"
  ...
  

• 在前端调用CodeMirror标签

  <CodeMirror
      value='console.log(10)' // 设置CodeMirror标签的初始值
      // 设置CodeMirror标签的相关参数
  	options={{
          mode: 'javascript', // 设置该代码编译器所编辑的语言
          theme: "yonce", // 代码编译器主题
          lineNumbers: true // 显示行号
      }}
      // 编译器内容变化后，输出变化后的内容  
      onChange={(code) => {
          console.log(code)
      }}
  />
  

• 当前效果如下：