구문 강조를 즉시 수행 할 수있는 텍스트 영역?

구문 강조를 즉시 수행 할 수있는 텍스트 영역?

---

유지 관리가 쉽기 때문에 CMS에 여러 HTML 블록을 저장하고 있습니다. <textarea>s 로 표시됩니다 .

아무도 textarea일반 텍스트 편집기 (WYSIWYG 또는 고급 함수 없음)를 유지하면서 HTML 또는 유사한 구문에서 HTML을 강조 표시 할 수있는 JavaScript 위젯을 알고 있습니까?

---

일반 텍스트 영역에서 프리젠 테이션에 필요한 수준의 제어를 달성하는 것은 불가능합니다.

괜찮다면 CodeMirror 또는 Ace (이전 skywriter 및 bespin ) 또는 Monaco (MS VSCode에서 사용 )를 사용해보십시오 .

중복 스레드에서-필수 위키피디아 링크 : http://en.wikipedia.org/wiki/Comparison_of_JavaScript-based_source_code_editors

---

다음은 프로그래머 와 비슷한 질문 ( 온라인 코드 편집기 )에 대한 답변입니다 .

먼저,
Wikipedia ― JavaScript 기반 소스 코드 편집기의 비교 기사를 살펴보십시오 .

자세한 내용은 다음과 같습니다. 귀하의 요청에 맞는 도구가 있습니다.

• EditArea - FileEditor로 데모 A는 YII 확장 - ( 아파치 소프트웨어 라이센스, BSD, LGPL )

  다음은 소스 코드를위한 무료 자바 스크립트 편집기 인 EditArea입니다. 줄 번호 매기기, 탭 지원, 검색 및 바꾸기 (regexp 포함) 및 라이브 구문 강조 표시 (사용자 정의 가능)로 형식이 지정된 소스 코드를 작성할 수 있습니다.

• CodePress ― Joomla의 데모! CodePress Plugin ― ( LGPL ) ― Chrome에서 작동하지 않으며 개발이 중단 된 것 같습니다.

  CodePress는 브라우저에 입력되는 동안 텍스트를 실시간으로 색칠하는 JavaScript로 작성된 구문 강조 표시가있는 웹 기반 소스 코드 편집기입니다.

• CodeMirror ― 수많은 데모 중 하나 ― ( MIT 스타일 라이센스 + 옵션 상업 지원 )

  CodeMirror는 코드와 같은 콘텐츠 (컴퓨터 프로그램, HTML 마크 업 등)를위한 비교적 쾌적한 편집기 인터페이스를 만드는 데 사용할 수있는 JavaScript 라이브러리입니다. 편집중인 언어에 대한 모드가 작성된 경우 코드 색상이 표시되고 편집기는 선택적으로 들여 쓰기를 도와줍니다.

• 에이스 Ajax.org Cloud9 편집기 - 데모 - ( 모질라 트라이 라이선스 (MPL / GPL / LGPL) )

  Ace는 JavaScript로 작성된 독립형 코드 편집기입니다. 우리의 목표는 TextMate, Vim 또는 Eclipse와 같은 기존 기본 편집기의 기능, 유용성 및 성능을 일치시키고 확장하는 웹 기반 코드 편집기를 작성하는 것입니다. 모든 웹 페이지 및 JavaScript 응용 프로그램에 쉽게 포함시킬 수 있습니다. Ace는 Cloud9 IDE 의 기본 편집기 및 Mozilla Skywriter (Bespin) 프로젝트의 후속 편집기로 개발되었습니다 .

---

CodePress는 이 작업을 수행, 같은 않습니다 EditArea은 . 둘 다 오픈 소스입니다.

---

강조 표시된 텍스트 영역을 실시간으로 편집 하려면 EditArea 를 사용하는 것이 좋습니다 .

---

업데이트 : Bespin은 이제 ACE이며 여기에서 가장 높은 등급의 답변으로 언급됩니다. ACE를 대신 사용하십시오.

Mozilla의 Bespin 과 함께 가야합니다 . HTML5 기능을 사용하여 빌드되었으므로 (빠르고 빠르지 만 레거시 브라우저를 지원하지는 않지만) 확실히 사용하고 놀랍습니다. 모질라를 지원하고 있기 때문에 Firefox를 개발했기 때문에 Firefox를 개발하고 있습니다. .. jQuery 와 함께 사용하기가 더 쉬운 확장 기능이 포함 된 jQuery 플러그인 도 있습니다 .

---

뒤에 신중하게 배치 하여 텍스트를 강조 표시 할 수 있습니다 .<textarea><div>

텍스트 영역 내부의 텍스트 강조 표시를 확인하십시오 .

---

내가 아는 유일한 편집기는 구문 강조 표시가 있고 텍스트 영역으로 대체되는 것은 Mozilla Bespin 입니다. Bespin을 임베드하여 Google에서 에디터를 임베드하는 방법을 알아 보았습니다. 내가 아는 바로이 사이트를 사용하는 유일한 사이트는 알파 제트 Jetpack 갤러리 (Jetpack 제출 페이지에 있음)이며 어떻게 포함되어 있는지 알고 싶을 것입니다.

또한 Bespin 편집기 내장 및 재사용에 대한 블로그 게시물이 있습니다.

---

왜 텍스트 영역으로 표현합니까? 이것은 내가 가장 좋아하는 것입니다.

http://alexgorbatchev.com/wiki/SyntaxHighlighter

그러나 CMS를 사용하는 경우 더 나은 플러그인이있을 수 있습니다. 예를 들어, 워드 프레스는 진화 된 버전을 가지고 있습니다 :

http://www.viper007bond.com/wordpress-plugins/syntaxhighlighter/

참고 URL : https://stackoverflow.com/questions/1619167/textarea-that-can-do-syntax-highlighting-on-the-fly