1.code-mirror 代码编辑器

Question

Introduction

• 一个 Web 页面上嵌套的代码编辑器
• 只提供核心的编辑功能，并不提供其他自动完成、IDE 功能等
• 它提供了一些额外的 API 可以完成其他功能，此处，一些其他插件可以完成更多功能
• 例如缩进、高亮等，完全不在话下

Related Url

CodeMirror

Installation

npm i codemirror
# or
引用静态 url

Usage

• 一般而言，使用静态 url 引入需要引入以下几个文件
  • 核心 core.js
  • 核心 core.css
  • 主题 Css theme.css
  • Mode.js
• 而基于现在使用模块化工具的情况比较多，我们举例使用在 webpack 中如何使用：
• 查看例子： ajimide/code-mirror

import CM from 'codemirror'
import 'codemirror/lib/codemirror.css'
import 'codemirror/mode/javascript/javascript.js'
import 'codemirror/theme/3024-day.css'

    CM(document.body, {
      value: `function foo () {
        window.alert('foo')
      }
      `,
      mode: 'javascript'
    })

Others

其他有如 vue-codemirror 也是一些不错的基于 codemirror 的插件