HTML JavaScript Rich Text Box (IDE)

Question

나는 스타일이 입력 할 때 입력 한 내용에 따라 자동으로 변경되는 것을 제외하고는 Gmail처럼 동작하는 JavaScript로 IDE를 구축하기를 희망합니다. 이것에 대한 논리는 내가 고군분투하는 곳이 아닙니다. Gmail이 HTML에서 풍부한 편집 형식으로 편집 할 수있는 능력을 달성하는 방법. 내가 아는 한 Textarea Control이 이런 식으로 작동하지 않으므로 어떻게이 기능을 속이는가?

Answer 1

"Content Editable"의 Google은 Firefox End 편집 HTML 페이지에서 F7을 직접 누르십시오. :) Gmail은 ContentEdable = "True"가있는 페이지 내부의 프레임을 사용합니다.

Google 웹 툴킷 참조 :http://code.google.com/docreader/#p=google-web-toolkit-doc-1-5&s=google-web-web-toolkit-doc-1-5&t=devguidewidgetGalleryRichTextArea 위젯이 있습니다.

Answer 2

이것이 당신이 의미하는지 확실하지 않지만 온라인 wysiwyg 편집기를 찾고 있습니까?

이 경우 추천 할 수 있습니다 ckeditor, 그것은 매우 빠르고 현대적이며 강력합니다.

해당 목록에서 더 넓은 목록을 찾을 수 있습니다 Wikipedia 항목.

전자 메일을 편집 할 수 있도록 편집자를 사용자 정의해야 할 것입니다 (예 : 사전 정의 된 CSS 클래스에서 작업 할 수는 없으므로 편집기는 모든 스타일 정의를 직접 수행해야합니다. 태그) 그러나 문제가되지 않아야합니다.

Answer 3

이를 허용하는 많은 오픈 소스 시스템 중 하나를 다운로드하고 어떻게했는지 확인하십시오.
기본적으로, 그들은 이벤트 핸들러를 버튼에 첨부하고 있는데, 그 결과 커서가 현재 텍스트 영역이나 텍스트 주변의 선택된 영역에있는 장소에 "물건"을 삽입하는 방법을 알고 있습니다.

Answer 4

내 투표는 'Editarea'웹 기반 편집자 목록에있는' 또 다른 Wikipedia 항목.

가장 단순한 코드를 사용하여 기존 페이지에 추가 할 수있었습니다.

<script language="javascript" type="text/javascript" src="edit_area/edit_area_full.js"></script>
<script language="javascript" type="text/javascript" >
editAreaLoader.init({
  id: "my_textarea_id"   // ID of textarea to turn into syntax editor.
  , syntax: "php"
  , start_highlight: true
  , allow_resize: "both"
  , toolbar: "search, go_to_line, |, undo, redo, |, highlight, reset_highlight, word_wrap,|,syntax_selection"
  , min_height:150
  , min_width:400
});
</script>