2011-03-08 2 views
5

Google 문서 도구와 비슷한 것을 만들려고합니다. 텍스트 페이지 나 iframe이 아닌 페이지를 직접 수정할 수 있습니다. 이는 contentEditable HTML5 속성에서 가능합니다.ContentEditable과 함께 사용할 좋은 WYSIWYG 편집기는 무엇입니까?

콘텐츠 편집기, 텍스트 삽입, 링크 삽입, 단어 붙여 넣기 등과 같은 기능을 제공하기 위해 contentEditable 위에 사용할 수있는 훌륭한 편집기가 있습니까?

http://www.aloha-editor.org/ 내가 찾은 것이지만 더 많은 것이 있는지 궁금합니다.

(편집 : 나는 내가 전체 Google 문서 도구를 구축을 위해 노력하고 있지 않다 명확히해야, 난 그냥 사용되는 실제 내용 편집의 예와 같은)

답변

1

버전 WYMeditor의 2.0 (현재 무거운 아래 나 그리고 다른 사람들에 의한 개발) 또한 contentEditable을 사용하지만, 대부분 design/mode 및 contenteEditable API의 동작으로서 selection/ranges/dom을 조작에 의존합니다. 브라우저 공급 업체마다 크게 다릅니다.

기능/설계 목표 중 일부

은 다음과 같습니다

  • WYSIWYM 편집 - 내용과 표현을 분리 우리가 서식있는 텍스트 형식을 사용하지만 디자이너 프레젠테이션을 둡니다.

  • 모듈 형 아키텍처 - 원하는 구성 요소 만 사용하거나 (직접 자신의 UI에 연결) 도구 모음, 대화 상자 및 모든 기능을 갖춘 "전체 스택"편집기에 드롭합니다.

  • 엄격한 xHTML (5) - 편집기는 기본적으로 엄격한 XHTML을 출력하므로 필요에 따라 콘텐츠를 쉽게 변형 할 수 있습니다. 그게 아니라면 당신이 원하는 형식을 지원하기 위해 자신의 파서와 시리얼 라이저를 작성할 수 있습니다.

  • 자리 표시 자/사용자 정의 요소 - 자리 표시 자 및 사용자 정의 요소를 사용하여 편집기 내에서 거의 모든 종류의 컨텐츠를 관리 할 수 ​​있습니다. 함께 StructureValidator와 당신은 등, 유효한 속성을, 서식, 중첩 규칙을 적용 할 수 있습니다

소스는 on GitHub 및 제 베타 버전은 한두 달 내에 예상 할 수 있습니다.

1

HTML5 editor에서 살펴보면 textarea 요소를 사용하고 contentEditable을 사용하여 div로 변환합니다. 콘텐츠를 손쉽게 포맷팅 할 수 있도록 사용자 정의가 가능한 툴바가 있습니다.