통합 된 Markdown WYSIWYG 텍스트 편집기

Markdown 코드에 대한 간단한 WYSIWYG 편집기를 찾고 있지만 CkEditor, TinyMCE 등의 UI와 유사한 UI를 찾지 못했습니다.

특히, 마크 다운 "WYSIWYG"(예 : 같은 게시물 자주 추천 편집자 이 ) 사용자는 하나 여전히 원시 마크 다운 (쓰기 있다는 점에서 순수하지 WYSIWYG 편집기입니다 MarkItUp를 ) 사용하거나 사용하지 않고 편집 인라인 필요없이 다른 극단에 가서는 표준 컨트롤 ( Hello ).

중간에 뭔가가 필요합니다.

필자는 CkEditor 텍스트 상자처럼 보이고 기능하며 Markdown을 받아들이고 출력하는 Markdown 편집기를 찾고 있습니다. 최소한의 서식 옵션 (B, I, U, 목록, 요법)이있는 도구 모음이 있어야하며 텍스트 입력 영역에는 원시 코드가 아닌 변환 된 마크 다운이 표시되어야합니다. 사용자가 원시 마크 다운을 편집 할 수있는 소스 버튼이 있어야하지만 선택 사항이기도합니다. 전의:

나는 Markdown / wiki에 대한 이유, 즉 그것이 제공하는 보안을 얻습니다. 여기 SE 에서처럼 원시 코드를 입력하는 데 신경 쓰지 않지만 내 사용자는 괴짜가 아니며 이것이 즐겁지 않습니다. 그들은 * * * ___ 및 텍스트와 혼합 된 공백을보고 싶지 않습니다. "Word"스타일 편집에 사용되며 해당 환경에서 가장 생산적입니다.

그렇다면 Markdown을위한 진정 통합 된 WYSIWYG 편집기가 있습니까? 저는 PHP로 작성하고 있으므로 클래스로 호출 할 수있는 것이 완벽 할 것입니다.

2015 년 9 월 23 일 업데이트

CKEditor에는 이제이 작업을 정확히 수행 하는 Markdown 애드온 이 있습니다. 애드온 프로젝트는 github에서 호스팅됩니다 .

스크린 샷 :

2015 년 4 월 13 일 업데이트
CKEditor를 개발한다고 공언하는 누군가는 CommonMark 의 외형이 게임 체인저 라고 말하며 CKEditor에 대한 적절한 마크 업 인터페이스를 볼 수있을 것입니다 (전체 스토리에 대한 의견 읽기).

2015 년 2 월 6 일 업데이트

CKEditor는 이제 BBCode를 출력하고 입력으로 받아들이는 플러그인과 함께 제공됩니다.

데모 : http://ckeditor.com/demo#bbcode

나는 요 전에이 주제에 대해 연구하고 있었는데 Markdown 출력이있는 괜찮은 WYSIWYG 편집기를 찾지 못했습니다. 사실, 먼저 WYSIWG Markdown 편집기를 만들어야하는 것은 WYSIWG HTML 편집기이며 시장에서 사용할 수있는 편집기는 거의 없습니다.

dataProcessorHTML 편집기를 Markdown 편집기로 변경하는 CKEditor 용 으로 만들 수있는 기회가 있습니다 . 이와 같이 작동하는 BBCode 용 플러그인이 있습니다 ( http://nightly-v4.ckeditor.com/3737/samples/bbcode.html 확인 ).

이 인터페이스 http://nightly-v4.ckeditor.com/ckeditor_api/#!/api/CKEDITOR.dataProcessor를 구현하기 만하면 됩니다. BBCode 플러그인의 코드를 확인하면 안타깝게도 현재 CKEditor의 아키텍처가 이러한 데이터 프로세서를 생성 할 준비가되지 않았기 때문에 (아직) 몇 가지 해킹과 트릭을 볼 수 있습니다. 그러나 몇 가지 스타일 옵션 만 제공하려면 Markdown 지원을 매우 빠르게 구현할 수 있어야한다고 생각합니다.

신인 인 SimpleMDE 가 답이 될 수 있습니다. 나는 지금 한 달 동안 이와 같은 것을 찾고 있었다. 이것이 검색 결과에서 더 높게 나타나지 않는다는 것에 놀랐습니다. 나는 이것을 찾기 위해 lepture / editor 에 대한 통지를 거쳐야했다 .

2015 년 9 월 23 일 수정

CKEditor에는 이제이 작업을 정확히 수행 하는 Markdown 애드온 이 있습니다. 애드온 프로젝트는 github에서 호스팅됩니다 .

스크린 샷 :

2015 년 2 월 6 일 업데이트에 게시 된대로 CKEditor 에는 이제 BBCode 입력 및 출력을 허용하는 플러그인이 포함되어 있습니다.

데모는 여기에서 사용할 수 있습니다 : http://ckeditor.com/demo#bbcode

EDIT 2015 년 4 월 13 일 :
CKEditor를 개발한다고 공언하는 누군가는 CommonMark 의 외형이 게임 체인저 라고 말하며 CKEditor에 대한 적절한 마크 업 인터페이스를 볼 수있을 것입니다 (전체 스토리에 대한 의견 읽기).

Pen 은 Markdown 을 출력 하는 새로운 (2014 년 현재 활성화 된) WYSIWYG 편집기입니다.
완벽하지는 않습니다. HTML을 붙여 넣는 데 문제가 있었지만 작동합니다.

편집 : 죄송합니다! Markdown을 출력하지 않습니다. Walery Strauch 는 내가 본 Markdown 형식화 기호가 실제로 CSS 의사 요소 규칙이라고 주석에서 지적했습니다.

그래도 일부 사람들 이이 답변을 찬성하고 누군가에게 유용했을 수 있으므로 여기에 옵션으로 남겨 두겠습니다.

<textarea>Markdown이 포함 된 의 내용을 WYSIWYG 방식으로 편집 할 수있는 매우 간단한 편집기를 구현했습니다 .

저는 Hallo를 사용했습니다 . 나는 그것의 웹 사이트가 그것이 Markdown WYSIWYG 편집기가 아니라는 것을 명백하게한다고 생각하지 않지만, 데모 는 하나의 경로를 형성한다.

Hallo 는 .NET Framework 에서 HTML의 WYSIWYG 편집을 허용합니다 <div>. 나는 어떤 숨길 자바 스크립트를 사용하여 <textarea>특정의이 블록 wysiwyg로 대체, CSS 클래스 <div>와의 내용을 복사 <textarea>에 <div>. 복사는 Markdown에서 HTML을 생성하는 Showdown 을 통해 실행됩니다 .

다른 Javascript 루틴은 <div>내용이 변경 될 때마다 반응합니다 . 내용을 (이제 숨겨 짐)에 다시 복사합니다 <textarea>. 콘텐츠는 HTML에서 Markdown으로 변환하기 위해 to-markdown 을 통해 실행됩니다 .

(가) 경우 <textarea>필드가에있는 <form그 양식이 제출 될 때>를 편집 한 마크 다운 서버로 전송됩니다.

이에 대한 영감은 Hallo Markdown Example , 특히 editor.js 파일 에서 비롯 됩니다. 이를 hallo.js , showdown.js 및 to-markdown.js 와 함께 내 스크립트 의 기초로 사용했습니다 .

내 스크립트 인 wysiwyg.js 는 Hallo Markdown Example 의 editor.js 에서 파생 된 것입니다 . 참고할 몇 가지 사항 :

• 나는 이것을 Rails 애플리케이션에서 사용합니다 (그건 중요하지 않습니다)
• Rails는 Turbolinks를 사용하기 때문에 후자 ready에서도 실행됩니다.page:load
• ajaxComplete양식 오류 보고서에 Ajax를 사용하기 때문에 실행됩니다.
• 다른 의존성이 있습니다 JQueryUI 과 돌아 다니기에 알맞은는 (사용자가 보석 이용하실 수 있습니다 레일 JQuery와 - UI 레일 과 넓은 레일 ).
• 또한 도구 모음 아이콘에는 Font Awesome 이 사용됩니다. 의 버전 hallo.js에 의해 사용되는 데모는 (은 이전 버전 사용 유효 기간이 글꼴 최고 사용 -) GitHub의에서 hallo.js을 대신.

당신은 CSS를 추가 할 필요가 class='wysiwyg'있는에 <textarea>그것을 WYSIWYG 수 있도록. 는 <textarea>마크 다운 형식의 텍스트를 conain한다.

나는 것으로 기대 wysiwyg.js은 쉽게 당신이 마음에 들지 않으면 다른 편집기를 사용하여 적용 할 수 안녕 오래가있는 HTML에서 작동 한 <div>. 선택할 수있는 것이 꽤 많지만 모두가 Hallo 만큼 가벼운 것은 아닙니다 .

내가 찾은 멋진 작품은 markdown-html-form 입니다. 동일한 Showdown 및 to-markdown을 사용 합니다.

이 스레드의 맨 위에 설명 된 마크 다운 편집기도 찾고 있습니다.

"마크 다운 도구"를 보셨습니까? http://md-wysiwyg.sourceforge.net/

데모 : http://md-wysiwyg.sourceforge.net/cgi-bin/cgi_wysiwyg_test.py/

그것은 우리가 찾고있는 것과 매우 비슷해 보이며, WYSIWYG 리치 텍스트를 가져 와서 마크 다운을 출력하는 합리적인 작업을 수행합니다. 그러나 Google 문서에서 일부 서식있는 텍스트를 붙여 넣을 때 인코딩 예외가 발생했습니다.