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

유지 관리가 쉽기 때문에 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 제출 페이지에 있음)이며 어떻게 포함되어 있는지 알고 싶을 수도 있습니다.

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

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

http://alexgorbatchev.com/wiki/SyntaxHighlighter

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

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