소스 코드의 편집기 구성 요소가 필요한 프로젝트를 수행 할 때 그 편집기가 입력 된 구문을 강조하는 방법을 원했습니다. Codemirror, Ace 및 Monaco와 같은 이와 같은 프로젝트가 있지만, 내가 원하는 것처럼 구문 강조 표시가있는 편집 가능한 텍스트 라어가 아니라 무거운 가중치의 완전한 편집자입니다.
약간의 고정이 걸렸지 만, 일을하는 일을 만들었고 내가 한 방식을 공유하고 싶었습니다. 왜냐하면 인기있는 구문 강조 라이브러리를 HTML의 편집 기능과 통합하고 몇 가지 흥미로운 엣지 케이스를 고려해야하기 때문입니다.
우리가 파는 동안 스핀을주십시오!
제안 후, 나는 이것을 GitHub에서 사용자 정의 요소로 출시 했으므로 웹 페이지의 구성 요소를 단일
따라서 스스로 작동하지 않는 것 같습니다. 그러나 나는 왜 둘 다하지 않습니까?
나는 구문 높이가
<code> <em>와</em> 텍스트를 페이지에 추가하고 JavaScript 함수를 사용하여 <fre> <code> oninput의 내부 텍스트 내용을 만들었습니다. 또한 <fre> <code> 결과에 aria-hidden 속성을 추가하여 스크린 리더가 <textreae>에 입력 된 내용 만 읽지 않고 두 번 읽지 않고 읽습니다.<pre rel="HTML" data-line=""> <textarea oninput="update (this.value);"> </textarea> <pre aria-hidden="true">
함수 업데이트 (텍스트) {
result_element = document.querySelector ( "#Highlighting-Content");
// 코드를 업데이트합니다
result_element.innerText = 텍스트;
// syntax 하이라이트
prism.highlightlement (result_element);
}이제 Textarea가 편집되면 (키보드의 누르기 키가 다시 등장 할 때) 구문 높이의 코드가 변경됩니다. 우리가 얻을 수있는 몇 가지 버그가 있지만, 별도의 TextRea가 아닌 구문 하이라이트 요소를 직접 편집하는 것처럼 보이도록 먼저 집중하고 싶습니다.
아이디어는 요소를 눈에 띄게 병합하여 실제로 직장에 두 개의 요소가있을 때 하나의 요소와 상호 작용하는 것처럼 보입니다. 기본적으로
#EDITING, #Highlighting {
/ * 두 요소 모두 동일한 텍스트와 공간 스타일이 필요하므로 서로 직접 위에 있습니다 */
여백 : 10px;
패딩 : 10px;
국경 : 0;
너비 : calc (100% -32px);
높이 : 150px;
}
#EDITING, #Highlighting, #Highlighting * {
/ * 또한 강조 표시에 텍스트 스타일을 추가하십시오 */
글꼴 크기 : 15pt;
유대 가족 : 모노 스페이스;
라인 높이 : 20pt;
}그런 다음 우리는 그것들을 서로 바로 위에 놓고 싶습니다.
#EDITING, #Highlighting {
위치 : 절대;
상단 : 0;
왼쪽 : 0;
}거기에서 z-index가 강조 표시된 결과를 앞에 쌓을 수 있습니다.
/ * 결과 앞에서 TextRea를 이동 */
#EDITING {
z- 인덱스 : 1;
}
#highlighting {
z- 인덱스 : 0;
}우리가 여기서 멈추면 첫 번째 버그를 볼 것입니다. Prism.js가 구문을 강조하는 것처럼 보이지는 않지만 Textarea가 결과를 덮고 있기 때문입니다.
CSS 로이 문제를 해결할 수 있습니다! 우리는 Caret (Cursor)을 제외하고
/ * Textarea를 거의 완전히 투명하게 만듭니다 */
#EDITING {
색상 : 투명;
배경 : 투명;
간병 : 흰색; / * 또는 좋아하는 색상을 선택하십시오 */
}아, 훨씬 낫다!
일단 이것을 멀리 얻었을 때, 나는 편집자와 약간 놀았고 고정이 필요한 몇 가지를 더 찾을 수있었습니다. 좋은 점은 모든 문제가 JavaScript, CSS 또는 HTML을 사용하여 수정하기가 매우 쉽다는 것입니다.
우리는 코드 편집기를 만들고 있으며 코드는 브라우저의 네이티브 스펠 체커가 철자가 틀린 것으로 생각하는 많은 단어와 속성을 가지고 있습니다.
맞춤법 검사는 나쁘지 않습니다. 이 상황에서는 도움이되지 않습니다. 철자가 잘못되었거나 코드가 유효하지 않기 때문에 잘못된 것이 잘못 되었습니까? 말하기가 어렵습니다. 이 문제를 해결하려면
<textarea sportcheck="False" ...></textarea>
InnerText는 NewLines (\ n)를 지원하지 않습니다.
업데이트 기능을 편집해야합니다. InnerText를 사용하는 대신 Open Bracket 문자 (
result_element.innerhtml = text.replace (new regexp ( "&", "g"), "&"). Replare (new regexp ( "<h4> 스크롤 및 크기 조정</h4><p> 또 다른 것은 다음과 같습니다. 편집이 진행되는 동안 강조 표시된 코드는 스크롤 할 수 없습니다. 그리고 TextArea가 스크롤되면 강조 표시된 코드가 스크롤되지 않습니다.</p><p> 먼저 Textarea와 결과 지원 스크롤을 모두 확인해 보겠습니다.</p><pre rel="CSS" data-line=""> / * 스크롤 할 수 있습니다 */
#EDITING, #Highlighting {
오버플로 : 자동;
흰색 공간 : 사전; / * TextArea가 수평으로 스크롤하도록 허용 */
}그런 다음 결과가 Textarea 로 스크롤되도록하기 위해 다음과 같은 HTML 및 JavaScript를 업데이트 할 것입니다.
<textarea oninput="업데이트 (this.value); sync_scroll (this);" onscroll="sync_scroll (this);"> </textarea>
함수 sync_scroll (요소) {
/ * 이벤트 코디 스크롤로 스크롤 결과 - TextArea와 동기화 */
result_element = document.querySelector ( "#Highlighting");
// x와 y를 가져 와서 설정합니다
result_Element.scrolltop = element.scrolltop;
result_element.scrollleft = element.scrollleft;
}일부 브라우저에서는 텍스트 주변을 크기로 조정할 수 있지만 이는 Textarea와 결과가 크기가 다를 수 있음을 의미합니다. CSS가 문제를 해결할 수 있습니까? 물론 가능합니다. 우리는 단순히 크기 조정을 비활성화 할 것입니다.
/ * TextRea에서 크기 조정 없음 */
#EDITING {
크기 조정 : 없음;
}이 버그를 지적한이 의견 덕분에.
이제 스크롤은 거의 항상 동기화되지만 여전히 작동하지 않는 경우가 여전히 있습니다. 사용자가 새 라인을 생성하면 커서와 Textarea의 텍스트가 새로운 줄에 텍스트가 입력되기 전에 일시적으로 잘못된 위치에 있습니다. 블록은 미적 이유로 빈 최종 줄을 무시하기 때문입니다.
함수 업데이트 (텍스트) {
result_element = document.querySelector ( "#Highlighting-Content");
// 최종 신약 처리 (기사 참조)
if (text [text.length-1] == "\ n") {// 마지막 문자가 Newline 문자 인 경우
텍스트 = ""; // 최종 라인에 자리 표시 자 공간 문자 추가
}
// 코드를 업데이트합니다
result_element.innerhtml = text.replace (new regexp ( "&", "g"), "&"). Replare (new regexp ( "<h4> 계약 선</h4><p> 조정하기가 더 까다로운 것 중 하나는 결과에서 라인 계약을 처리하는 방법입니다. 편집자가 현재 설정되는 방식은 공백으로 선을 and 다가 잘 작동합니다. 그러나 공간보다 탭이 더 많으면 예상대로 작동하지 않는다는 것을 알 수 있습니다.</p><p> JavaScript를 사용하여 <kbd>탭</kbd> 키를 올바르게 작동시킬 수 있습니다. 기능에서 무슨 일이 일어나고 있는지 명확하게 설명하기 위해 의견을 추가했습니다.</p><pre rel="HTML" data-line=""> <textarea ... onkeydown="check_tab (this, event);"> </textarea> 함수 check_tab (요소, 이벤트) {
Code = Element.Value를하자;
if (event.key == "tab") {
/ * 탭 키 누르기 */
event.preventDefault (); // 정상을 중지합니다
let prever_tab = code.slice (0, element.selectionStart); // 탭 전에 텍스트
let aft_tab = code.slice (element.selectionend, emeter.value.length); // 탭 후 텍스트
cursor_pos = Element.SelectionEnd 1; // 커서가 탭 후에 이동하는 곳 - 1 숯으로 앞으로 이동하여 탭으로 이동합니다.
요소 .value = prever_tab "\ t"after_tab; // 탭 char를 추가합니다
// 커서를 움직입니다
element.SelectionStart = CURSOR_POS;
element.selectionend = cursor_pos;
업데이트 (Element.Value); // 들여 쓰기를 포함하도록 텍스트를 업데이트합니다
}
} 탭 문자가
#EDITING, #Highlighting, #Highlighting * {
/ * 또한 텍스트 스타일을 하이러리 토큰에 추가하십시오 */
/* 등. */
탭 크기 : 2;
} 너무 미쳤어? HTML의 요소, 함께 쌓는 CSS의 새로운 라인 및 입력 한 내용을 포맷하기 위해 구문을 강조 표시하는 모든 것입니다. 그리고 이것에 대해 가장 좋아하는 것은 우리가 정상적인 시맨틱 HTML 요소로 작업하고, 원시 속성을 활용하여 원하는 동작을 얻고 CSS에 기대어 한 요소와 만 상호 작용하는 환상을 만들고 자바 스크립트에 도달하여 일부 사례를 해결한다는 것입니다.
구문 강조 표시에 Prism.js를 사용했지만이 기술은 다른 기술과 함께 작동합니다. 원한다면 자신을 만드는 구문 형광펜과도 작동합니다. CMS의 Wysiwyg 편집기이든 소스 코드를 입력 할 수있는 기능이 프론트 엔드 작업 응용 프로그램 또는 퀴즈와 같은 요구 사항 인 양식에 관계없이 이것이 유용하고 여러 곳에서 사용될 수 있기를 바랍니다. 결국
업데이트 (2024 년 8 월 27 일) : 독자 Luis Lobo는 Codepen의 React 버전을 사용하여 다음과 같습니다.
위 내용은 구문 하이라이트 코드를 지원하는 편집 가능한 텍스트 주식 생성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
