안녕하세요. 이번 포스팅에서는 이전 포스팅에서 폰트 변경에 대해서 여쭤보시는 분이 계셔서 추가로 정보를 드리기 위한 포스팅입니다. [HTML/JS/CSS] contenteditable을 이용한 editor 만들기 안녕하세요. 이번 포스팅은 HTML에 있는 contenteditable을 이용해서 editor를 만들기입니다. 만드는 방법은 아주 간단합니다. input, textarea와 같은 텍스트 입력 태그가 아닌 div와 같은 태그에 contenteditabl dev-bak.tistory.com 먼저 기존의 코드에서 폰트 사이즈와 폰트 글꼴을 선택하기 위한 Select와 폰트를 추가를 해줍니다.(기존 코드는 이전 포스팅을 참고해주세요) 폰트 추가(저는 일단 구글 폰트에 등록된 폰트를 추가했습니다) sel..

이전 포스팅에서 contenteditable을 이용해서 에디터를 만들기를 해보았습니다. [HTML/JS/CSS] contenteditable을 이용한 editor 만들기 안녕하세요. 이번 포스팅은 HTML에 있는 contenteditable을 이용해서 editor를 만들기입니다. 만드는 방법은 아주 간단합니다. input, textarea와 같은 텍스트 입력 태그가 아닌 div와 같은 태그에 contenteditabl dev-bak.tistory.com contenteditable로 생성한 에디터에 다른곳에 적혀 있는 텍스트를 복사해서 붙여넣으면 복사한 곳의 스타일이 그대로 복사되서 붙여넣어지는 것을 볼수가 있습니다. 이번 포스팅에서 스타일이 그대로 복사되는걸 원치 않을 경우 텍스트만 삽입되게 하려면 어..

안녕하세요. 이번 포스팅은 HTML에 있는 contenteditable을 이용해서 editor를 만들기입니다. 만드는 방법은 아주 간단합니다. input, textarea와 같은 텍스트 입력 태그가 아닌 div와 같은 태그에 contenteditable="true"를 추가해주면 됩니다. 그렇게 되면 아래와 같이 원래는 텍스트 입력이 불가능한 div 태그에 아래와 같이 텍스트를 입력할 수 있습니다. 그럼 이제 텍스트 입력이 되는 것을 확인했으니 CSS를 적용해보겠습니다. 그렇게 하면 아래와 같이 에디터 영역이 보이게 됩니다. 이제 추가로 editor 메뉴를 만들어 보겠습니다. 기본적으로 굵기 적용, 기울임 적용, 밑줄 적용, 취소선 적용, 숫자 목록, 기호 목록 메뉴를 만들어보겠습니다. 먼저 메뉴 버튼을 ..