통합 된 Markdown WYSIWYG 텍스트 편집기

통합 된 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 now has a Markdown addon that does this exact thing. The addon project is hosted on github.

Screenshots:

---

As posted in my Feb 6, 2015 update, CKEditor now includes plugins that allow BBCode input and output.

A demo is available here: http://ckeditor.com/demo#bbcode

EDIT Apr 13, 2015:
Someone professing to develop CKEditor says that the appearance of CommonMark is a game changer, and we could possibly see a proper markup interface for CKEditor (read comments for the full story).

---

Pen is a new (active as of 2014) WYSIWYG editor that outputs Markdown.
It's not perfect—I've had issues with pasting HTML there—but it works.

Edit: Sorry! It doesn't output Markdown. Walery Strauch pointed out in the comments that the Markdown formatting signs I saw were actually CSS pseudo element rules:

Still, I'll leave it here as an option since some people upvoted this answer and it may have been of use to somebody.

---

I implemented a very simple editor that allows the contents of a <textarea> that contains Markdown to be edited in a WYSIWYG fashion.

I used Hallo. I don't think its web site makes it obvious that it is not itself a Markdown WYSIWYG editor but the demo does forge the path to one.

Hallo allows WYSIWYG editing of the HTML inside a <div>. I used javascript to hide any <textarea> blocks that have a specific wysiwyg CSS class, replacing it with a <div> and copying the contents of the <textarea> into the <div>. The copying runs through Showdown which produces HTML from Markdown.

Another Javascript routine reacts every time the <div> contents change. It copies the contents back into the (now hidden) <textarea>. The content is run through to-markdown to convert from HTML to Markdown.

If the <textarea> is a field in a <form>, then the edited Markdown will be sent to the server when that form is submitted.

The inspiration for this comes from the Hallo Markdown Example, specifically the editor.js file. I used that as a basis for my own script along with hallo.js, showdown.js and to-markdown.js.

My script, wysiwyg.js is a derivative of editor.js from the Hallo Markdown Example. Some points to note:

• I use this in a Rails application (not that that matters)
• It runs on ready and also on page:load, the latter because Rails uses Turbolinks
• It runs on ajaxComplete because I use Ajax for form error reports
• There are other dependencies: JQueryUI and Rangy (Rails users can avail of the gems jquery-ui-rails and rangy-rails).
• Also Font Awesome is used for the tool bar icons. The version of hallo.js used by the demo is out of date (it uses an old version of Font Awesome) - use hallo.js from GitHub instead.

You only need to add CSS class='wysiwyg' to any <textarea> to enable WYSIWYG on it. The <textarea> should conain Markdown formatted text.

I would expect that wysiwyg.js could be easily adapted to use another editor if you don't like Hallo as long as it works on the HTML in a <div>. There are quite a few to choose from but not all are as lightweight as Hallo.

A smilar piece of work that I found is markdown-html-form. It uses the same Showdown and to-markdown.

---

I am also looking for a markdown editor that is described at the top of this thread

Have you seen "markdown tools": http://md-wysiwyg.sourceforge.net/

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

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

참고 URL : https://stackoverflow.com/questions/12840132/integrated-markdown-wysiwyg-text-editor