使用 Angular 12 设置 CodeMirror 6答案

【问题标题】：Setup CodeMirror 6 with Angular 12使用 Angular 12 设置 CodeMirror 6
【发布时间】：2023-02-17 00:19:47
【问题描述】：

当我尝试在 codemirror v6 中设置一个带有角度的编辑器时，由于它与以前的 v5.X 不同，因此设置起来很困难。在设置 codemirror 基本编辑器时需要帮助。谢谢。

import {EditorState, EditorView, basicSetup} from "@codemirror/basic-setup";
import {javascript} from "@codemirror/lang-javascript";


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  
  // Define var here...
  title = 'cEditor';
  @ViewChild('editor') editor: any;

  ngOnInit() {
    this.editor = new EditorView({
      state: EditorState.create({
        extensions: [basicSetup, javascript()]
      }),
      parent: document.body
    })
  }
}

【问题讨论】：

标签： angular codemirror codemirror-6

【解决方案1】：

你快到了，

更新导入。

import { AfterViewInit, Component, Inject } from '@angular/core';
import { basicSetup} from "codemirror";
import { EditorState } from '@codemirror/state';
import { EditorView } from '@codemirror/view';
import { javascript } from "@codemirror/lang-javascript";
import { DOCUMENT } from '@angular/common';

AfterViewInit 优于 ngOnInit，因为有引用该元素的工作。

当您使用 body 设置父级时，不要忘记在构造函数中声明 document

constructor(@Inject(DOCUMENT) private document: Document) {}

就是这样！！！。

这会像对我一样帮助你。 CodeMirror 5 to 6 Migration Guide

你也可以检查这个。

开始前请确保如下：

@codemirror/基本设置 --> npm install codemirror@6.0.1
basicSetup，此扩展不允许自定义。

【讨论】：