매우 간단한 JavaScript 편집기 작성
- 黄舟원래의
- 2017-03-02 15:20:331354검색
물론, 사용할 수 있는 훌륭한 웹 편집기가 이미 준비되어 있습니다. 다운로드하여 페이지에 삽입하기만 하면 됩니다. 저는 CodeMirror와 ACE를 사용하는 데 익숙합니다. 예를 들어 저는 PlantUML을 지원하기 위해 CodeMirror용 플러그인을 작성했습니다. 그러나 이러한 편집기에는 문제가 있습니다. 확장하기 어렵고 이해하기 어렵습니다.
이러한 제품의 코드를 보면 쉽게 이해되지 않는 것도 있고, 뭔가 만들 수 있을 것 같은 자신이 없는 것도 있습니다.
현재 제 철학은 작동하고, 이해되고, 결합되고 확장될 수 있는 간단한 도구를 만드는 것입니다. 그래서 저는 다른 접근 방식을 시도해보고 처음부터 간단한 웹 편집기를 만들고 싶었습니다.
코드를 사용하여 모든 것을 설명하는 원칙을 따르세요. GitHub 저장소를 참조하세요: https://github.com/ftomassetti/simple-web-editor
HTML
HTML 코드부터 시작해 보겠습니다.
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/webeditor.js"></script>
<link href="https://fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet">
</head>
<body>
<h1>My Simple Web Editor</h1>
<p id="editor">
</p>
<span class="blinking-cursor">|</span>
<body>
</html>준비하려면 무엇을 해야 합니까?
물론 첫 번째 jquery
일부 CSS
-
Google의 멋진 글꼴
모든 코드가 포함된 JS 파일(wededitor.js)
p(editor)와 편집기용 스팬
TypeScript
이제 JavaScript 작업이 덜 고통스러울 것이라는 희망으로 TypeScript를 사용해 보겠습니다. 또 해보고 싶었기 때문이다. TypeScript를 사용해 본 적이 없는 분들을 위해 설명하자면 TypeScript는 기본적으로 선택적으로 유형을 지정할 수 있는 JavaScript의 상위 집합입니다. 유형은 오류를 확인하는 데 사용되며 결국 JavaScript를 생성하기 때문에 잊어버립니다. TypeScript에서 JavaScript 라이브러리를 사용할 수 있으며, JavaScript 라이브러리를 사용하려면 라이브러리의 모든 유형 설명을 가져와야 할 수도 있습니다. 이것이 코드의 첫 번째 줄에서 가져온 것입니다.
/// <reference path="defs/jquery.d.ts" />
class Editor {
private caretIndex: number;
private text: string;
constructor() {
this.caretIndex = 0;
this.text = "";
}
textBeforeCaret() {
if (this.caretIndex == 0) {
return "";
} else {
return this.text.substring(0, this.caretIndex);
}
}
textAfterCaret() {
if (this.caretIndex == this.text.length) {
return "";
} else {
return this.text.substring(this.caretIndex );
}
}
generateHtml() {
return this.textBeforeCaret()
+ "<span class='cursor-placeholder'>|</span>"
+ this.textAfterCaret();
}
type(c:string) {
this.text = this.textBeforeCaret() + c + this.textAfterCaret();
this.caretIndex = this.caretIndex + 1;
}
deleteChar() : boolean {
if (this.textBeforeCaret().length > 0) {
this.text = this.textBeforeCaret().substring(0, this.textBeforeCaret().length - 1) + this.textAfterCaret();
this.caretIndex--;
return true;
} else {
return false;
}
}
moveLeft() : boolean {
if (this.caretIndex == 0) {
return false;
} else {
this.caretIndex--;
return true;
}
}
moveRight() : boolean {
if (this.caretIndex == this.text.length) {
return false;
} else {
this.caretIndex++;
return true;
}
}
}
var updateHtml = function() {
$("#editor")[0].innerHTML = (window as any).editor.generateHtml();
var cursorPos = $(".cursor-placeholder").position();
var delta = $(".cursor-placeholder").height() / 4.0;
$(".blinking-cursor").css({top: cursorPos.top, left: cursorPos.left - delta});
}; $( document ).ready(function() {
(window as any).editor = new Editor();
updateHtml();
$(document).keypress(function(e){
var c = String.fromCharCode(e.which);
(window as any).editor.type(c);
updateHtml();
});
$(document).keydown(function(e){
if (e.which == 8 && (window as any).editor.deleteChar()) {
updateHtml();
};
if (e.which == 37 && (window as any).editor.moveLeft()) {
updateHtml();
};
if (e.which == 39 && (window as any).editor.moveRight()) {
updateHtml();
};
});
});자, 코드를 살펴보겠습니다.
편집기 클래스
function updateHTML
$(document).ready( ...) 포맷 와이어링(wiring)
에디터 클래스
에디터 클래스는 우리가 열심히 노력해야 하는 곳입니다. 여기에는 두 가지 항목이 저장됩니다.
편집기에 포함된 텍스트
텍스트에서 캐럿 위치
TextBeforeCaret 및 TextAfterCaret을 사용하면 모든 텍스트 앞이나 뒤에 캐럿을 가져올 수 있습니다.
그럼 generateHTML은 무슨 일을 하나요? 캐럿 위치를 나타내기 위해 텍스트 범위를 배치하기 위한 HTML 코드를 생성합니다. 이 요소는 캐럿 자리 표시자입니다. 캐럿 자체를 배치하면 어떨까요? 캐럿에는 크기가 있으므로 텍스트 내부에서 캐럿을 이동하면 모든 텍스트가 항상 이동하게 됩니다. 대신 캐럿 자리 표시자를 크기가 0으로 이동한 다음 캐럿을 사용하여 캐럿 자리 표시자 위에 배치하지만 Z-색인은 다릅니다. 이렇게 하면 기본적으로 캐럿을 위한 공간을 만들기 위해 텍스트를 왼쪽이나 오른쪽으로 이동할 필요 없이 원하는 위치에서 캐럿을 볼 수 있습니다.
나머지 방법은 다음과 같습니다.
문자 삽입
문자 삭제
캐럿을 왼쪽으로 이동
캐럿을 오른쪽으로 이동
updateHTML 함수
updateHTML 함수는 캐럿 트릭:
var updateHtml = function() {
$("#editor")[0].innerHTML = (window as any).editor.generateHtml();
var cursorPos = $(".cursor-placeholder").position();
var delta = $(".cursor-placeholder").height() / 4.0;
$(".blinking-cursor").css({top: cursorPos.top, left: cursorPos.left - delta});
};먼저 편집기의 내용을 업데이트한 다음 캐럿 자리 표시자의 위치를 찾은 다음 자리 표시자(예: 자리 표시자) 위에 있는 깜박이는 커서를 이동합니다. 실제로 자리 표시자를 왼쪽으로 조금 이동하겠습니다. 그렇게 하는 것이 더 보기 좋기 때문입니다.
연결
연결은 다음 항목에 이벤트 핸들러를 연결하는 것으로 구성됩니다.
문자를 입력할 때
- 문자를 삭제할 때 가져오기
- 왼쪽 및 오른쪽 화살표를 사용할 때 가져오기