simple code editor
2.0.9
vue.js 지원 지원
웹 사이트 : Simple-Code-Editor.vicuxd.com
200 개 이상의 테마로 읽기 전용 및 편집 모드를 지원하는 것은 쉽게 사용하기 쉽습니다. 브라우저에서 직접 사용하거나 NPM 패키지를 통해 가져올 수 있습니다.
simple-code-editor 패키지를 사용할 수있는 두 가지 일반적인 방법이 있습니다.
1 단계. CSS 파일을 추가하십시오.
< link rel =" stylesheet " href =" themes.css " />
< link rel =" stylesheet " href =" themes-base16.css " />
< link rel =" stylesheet " href =" simple-code-editor.css " /> 2 단계. vue.js 파일 뒤에 JavaScript 파일을 추가하십시오.
< script src =" highlight.min.js " > </ script >
< script src =" simple-code-editor.js " > </ script >3 단계. 구성 요소를 선언하고 사용자 정의 태그를 HTML 템플릿에 사용합니다.
const app = Vue . createApp ( {
components : {
"code-editor" : CodeEditor ,
} ,
} ) ; < code-editor > </ code-editor >1 단계. NPM에서 패키지 설치 :
npm install simple-code-editor2 단계. 모듈 및 등록 가져 오기.
import hljs from 'highlight.js' ;
import CodeEditor from "simple-code-editor" ;
export default {
components : {
CodeEditor ,
} ,
} ; < CodeEditor > </ CodeEditor > Boolean 기본값 : false
설명 : 편집 가능 여부를 활성화하십시오
< CodeEditor :read-only =" true " > </ CodeEditor >String 기본값 : unset
설명 : 정적 컨텐츠 설정. 데이터 바인딩이 필요한 경우 속성을 사용하십시오 : v-model
< CodeEditor value =" console.log(13) " > </ CodeEditor >설명 : 양식 입력 요소 또는 구성 요소의 출력 값에 따라 다릅니다.
< CodeEditor v-model =" demo " > </ CodeEditor > < CodeEditor v-model =" demo " > </ CodeEditor >Boolean 기본값 : false
설명 : 줄 번호가 표시되거나 표시되지만 랩 텍스트 모드에서는 할 수 없습니다.
< CodeEditor :line-nums =" true " > </ CodeEditor >Array 기본값 : [["javascript", "JS"]]
설명 : [[ "언어 이름", "디스플레이 이름"], [ "언어 이름", "디스플레이 이름"], ...]. 다중 언어 설정은 언어 선택기를 자동으로 활성화하고 언어 이름이 필요하며 표시 이름은 선택 사항입니다.
< CodeEditor :languages =" [['cpp', 'C++']] " />여러 언어 :
< CodeEditor :languages =" [['cpp', 'C++'],['python', 'Python'],['php', 'PHP']] " />Number 기본값 : 2
< CodeEditor :tab-spaces =" 4 " > </ CodeEditor >Boolean 기본값 : false
설명 : 랩 텍스트를 활성화합니다
< CodeEditor :wrap =" true " > </ CodeEditor >Boolean 기본값 : true
설명 : 헤더가 표시되도록 활성화합니다
< CodeEditor :header =" true " > </ CodeEditor >Boolean 기본값 : true
설명 : 언어 이름이 표시되거나 표시되지 않습니다
< CodeEditor :display-language =" false " > </ CodeEditor >Boolean 기본값 : true
설명 : 사본 아이콘을 활성화하여 표시 여부를 표시합니다
< CodeEditor :copy-code =" false " > </ CodeEditor >String 기본값 : github-dark
설명 : 200 개 이상의 테마를 자유롭게 전환하고 모든 테마를 확인하십시오.
< CodeEditor theme =" github-dark " > </ CodeEditor >String 기본값 : 17px
< CodeEditor font-size =" 20px " > </ CodeEditor >String 기본값 : 540px
< CodeEditor width =" 100% " > </ CodeEditor >String 기본값 : auto
설명 : 컨테이너의 높이는 기본적으로 적응 적이며 특정 값으로 설정할 수 있으며 스크롤 막대는 오버 플로우와 함께 작동합니다.
< CodeEditor height =" 150px " > </ CodeEditor >String 기본값 : unset
< CodeEditor min-width =" 200px " > </ CodeEditor >String 기본값 : unset
< CodeEditor min-height =" 200px " > </ CodeEditor >String 기본값 : unset
< CodeEditor max-width =" 1000px " > </ CodeEditor >String 기본값 : unset
< CodeEditor max-height =" 200px " > </ CodeEditor >String 기본값 : 20px
< CodeEditor padding =" 30px " > </ CodeEditor >String 기본값 : 12px
< CodeEditor border-radius =" 4px " > </ CodeEditor >String 기본값 : 110px
설명 : 언어 목록의 너비
< CodeEditor lang-list-width =" 150px " > </ CodeEditor >String 기본값 : auto
설명 : 언어 목록의 높이
< CodeEditor lang-list-height =" 70px " > </ CodeEditor >Boolean 기본값 : false
설명 : 기본적으로 표시 할 언어 목록 활성화
< CodeEditor :lang-list-display =" true " > </ CodeEditor >String 기본값 : 0
< CodeEditor z-index =" 6 " > </ CodeEditor >Boolean 기본값 : false
설명 : Textarea가 기본적으로 집중할 수 있도록 활성화
< CodeEditor :autofocus =" true " > </ CodeEditor > 설명 : 현재 언어를 인수로 전달하십시오
< CodeEditor @lang =" getLanguage " > </ CodeEditor > getLanguage ( lang ) {
console . log ( "The current language is: " + lang ) ;
}설명 : 정적 내용을 인수로 전달하십시오
< CodeEditor @content =" getContent " > </ CodeEditor > getContent ( content ) {
console . log ( "The content is: " + content ) ;
}설명 : Textarea 요소를 인수로 전달하십시오
< CodeEditor @textarea =" focus " > </ CodeEditor > focus ( node ) {
node . focus ( ) ;
}
