Colin's Blog
[javascript] 자바스크립트를 이용한 텍스트 에디터 구현

자바스크립트는 웹 개발에서 많이 사용되는 프로그래밍 언어로, 텍스트 에디터를 만드는 데에도 유용하게 활용될 수 있습니다. 이번 글에서는 간단한 텍스트 에디터를 자바스크립트로 구현하는 방법에 대해 알아보겠습니다.

1. HTML 구조 작성하기

먼저, 텍스트 에디터를 구현하기 위해 HTML 문서의 기본 구조를 만듭니다. 아래는 텍스트 입력 영역과 기능 버튼을 포함한 HTML 예시입니다.

<textarea id="editor" rows="10" cols="50"></textarea>
<br>
<button id="boldButton">Bold</button>
<button id="italicButton">Italic</button>
<button id="underlineButton">Underline</button>

위 코드에서는 textarea 요소를 사용하여 텍스트 입력 영역을 생성하고, button 요소를 사용하여 각각 “Bold”, “Italic”, “Underline” 기능을 가진 버튼을 생성했습니다.

2. 자바스크립트로 텍스트 스타일링 기능 구현하기

이제 자바스크립트를 사용하여 텍스트 스타일링 기능인 볼드, 이탤릭, 밑줄 기능을 구현해보겠습니다.

const boldButton = document.getElementById("boldButton");
const italicButton = document.getElementById("italicButton");
const underlineButton = document.getElementById("underlineButton");
const editor = document.getElementById("editor");

boldButton.addEventListener("click", () => {
  editor.style.fontWeight = "bold";
});

italicButton.addEventListener("click", () => {
  editor.style.fontStyle = "italic";
});

underlineButton.addEventListener("click", () => {
  editor.style.textDecoration = "underline";
});

위 코드에서는 addEventListener 함수를 사용하여 클릭 이벤트가 발생할 때마다 해당하는 스타일 속성을 변경하도록 구현하였습니다. 버튼이 클릭되면 editor 요소의 style 속성을 수정하여 텍스트에 볼드, 이탤릭, 밑줄 스타일이 적용되도록 합니다.

3. 텍스트 저장 및 불러오기 기능 구현하기

마지막으로, 텍스트 저장 및 불러오기 기능을 추가해보겠습니다. 이 기능은 localStorage를 사용하여 구현할 수 있습니다.

const saveButton = document.getElementById("saveButton");
const loadButton = document.getElementById("loadButton");

saveButton.addEventListener("click", () => {
  localStorage.setItem("editorContent", editor.value);
  alert("텍스트가 저장되었습니다!");
});

loadButton.addEventListener("click", () => {
  const savedContent = localStorage.getItem("editorContent");
  if (savedContent) {
    editor.value = savedContent;
    alert("텍스트가 불러와졌습니다!");
  } else {
    alert("저장된 텍스트가 없습니다.");
  }
});

위 코드에서는 localStorage의 setItem 함수와 getItem 함수를 사용하여 텍스트 값을 저장하고 불러오도록 구현했습니다. 저장 버튼을 클릭하면 editor 요소의 값을 localStorage에 저장하고, 불러오기 버튼을 클릭하면 localStorage에서 저장된 값을 불러와 editor 요소에 적용합니다.

결론

위와 같이 자바스크립트를 사용하여 간단한 텍스트 에디터를 구현할 수 있습니다. 이를 활용하여 웹 애플리케이션 등에서 텍스트 편집 기능을 구현할 수 있으며, 필요한 추가 기능은 자유롭게 구현하여 확장할 수 있습니다.

참고: [MDN Web Docs -

© 2018 Colin. All rights reserved.