2024년 3월 29일 (금) 오후 5시 04분 18초

KeyRadar

Based on keyword



html5 텍스트에디터 만들기 샘플과 제작

html5 텍스트에디터 만들기 샘플과 제작

텍스트에디터를 만드는 것은 어렵지만 웹에 대한 여러가지를 학습할 수 있습니다.

여기서는 데모버전을 만들어보고 진행과정을 공유합니다.

데모버전

아래는 데모버전을 보여줍니다. 진행상황에 따라 수시로 업데이트 됩니다.

제작 과정 로그

웹용 텍스트에디터를 제작하는 과정은 다음과 같습니다.

1. 수정 가능한 div 태그 추가

div 태그의 contenteditable 속성에 true 를 적용하면 textarea 와 같은 수정과 편집이 가능한 상태가 된다.

그리고, 에디터의 구역을 위한 외곽선을 지정한다.

<div id="editor" contenteditable="true" style="border: 1px solid gray;"></div>

2. 입력된 html 보기

버튼을 이용하여 편집기능이 있는 div 내의 내용을 html 코드로 읽어올 수 있도록 한다.
html 코드는 개발자모드에서 확인 가능하도록 console.log() 메서드를 이용한다.

<html>
...
<button id="getHtml">Get Html</button>
...
</html>
<script>
$(window).on('load', function() {
...
document.getElementById("getHtml").addEventListener('click',function (){
console.log(document.getElementById("editor").innerHTML);
});
...
});
</script>



html5 texteditor javascript