유연한 동적 비주얼 스타일링 기능을 갖춘 JS 텍스트 편집기 컨트롤

Question

정당한 프레임 워크 용 JS 텍스트 편집기 컨트롤을 찾고 있는데, 이는 사용자가 markdownesque 형식으로 사용자가 입력 할 때 런타임에 텍스트를 색칠하거나 스타일을 지정할 수있게 해줍니다 체재.

실제 형식은 Markdown과 완전히 다르므로 기존 Markdown 편집기를 단순히 재사용 할 수는 없습니다. 또한이 항목의 목적은 사용자가 반 구조화 된 데이터 입력을 지원하는 것이지 멋진 텍스트 형식을 사용하는 것이 아닙니다.

스타일의 텍스트뿐만 아니라

, 동적으로에 입력 한 내용 사용자에 따라 다시 텍스트에서 UI 요소 (예를 들어, 버튼)를 삽입 할 수 있도록하고 싶습니다.

또한 보낼 수 있어야합니다 백그라운드에서 서버 측에 대한 변경이 다소 효과적입니다. 어쨌든 거기에 사용자 정의 콜백을 작성해야한다고 생각하지만, 컨트롤이 해당 프레임 워크를 제공한다면 멋지게 될 것입니다 (적어도 내 방식대로는 안되는 경우).

실행 취소/다시 실행, 복사/붙여 넣기와 같은 일반적인 기능에 대한 지원은 물론 필수입니다.

내가 코드를 할 수 있도록하려면 어떤 규칙을 명확히 바보 합성 예 :

텍스트 :

 
-- Foo 

    Bar {green} 
    *Baz* 

-- Alpha {red} 

스타일 : Alpha 전에 줄 수 Foo와 행에서

• : 배경색이 녹색입니다.
• 줄이 Alpha 인 경우 : 빨간색 배경
• 단어 *Baz* (별표와 함께)은 굵게 표시되어 있습니다.
• 단어 Foo 및 Alpha : 휴지통 버튼은 이미지의 전체 섹션을 현재 --에서 다음 문자로 삭제할 때 이미지를 표시합니다.
• 사용자가 을 누를 때 과 일치하는 온라인으로을 누르면 다음 줄의 커서 위치가 자동 들여 쓰기됩니다.
• 사용자가 (들여 쓰기 된) 줄의 시작 부분에 --을 입력하면 새 구역이 시작되고 줄은 들여 쓰기가 해제됩니다. (실제 들여 쓰기 문자/공간/텍스트에 표시해야합니다.) 나는이 시각적 스타일은 사용자 유형과 편집기에 을 적용 할

참고. 이 예에서 사용자가 {green}을 {blue}으로 변경하면 그에 따라 배경색을 변경해야합니다.

Answer 1

Yahoo Rich Text Editor을 확인하십시오. 그것은 오픈 소스입니다.