codemirror editor vue3 다운로드 -Codemirror codemirror editor vue3 소스 코드 다운로드

codemirror editor vue3

기타 리소스

v2.8.0

다운로드

소개

简体中文

vue3의 Codemirror 구성 요소. 이 구성 요소는 Codemirror 5를 기반으로 개발되며 VUE3 만 지원됩니다.

공식적으로 지원되는 모드 외에도 로그 출력 프레젠테이션 모드가 추가되지만 모든 시나리오에 반드시 적합한 것은 아닙니다.

전체 문서 및 더 많은 사례는 Codemirror-editor-vue3 문서를 확인하십시오.

설치하다

npm install codemirror-editor-vue3 codemirror@^5 -S

yarn add codemirror-editor-vue3 codemirror@ " >=5.64.0 <6 "

pnpm i codemirror-editor-vue3 codemirror@^5 -S

프로젝트에 TypeScript 지원이 필요한 경우 '@type/codemirror'종속성을 설치해야합니다.

npm install @types/codemirror -D

글로벌 구성 요소를 등록하십시오

글로벌 등록 구성 요소는 권장하지 않으므로 올바르게 얻을 수없는 템플릿의 프롬프트 유형이 발생합니다.

main.js:

 import { createApp } from "vue" ;
import App from "./App.vue" ;
import { InstallCodeMirror } from "codemirror-editor-vue3" ;

const app = createApp ( App ) ;
app . use ( InstallCodeMirror ) ;
app . mount ( "#app" ) ;

글로벌 등록 구성 요소 이름은 Codemirror이거나 구성 요소 이름을 사용자 정의 할 수 있습니다.

 app . use ( InstallCodeMirror , { componentName : "customName" } ) ;

구성 요소에 사용됩니다

< template >
  < Codemirror
    v-model:value = " code "
    :options = " cmOptions "
    border
    placeholder = " test placeholder "
    :height = " 200 "
    @change = " change "
  />
</ template >

< script >
import Codemirror from " codemirror-editor-vue3 " ;

// placeholder
import " codemirror/addon/display/placeholder.js " ;

// language
import " codemirror/mode/javascript/javascript.js " ;
// placeholder
import " codemirror/addon/display/placeholder.js " ;
// theme
import " codemirror/theme/dracula.css " ;

import { ref } from " vue " ;
export default {
  components : { Codemirror },
  setup () {
    const code = ref ( `
var i = 0;
for (; i < 9; i++) {
  console.log(i);
  // more statements
} ` );

    return {
      code,
      cmOptions : {
        mode : " text/javascript " , // Language mode
        theme : " dracula " , // Theme
      },
    };
  },
};
</ script >

언어 강조

다음 링크를 클릭하여 해당 언어 사례를 볼 수 있습니다.

자바 스크립트
JSON
CSS
HTML
apl
얌

더 많은 사례가 점차 추가되고 있으며 더 많은 언어 모드를 달성하기 위해 문서를 참조 할 수도 있습니다.

구성 요소 소품

이름	설명	유형	기본
값 (V- 모델)	편집기 내용	`string`	"" "
옵션	Codemirror5의 구성 옵션	editorConfiguration	default_options
자리 표시 자	Codemirror 관련 파일을 소개하는 편집기 자리 표시 자 콘텐츠	`string`	"" "
국경	편집기 테두리를 표시할지 여부	`boolean`	`false`
너비	너비	`string`	`100%`
키	키	`string`	`100%`
오리지널 스타일	원래 스타일을 사용 하여이 구성 요소의 스타일의 두 번째 수정을 비활성화합니다 (폭, 높이 및 테두리에는 영향을 미치지 않음).	`boolean`	`false`
cheepcursorinend	항상 마지막 줄에 마우스 위치를 유지하십시오	`boolean`	`false`
병합	병합 모드는 Diff 패턴으로도 사용할 수 있습니다	`boolean`	`false`

이벤트

구성 요소 이벤트

다음 세 가지는이 구성 요소가 캡슐화 한 이벤트 만 있습니다. 더 많은 이벤트 Codemirror 이벤트를 참조하십시오

이벤트 이름	설명	매개 변수
`change`	값 또는 인스턴스 변경	`(value: string, cm: Editor) => void`
`input`	입력	`(value: string) => void`
`ready`	Codemirror 구성 요소가 장착됩니다	`(cm: Editor) => void;`

Codemirror 이벤트

다음 행사는 Codemirror5의 공식 이벤트입니다. 자세한 내용은 Codemirror 이벤트에 대해서는 공식 문서를 참조 할 수 있습니다. 예를 들어이 구성 요소를 사용하여 구성 요소를 통해 직접 이벤트를 바인딩 할 수 있습니다.

< Codemirror
  v-model : value = " code "
  : options = " { mode: ' text/x-vue ' , theme: ' default ' } "
  border
  placeholder="test-placeholder"
  : height = " 200 "
  @ change = " onChange "
  @ blur = " onBlur "
  @ focus = " onFocus "
  @ scroll = " onScroll "
/>