Javascript를 이용해 RichTextBox를 구현하고 싶습니다.

HDNua의 이미지

안녕하세요. 자유게시판에 컴파일러 만들고 있다고 자랑해놓고
아직도 완성을 못 한 군인입니다.

오늘은 컴파일러 관련 얘기는 아니고, 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 여러분의 답변을 기다립니다.
읽어주셔서 감사합니다.

peecky의 이미지

대충 이런식으로 할 수 있지 않을까요?

<style>
#editor { font-family: Fixedsys; white-space: pre; }
#editor .cursor { background-color: green; }
#editor .keyword { color: blue; }
#textarea { visibility: hidden; }
</style>
 
<ol id="editor>
	<li class="line"><span class="keyword"><span class="character">v</span><span class="character">a</span><span class="character">r</span></span><span class="character"> </span><span class="character">i</span><span class="character cursor">;</span></li>
</ol>
 
<textarea id="input"></textarea>
 
<script>
var keywords = ['var', 'function', 'for', 'while'];
</script>

저 상태에서 자바스크립트로,
#editor 클릭시 #input으로 포커스.
#input 내용 변경시 #editor 내용 업데이트
#input에서 탭키나 화살표 키 등의 특수 키 입력은 따로 처리
#editor .character 클릭 이벤트로 커서 위치 결정

그리고 String.split, Array.join 등을 잘 활용하면 될 것 같습니다.

HDNua의 이미지

더 생각해보고 다르게 질문해보겠습니다. 좋은 참고 되었습니다.

한글 문제가 가장 난항일 것 같네요.

저는 이렇게 생각했습니다.

댓글 달기

Filtered HTML

  • 텍스트에 BBCode 태그를 사용할 수 있습니다. URL은 자동으로 링크 됩니다.
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param><hr>
  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.

BBCode

  • 텍스트에 BBCode 태그를 사용할 수 있습니다. URL은 자동으로 링크 됩니다.
  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param>
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.

Textile

  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • You can use Textile markup to format text.
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param><hr>

Markdown

  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • Quick Tips:
    • Two or more spaces at a line's end = Line break
    • Double returns = Paragraph
    • *Single asterisks* or _single underscores_ = Emphasis
    • **Double** or __double__ = Strong
    • This is [a link](http://the.link.example.com "The optional title text")
    For complete details on the Markdown syntax, see the Markdown documentation and Markdown Extra documentation for tables, footnotes, and more.
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param><hr>

Plain text

  • HTML 태그를 사용할 수 없습니다.
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.
  • 줄과 단락은 자동으로 분리됩니다.
댓글 첨부 파일
이 댓글에 이미지나 파일을 업로드 합니다.
파일 크기는 8 MB보다 작아야 합니다.
허용할 파일 형식: txt pdf doc xls gif jpg jpeg mp3 png rar zip.
CAPTCHA
이것은 자동으로 스팸을 올리는 것을 막기 위해서 제공됩니다.