CodeMirror 6을 터치해 보십시오.

API가 알차고 맞춤 제작이 용이한 코드미러라는 와이시우그 편집기가 개발 중인 버전 6은 스마트폰으로 이동해도 좋은 효과를 느낄 수 있다는 것을 목표로 하고 공동 편집 기능을 쉽게 구현할 수 있다고 판단해 해봤습니다!
완성물

(편집기를 세 번 클릭하면 편집이 가능합니다!)

Hello World!

✍️ 먼저 편집기를 설정합니다.CodeMirror 6은 핵심에만 최소한의 기능을 갖추고 있으며 어제 추가 Extension을 통해 구현되었습니다.
✍️ 그래서 원본 코드가 작아진다(지금은 모두 한 창고에 놓여 있기 때문에 작지 않나요?)필요한 것만 하니까 빨라요.
이렇게 되면 글씨만 쓸 수 있다.

import { EditorView } from "@codemirror/next/view";
import { EditorState } from "@codemirror/next/state";

let myView = new EditorView({
  state: EditorState.create({
    doc: "hello world!",
    extensions: []
  })
});

document.body.appendChild(myView.dom);

히스토리 기능 추가

✍️ 확장 기능 추가 시 이렇게 쓰기
✍️ 히스토리 기능 및 주요 맵 Extension 추가
✍️ 설치 방법을 배울 때.영화를 보면 이해하기 쉽다
✍️ baseKeymap이 일본어로 바뀔 때 행동이 좀 이상해요.
이렇게 되면 원상태로 회복할 수 있다.

import {
  history,
  redo,
  redoSelection,
  undo,
  undoSelection
} from "@codemirror/next/history";
import { keymap } from "@codemirror/next/keymap";
import { baseKeymap } from "@codemirror/next/commands";
import { EditorView } from "@codemirror/next/view";
import { EditorState } from "@codemirror/next/state";

let myView = new EditorView({
  state: EditorState.create({
    doc: "hello world!",
    extensions: [
      history(),
      keymap({
        "Mod-z": undo,
        "Mod-Shift-z": redo,
        "Mod-u": view => undoSelection(view) || true,
        "Mod-Shift-u": redoSelection,
        "Ctrl-y": undefined
      }),
      keymap(baseKeymap),
    ]
  })
});

document.body.appendChild(myView.dom);

행 번호 설정

✍️ 간단
줄 번호를 설정하면 겉모습이 변하고 즐거워요.

import {
  history,
  redo,
  redoSelection,
  undo,
  undoSelection
} from "@codemirror/next/history";
import { keymap } from "@codemirror/next/keymap";
import { baseKeymap } from "@codemirror/next/commands";
import { lineNumbers} from '@codemirror/next/gutter'
import { EditorView } from "@codemirror/next/view";
import { EditorState } from "@codemirror/next/state";

let myView = new EditorView({
  state: EditorState.create({
    doc: "hello world!",
    extensions: [
      history(),
      keymap({
        "Mod-z": undo,
        "Mod-Shift-z": redo,
        "Mod-u": view => undoSelection(view) || true,
        "Mod-Shift-u": redoSelection,
        "Ctrl-y": undefined
      }),
      keymap(baseKeymap),
      lineNumbers()
    ]
  })
});

document.body.appendChild(myView.dom);

데모

구문 강조 추가

✍️ 처음부터 js와 html, css를 준비했습니다.
✍️ typescript를 사용하면 모듈을 쉽게 찾을 수 있습니다
문법 하이라이트를 넣으면 편집기 감각이 증가한다.

import {
  history,
  redo,
  redoSelection,
  undo,
  undoSelection
} from "@codemirror/next/history";
import { html } from "@codemirror/next/lang-html";
import { defaultHighlighter } from "@codemirror/next/highlight";
import { keymap } from "@codemirror/next/keymap";
import { baseKeymap } from "@codemirror/next/commands";
import { lineNumbers } from "@codemirror/next/gutter";
import { EditorView } from "@codemirror/next/view";
import { EditorState } from "@codemirror/next/state";

let myView = new EditorView({
  state: EditorState.create({
    doc: "hello world!",
    extensions: [
      history(),
      keymap({
        "Mod-z": undo,
        "Mod-Shift-z": redo,
        "Mod-u": view => undoSelection(view) || true,
        "Mod-Shift-u": redoSelection,
        "Ctrl-y": undefined
      }),
      keymap(baseKeymap),
      lineNumbers(),
      html(),
      defaultHighlighter
    ]
  })
});

document.body.appendChild(myView.dom);

끝맺다