CodeMirror 를 사용 하여 자신 만 의 하 이 라 이 트 를 가 진 온라인 코드 편집 기 를 만 듭 니 다.

전제 조건
이 글 을 쓰 는 목적 은 예전 에 프로젝트 에 CodeMirror 를 사용 한 적 이 있 기 때 문 입 니 다.온라인 코드 편집기 로 서 괜 찮 은 것 같 습 니 다.일부 사이트 에서 온라인 코드 편집 을 사용 한 적 이 있 습 니 다.물론 저 는 그들 이 무엇으로 만 들 었 는 지 모 르 겠 습 니 다.여기 서 저 는 회사 프로젝트 에 사 용 된 부분 을 뽑 아서 블 로 그 를 단독으로 썼 습 니 다.나중에 다시 사용 할 수 있 도록 추출 한 코드 를 GitHub 에 제출 합 니 다.
간단 한 소개
CodeMirror 는 온라인 에서 문법 하 이 라 이 트 를 지원 하 는 코드 편집기 입 니 다.홈 페이지
홈 페이지 만 봐 도 온라인 편집기 가 좀 못 생 겼 을 것 같 습 니 다.어쨌든 첫눈 에 저 에 게 준 느낌 은 이 렇 습 니 다.하지만 자신의 디 테 일 을 통 해 아름 다운 온라인 코드 편집 기 를 만 들 수 있 습 니 다.
홈 페이지 에서 그것 을 다운로드 할 수 있다.
다운로드 후 압축 을 풀 수 있 는 폴 더 에서 lib 아래 는 핵심 라 이브 러 리 와 핵심 css,mode 아래 는 다양한 지원 언어 문법 정의,theme 디 렉 터 리 아래 는 지원 하 는 테마 스타일 입 니 다.일반적으로 개발 에 서 는 lib 의 인용 과 mode 의 인용 을 추가 하면 됩 니 다.

어떻게 사용 합 니까?
다음 두 가 지 는 Code Mirror 를 사용 할 때 반드시 도입 해 야 하 는 것 입 니 다.

<link rel="stylesheet" href="codemirror-5.31.0/lib/codemirror.css" rel="external nofollow" />
<script src="codemirror-5.31.0/lib/codemirror.js"></script>

다음은 mode 디 렉 터 리 에서 편집기 에서 편집 할 언어 에 대응 하 는 js 파일 을 참조 합 니 다.Groovy 를 예 로 들 면:

<!--groovy    -->
<script src="codemirror-5.31.0/mode/groovy/groovy.js"></script>

자바 코드 도 하 이 라 이 트 를 지원 하려 면 인터넷 에서 다운로드 한 clike.js 를 도입 해 야 합 니 다.

<!--Java        -->
<script src="codemirror-5.31.0/clike.js"></script>

인 용 된 파일 은 대응 하 는 언어의 문법 하 이 라 이 트 를 지원 하 는 데 사 용 됩 니 다.
그리고 앞에서 말 했 듯 이 처음으로 Code Mirror 홈 페이지 에 들 어 갔 는데 그 편집기 들 이 못 생 겼 다 고 생각 합 니 다.그것 은 주제 가 못 생 겼 을 수도 있 습 니 다.저 는 괜 찮 은 주 제 를 추천 합 니 다.다음 과 같이 도입 하면 됩 니 다.

<!--  css  ，      -->
<link rel="stylesheet" href="codemirror-5.31.0/theme/dracula.css" rel="external nofollow" />

편집기 지원 코드 줄 을 접 으 려 면 다음 과 같이 하 십시오.

<!--      -->
<link rel="stylesheet" href="codemirror-5.31.0/addon/fold/foldgutter.css" rel="external nofollow" />
<script src="codemirror-5.31.0/addon/fold/foldcode.js"></script>
<script src="codemirror-5.31.0/addon/fold/foldgutter.js"></script>
<script src="codemirror-5.31.0/addon/fold/brace-fold.js"></script>
<script src="codemirror-5.31.0/addon/fold/comment-fold.js"></script>

이렇게 끌 어 들 였 으 면 좋 겠 는데,당연히 아니 지.
편집기 만 들 기
실제 항목 에 서 는 바디 의 전체 내용 을 편집기 의 용기 로 직접 사용 하지 않 습 니 다.가장 많이 사용 되 는 것 은 textarea 를 사용 하 는 것 이다.여 기 는 제 가 안에 textarea 를 사용 하 겠 습 니 다.

<!-- begin code -->
<textarea class="form-control" id="code" name="code"></textarea>
<!-- end code-->

다음은 편집 기 를 만 드 는 것 입 니 다.

//  DOM   id        
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
});

좀 단조 로 우 시 죠?
맞 아,나 는 안에서 그 에 게 속성 을 설정 할 수 있어.(내 가 처음에 도입 한 파일 들 을 충분히 이용 할 수 있어)

mode: "text/groovy",  //  groovy    
mode: "text/x-java", //  Java    
lineNumbers: true,	//    
theme: "dracula",	//    
lineWrapping: true,	//    
foldGutter: true,
gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
matchBrackets: true,	//    
//readOnly: true,    //  

더 많은 속성 을 볼 필요 가 있다 면 홈 페이지 에서 찾 을 수 있 습 니 다.현재 저 는 이 속성 만 사용 합 니 다!
아래 에 도 열거 합 시다.
indentUnit: integer
들 여 쓰기 단위,값 은 빈 칸 수,기본 값 은 2 입 니 다.
smartIndent: boolean
자동 들 여 쓰기,상하 문 에 따라 자동 들 여 쓰기(이전 줄 과 같은 들 여 쓰기)여 부 를 설정 합 니 다.기본 값 은 true 입 니 다.
tabSize: integer
tab 문자 의 너비,기본 값 은 4 입 니 다.
indentWithTabs: boolean
들 여 쓸 때 n*tab 너비 의 빈 칸 을 n 개의 tab 문자 로 바 꿀 필요 가 있 습 니까?기본 값 은 false 입 니 다.
electricChars: boolean
입력 이 현재 들 여 쓰 기 를 바 꿀 수 있 을 때 다시 들 여 쓰 시 겠 습 니까?기본 값 은 true 입 니 다.(mode 에서 만 들 여 쓰 기 를 지원 할 때 유효 합 니 다.)
specialChars: RegExp
자리 표시 자(placeholder)로 바 꿀 특수 문자 의 정규 표현 식 이 필요 합 니 다.가장 많이 사용 되 는 것 은 비 인쇄 문자 입 니 다.기본 값 은:/[\u0000-\u0019\u00ad\u200b-\u200f\u2028\u2029\ufeff]/입 니 다.
specialCharPlaceholder: function(char) → Element
이것 은 specialChars 옵션 에서 지정 한 문 자 를 매개 변수 로 받 는 함수 입 니 다.이 함 수 는 지정 한 문 자 를 표시 하 는 DOM 노드 를 만 듭 니 다.기본적으로 빨간색 점(•)을 표시 합 니 다.이 빨간색 점 은 앞의 특수 문자 인 코딩 이 있 는 알림 상자 가 있 습 니 다.
rtlMoveVisually: boolean
Determines whether horizontal cursor movement through right-to-left (Arabic, Hebrew) text is visual (pressing the left arrow moves the cursor left) or logical (pressing the left arrow moves to the next lower index in the string, which is visually right in right-to-left text). The default is false on Windows,and true on other platforms 플랫폼.
keyMap: string
단축 키 설정.기본 값 은 default,즉 codemorrir.js 내부 정의 입 니 다.기타
extraKeys: object
편집기 에 앞의 키 맵 과 다른 단축 키 를 연결 합 니 다.
lineWrapping: boolean
긴 줄 에 있 을 때 텍스트 는 줄 바 꾸 기(wrap)입 니까?스크롤(scroll)입 니까?기본 값 은 스크롤(scroll)입 니 다.
lineNumbers: boolean
편집기 왼쪽 에 줄 번 호 를 표시 할 지 여부 입 니 다.
firstLineNumber: integer
줄 번 호 는 어느 숫자 부터 계산 합 니까?기본 값 은 1 입 니 다.
lineNumberFormatter: function(line: integer) → string
함수 로 줄 번 호 를 설정 합 니 다.
gutters: array
추가 gutter 를 추가 합 니 다.값 은 CSS 이름 배열 일 것 입 니 다.모든 항목 은 gutter 배경 을 그 리 는 너비(선택 할 수 있 는 배경 도 있 습 니 다)를 정의 합 니 다.줄 번호 gutter 의 위 치 를 명확 하 게 설정 하기 위해 서 는 CodeMirror-linenumbers 클래스 도 포함 할 수 있 습 니 다.클래스 이름 은 setGutterMarker 에 전달 할 키 이름(keys)입 니 다.
fixedGutter: boolean
편집기 내용 에 따라 gutter 가 수평 으로 굴 러 갈 지(false)왼쪽 에 고정 할 지 설정 합 니 다(true 또는 기본 값).
scrollbarStyle: string
스크롤 바 설정.기본 값 은'native'입 니 다.원본 스크롤 바 를 표시 합 니 다.핵심 라 이브 러 리 는'null'스타일 도 제공 합 니 다.이 스타일 은 스크롤 바 를 완전히 숨 깁 니 다.Addons 는 더 많은 스크롤 바 모드 를 설정 할 수 있 습 니 다.
coverGutterNextToScrollbar: boolean
fixedGutter 가 활성화 되 고 수평 스크롤 바 가 존재 할 때 스크롤 바 맨 왼쪽 에 기본적으로 gutter 가 표 시 됩 니 다.이 설정 이 true 일 때 gutter 는 CodeMirror-gutter-filler 류 의 요소 로 가 려 집 니 다.
inputStyle: string
코드 미 러 가 입력 과 초점 을 처리 하 는 방식 을 선택 하 십시오.핵심 라 이브 러 리 는 textarea 와 contenteditable 입력 모드 를 정의 합 니 다.모 바 일 브 라 우 저 에 서 는 기본적으로 contenteditable 이 고 데스크 톱 브 라 우 저 에 서 는 기본적으로 textarea 입 니 다.contenteditable 모드 에서 IME 와 화면 리더 에 대한 지원 이 더 좋 습 니 다.
readOnly: boolean|string
편집기 만 읽 을 지 여부 입 니 다.미리 설 정 된 값'nocursor'로 설정 하면 읽 기 전용 설정 외 에 편집 영역 에 초점 을 맞 출 수 없습니다.
showCursorWhenSelecting: boolean
선택 할 때 커서 를 표시 할 지 여부 입 니 다.기본 값 은 false 입 니 다.
lineWiseCopyCut: boolean
사용 할 때 복사 하거나 자 를 때 텍스트 를 선택 하지 않 으 면 커서 가 있 는 줄 전 체 를 자동 으로 작 동 합 니 다.
undoDepth: integer
최대 취소 횟수,기본 값 은 200(선택 한 내용 변경 이벤트 포함)입 니 다.
historyEventDelay: integer
입력 하거나 삭제 할 때 과거 사건 을 일 으 키 기 전의 밀리초 수 입 니 다.
tabindex: integer
편집기 의 tabindex.
autofocus: boolean
초기 화 할 때 자동 으로 초점 을 가 져 올 지 여부 입 니 다.기본 상황 은 닫 혔 습 니 다.단,textarea 를 사용 하고 지정 한 값 이 없 을 때 자동 으로 true 로 설 정 됩 니 다.
dragDrop: boolean
드래그 를 허용 할 지 여부 입 니 다.기본 값 은 true 입 니 다.
allowDropFileTypes: array
기본 값 은 null 입 니 다.이 항목 을 설정 할 때 이 배열 에 포 함 된 파일 형식 만 편집기 에 끌 어 옵 니 다.파일 형식 은 MIME 이름 입 니 다.
cursorBlinkRate: number
커서 가 반 짝 이 는 간격,단 위 는 밀리초 입 니 다.기본 값 530.0 으로 설정 하면 커서 플래시 를 사용 하지 않 습 니 다.음 수 는 커서 를 숨 깁 니 다.
cursorScrollMargin: number
커서 가 시각 영역 경계 에 가 까 울 때 커서 는 위 와 아래 의 거리 입 니 다.기본 값 은 0 입 니 다.
cursorHeight: number
커서 높이.기본 값 은 1,즉 줄 높이 를 채 우 는 것 이다.일부 글꼴 에 대해 서 는 0.85 를 설정 하 는 것 이 더 좋아 보 입 니 다.
resetSelectionOnContextMenu: boolean
텍스트 를 선택 하고 컨 텍스트 메뉴 를 열 때 커서 를 클릭 한 곳 으로 이동 할 지 설정 합 니 다.기본 값 은 true 입 니 다.
workTime, workDelay: number
가짜 배경 스 레 드 를 통 해 워 크 타임 을 강조 한 다음 timeout 을 사용 하여 워 크 딜 레이 를 쉬 는 시간 이 길 습 니 다.기본 값 은 200 과 300 입 니 다.(이 기능 이 무슨 말 인지 전혀 모르겠다)
pollInterval: number
CodeMirror 가 대응 하 는 textarea 로 스크롤(데이터 쓰기)하 는 속 도 를 표시 합 니 다(초점 을 얻 었 을 때).대부분의 입력 은 이 벤트 를 통 해 캡 처 되 지만 일부 입력 법(예 를 들 어 IME)은 일부 브 라 우 저 에서 이 벤트 를 생 성하 지 않 기 때문에 데이터 스크롤 을 사용 합 니 다.기본 값 은 100 밀리초 입 니 다.
flattenSpans: boolean
기본적으로 CodeMirror 는 같은 class 를 사용 하 는 두 개의 span 을 하나 로 합 칩 니 다.이 설정 을 통 해 false 로 이 기능 을 사용 하지 않 습 니 다.
addModeClass: boolean
사용 할 때(기본적으로 사용 하지 않 음)태그 마다 태그 생 성 을 표시 하 는 mode 의 cm-m 로 시작 하 는 CSS 스타일 류 를 추가 합 니 다.예 를 들 어 XML mode 에서 생 성 된 표 시 는 cm-m-xml 류 를 추가 합 니 다.
maxHighlightLength: number
긴 줄 이 필요 할 때 응답 성능 을 유지 하기 위해 특정 위치 에 도 착 했 을 때 편집 기 는 다른 줄 을 일반 텍스트(plain text)로 직접 설정 합 니 다.기본 값 은 10000 이 며 인 피 니 티 로 설정 하여 이 기능 을 닫 을 수 있 습 니 다.
viewportMargin: integer
현재 보기 의 내용 위 와 아래로 스크롤 할 줄 수 를 지정 합 니 다.이것 은 스크롤 할 때 업데이트 할 줄 수 에 영향 을 줄 수 있 습 니 다.보통 기본 값 10 을 사용 해 야 합 니 다.인 피 니 티 로 모든 문 서 를 처음부터 끝까지 렌 더 링 할 수 있 도록 설정 할 수 있 습 니 다.메모:이렇게 설정 하면 큰 문 서 를 처리 할 때 성능 에 영향 을 줄 수 있 습 니 다.
코드 상자 의 크기 를 설정 하려 면 어떻게 해 야 합 니까?
editor.setSize('800px', '950px'); //코드 상자 의 길 이 를 설정 합 니 다.
그리고 코드 상자 에 값 을 부여 하려 면 어떻게 해 야 합 니까?
editor.setValue(""); //코드 상자 에 값 부여
editor.getValue(); //코드 상자 의 값 가 져 오기
다른 곳 에 새로운 속성 을 설정 하려 면 아래 와 같이 쓸 수 있 습 니 다.
editor.setOption("readOnly", true); //이와 유사 하 다
총결산
코드 미 러 를 어떻게 사용 하 는 지 대충 말씀 드 렸 으 니 효 과 를 살 펴 보 겠 습 니 다.

저 는 괜 찮 은 것 같 아 요!
안에 있 는 모든 코드 는 GitHub 에서 다운로드 할 수 있 습 니 다http://codemirror.net/
글 의 오리지널,전재 는 반드시 오리지널 주 소 를 명시 해 주 십시오.