CodeEditor 코드 에디터

원문 보기 위키 갱신 2026.10.11

monaco editor를 기반으로 페이지에 코드 편집 기능을 더해 줘요.

출처: 문서

본문

monaco editor는 문법 처리를 web Worker로 수행해요. 그래서 문법을 처리하는 Worker를 로드해야 하는데, 설정 방법은 공식 튜토리얼을 참고하세요.

기본 사용법

:::demo v-model로 에디터 내용을 양방향 바인딩해요. options 파라미터는 monaco editor 정의를 참고하세요.

<template>
  <d-code-editor v-model="code" :options="{ language: 'typescript' }" style="height: 220px"></d-code-editor>
</template>

<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const code = ref(`export class cell {
    public row:number;
    public col: number;
    public live: boolean;

    constructor(row: number, col: number, live: boolean) {
        this.row = row;
        this.col = col;
        this.live = live;
    }
}`);

    return { code };
  },
});
</script>

:::

코드 하이라이트

:::demo 코드 블록 하나를 하이라이트해요

<template>
  <d-button variant="solid" color="primary" @click="handleCodeChange" style="margin-bottom:8px">切换 Code 内容</d-button>
  <pre v-d-code-highlight :data-lang="lang" style="width: 500px" v-html="code"></pre>
</template>
<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const codeStr1 = `/* Some example CSS */

@import url("something.css");

body {
  margin: 0;
  padding: 3em 6em;
  font-family: tahoma, arial, sans-serif;
  color: #000;
}

#navigation a {
  font-weight: bold;
  text-decoration: none !important;
}

h1 {
  font-size: 2.5em;
}

h2 {
  font-size: 1.7em;
}

h1:before, h2:before {
  content: "some contents";
}

code {
  font-family: courier, monospace;
  font-size: 80%;
  color: #418A8A;
}`;

    const codeStr2 = `export class cell {
    public row:number;
    public col: number;
    public live: boolean;

    constructor(row: number, col: number, live: boolean) {
        this.row = row;
        this.col = col;
        this.live = live;
    }
}`;
    const code = ref(codeStr1);
    const lang = ref(`css`);

    const handleCodeChange = () => {
      if (lang.value === 'css') {
        lang.value = 'typescript';
        code.value = codeStr2;
      } else {
        lang.value = 'css';
        code.value = codeStr1;
      }
    };

    return { code, lang, handleCodeChange };
  },
});
</script>

:::

CodeEditor 파라미터

파라미터	타입	기본값	설명
v-model	`string`	''	선택, 에디터 콘텐츠 전달
mode	Mode	'normal'	선택, 에디터 모드
original-text	`string`	''	선택, diff 모드에서의 원본 비교 텍스트
theme	Theme	'light'	선택, 에디터 테마
auto-height	`boolean`	false	선택, 에디터 높이의 콘텐츠 자동 맞춤 여부
refresh-all	`boolean`	false	선택, 전체 댓글 새로고침 필요 여부
offset-left	`number`	--	선택, 전달된 domNode의 왼쪽 오프셋
add-comment-icon	`string`	''	선택, 왼쪽 댓글 추가 아이콘
expand-comment-icon	`string`	''	선택, 왼쪽 댓글 펼치기 아이콘
options	Options	{}	선택, 에디터 옵션. 참고
mouse-target-type	monaco.editor.MouseTargetType	[2, 4]	선택, 마우스 클릭 시 이벤트 영역 반환
editor-decorations	Decoration[]	[]	선택, 에디터 측면 장식
comments	Comment[]	[]	선택, 코드 리뷰 콘텐츠

CodeEditor 이벤트

이벤트	콜백 파라미터	설명
after-editor-init	`Function(instance: IStandaloneCodeEditor \| IStandaloneDiffEditor)`	초기화 완료 이벤트. monaco-editor 인스턴스 반환
click	`Function(event: IEditorMouseEvent)`	에디터의 서로 다른 영역 클릭 시 반환 이벤트

CodeHighlight 파라미터

아직 없어요.

타입 정의

Mode

type Mode = 'normal' | 'diff' | 'review';

Theme

type Theme = 'light' | 'dark';

Options

type Options = monaco.IEditorConstructionOptions;

Decoration

interface Decoration {
  lineNumber: number;
  icon?: string;
  customClasses?: string;
  glyphClassName?: string;
}

Comment

interface Comment {
  lineNumber: number;
  isExpanded: boolean;
  domNode?: HTMLElement;
  heightInPx?: number;
  allowEditorOverflow?: boolean;
  offsetLedt?: number;
}

IStandaloneCodeEditor

type IStandaloneCodeEditor = monaco.IStandaloneCodeEditor;

IStandaloneDiffEditor

type IStandaloneDiffEditor = monaco.IStandaloneDiffEditor;

더 알아보기 (Learn more)

CodeEditor는 monaco editor 기반으로 코드 편집과 하이라이트, diff, 코드 리뷰 기능을 제공해요. 더 자세한 내용은 공식 문서에서 확인할 수 있어요.