Javascript를 이용해 RichTextBox를 구현하고 싶습니다.
안녕하세요. 자유게시판에 컴파일러 만들고 있다고 자랑해놓고
아직도 완성을 못 한 군인입니다.
오늘은 컴파일러 관련 얘기는 아니고, HTML 개발 도구를 만드려고 합니다.
그런데 지금 임시로 만들어서 쓰고 있는 HtmlMaker는
줄 번호 갱신 속도도 느리고 글자 색깔도 안 나오면서 탭 버튼으로 들여쓰기도 안 되어
불편해서 새롭게 만들어서 사용하려고 하고 있습니다.
문제는 인트라넷 환경에선 인터넷에 돌아다니는 RichTextBox 구현 예제를 그대로 사용할 수 없기 때문에,
사용하려면 있는 코드를 인쇄해서 부대에 가져간 다음 똑같이 옮겨적어야 합니다.
만약 그 예제가 다른 라이브러리를 쓰고 있다면 라이브러리도 직접 손으로 옮겨적어야 합니다.
이럴 바에야 차라리 직접 RichTextBox를 만들어볼까 해서 구글에 찾아봤습니다..만 이렇다 할 성과는 없습니다.
RichTextBox를 만들어둔다면 지금 개발하고 있는 HtmlMaker에도 적용 가능하거니와
후에 만들 빌더에도 적용해서 보다 편리하게 코딩할 수 있을 거란 생각이 들었습니다.
그래서 순수하게 Javascript만을 이용하여 RichTextBox를 구현한 적당한 예제가 있으면 좋겠습니다.
참고 1. 일단 유용해보이던 링크는 다음과 같습니다. (검색엔진:google, 검색어: "Javascript RichTextBox")
- http://www.codeproject.com/Articles/176022/How-To-Generate-Rich-Text-Box-using-JavaScript
참고 2. 제 RichTextBox는 다음을 구현해야 합니다.
- 글꼴 설정. 이 경우 코드를 적는 것 뿐이므로 각각의 문자열이 다른 글꼴을 가지지 않아도 됨. 즉 글꼴은 통일해도 좋음.
- 유니코드, 아니면 최소 한글을 적을 수 있어야 합니다. 영어만으로 주석을 작성하려니 암 걸리는 일이네요..
- 줄 번호가 나와야 합니다.
- 키워드에 색깔을 넣을 수 있어야 합니다.
- 기존 텍스트에어리어의 기능을 거의 물려받아야 합니다.
- 문자열 사이에 삽입이 가능해야 합니다. 자바스크립트의 내장 메서드에 문자열을 삽입하는 메서드가 없는 걸로 알고 있습니다.
그래서 이는 연결 리스트를 이용하여 구현할 생각입니다.
KLDP 여러분의 답변을 기다립니다.
읽어주셔서 감사합니다.
대충 이런식으로 할 수 있지
대충 이런식으로 할 수 있지 않을까요?
저 상태에서 자바스크립트로,
#editor 클릭시 #input으로 포커스.
#input 내용 변경시 #editor 내용 업데이트
#input에서 탭키나 화살표 키 등의 특수 키 입력은 따로 처리
#editor .character 클릭 이벤트로 커서 위치 결정
그리고 String.split, Array.join 등을 잘 활용하면 될 것 같습니다.
답변 감사합니다.
더 생각해보고 다르게 질문해보겠습니다. 좋은 참고 되었습니다.
한글 문제가 가장 난항일 것 같네요.
저는 이렇게 생각했습니다.
댓글 달기