如何在Angular中使用在线代码编辑器-CodeMirror

前言

想要在项目中展示某些代码块，并且可以自如的修改某些代码，甚至进行代码的运行，同时还希望可以提供多种主题展示~ 那么CodeMirror就很适合做这件事情啦，接下来我们主要看一下CodeMirror在Angular中的使用~

安装CodeMirror

使用命令如下，同时安装@ctrl/ngx-codemirror与codemirror
npm install @ctrl/ngx-codemirror codemirror

项目中引入

module文件中，这里我是在app.module.ts中进行引入的

import { FormsModule } from '@angular/forms';
import { NgModule } from '@angular/core';
import { CodemirrorModule } from '@ctrl/ngx-codemirror';

  // add to imports:
  @NgModule({
    imports: [
    BrowserModule,
    FormsModule,
    CodemirrorModule,
    ...
  ]
  })

html文件中

<ngx-codemirror
  style="width: 100%"
  [(ngModel)]="code"
  [options]="editorOptions"
></ngx-codemirror>

对应组件的ts中逻辑

public editorOptions = {
    lineNumbers: true,  // 是否显示行号
    mode: 'javascript', // 显示代码类型
    theme: 'default'    // 显示的主题是什么，前提需要在main.ts中进行引入才可以
}

public code = `
 for(let i=0; i<9; i++){
     console.log(i);
 }
`

main.js中引入相应的主题

// 这是引入的两种显示主题，可以根据需求引入更多的主题
// 这里引入的显示主题，要与editorOptions中的mode对应上
import 'codemirror/mode/javascript/javascript';
import 'codemirror/mode/markdown/markdown';

在全局style.css文件中引入主题样式

// codemirror提供了几十种主题，可参考文章后边官网介绍
// 这里引入的样式要与editorOptions中的theme对应上

@import '~codemirror/lib/codemirror';
@import '~codemirror/theme/material';

展示

default主题下的展示

material主题下的展示

修改编辑器的大小

:host ::ng-deep .CodeMirror{
    height: 500px;
    width: 600px;
}

参考与Tips

CodeMirror 官网
ngx-codemirroe github
在使用过程中，如果出现一些奇怪的问题，要考虑angular的版本，以及codemirror的版本，我在开发过程中就是手动指定了codemirror的版本是^5.65.6