어떤 스택 오버플로 스타일 마크 다운 (WMD) JavaScript 편집기를 사용해야합니까?

어떤 스택 오버플로 스타일 마크 다운 (WMD) JavaScript 편집기를 사용해야합니까?

---

배경

저는 사용자가 입력 한 콘텐츠가 필요한 애플리케이션을 개발 중이며 Stack Overflow 스타일의 Markdown 편집기를 사용하기로 결정했습니다. 지난 며칠 동안이 주제를 조사한 결과, 기본 WMD 편집기에 여러 가지 포크가 있다는 것을 알게되었습니다. 일부는 몇 가지 기본 개선 사항이 있고 일부는 Stack Overflow와 심각한 차이점이 있습니다.

이것이 애플리케이션의 핵심이 될 것이기 때문에 가능한 최고의 코드베이스로 시작하고 싶습니다. 많은 사람들이 내 요구에 가장 적합한 솔루션을 추천 해 주시면 기쁩니다.

아래는 요구 사항과 내가 이미 찾은 것입니다. 이 질문이 어떤 버전을 사용할지 결정하는 데 도움이되고, 내 요구에 더 적합한 포트를 찾는 데 도움이되기를 바랍니다.

---

내 프로젝트의 요구 사항

• 실시간 미리보기
• 동일한 페이지에 여러 편집자 (사용자가 다른 편집 상자를 동적으로 추가 할 수 있기 때문에 사전에 몇 명인지 모르겠습니다).
• 추가 버튼으로 확장하는 기능 (단지 imgURL을 추가하는 대신 사진을 업로드하는 버튼을 원합니다 ).
• 편집 상자를 동적으로 표시하거나 숨기는 기능 (미리보기 상자 만 표시).
• 절대 필수는 아니지만 잘 알려진 Stack Overflow의 모양과 느낌에 가깝게 고수하고 싶습니다.
• 이것이 중요한지 모르겠지만 백엔드는 Django로 작성되었습니다.

내가 본 편집자

다음은 제가 살펴본 몇 가지 코드베이스입니다. 분명히 다른 해결책이 없을 수도 있습니다.

• derobins의 버전. 내가 알 수 있듯이 이것은 공식 Stack Overflow 버전입니다. 한 페이지에 여러 편집기를 지원하지 않는 것 같습니다.
• jQuery.MarkEdit . 매우 좋아 보이지만 Stack Overflow 버전과는 상당히 다릅니다.
• MooWMD . 지금 당장은 승자처럼 보이지만 MarkEdit보다 덜 활동적이거나 해킹 가능성이 적기 때문에 조금 걱정됩니다.
• 대량 살상 무기 (WMD) 새로운 버전. 잘 모르겠지만 많이 사용하지 않는 오래된 코드베이스처럼 보입니다.
• SocialSite 지점 . 공공 용도가 아닌 것 같습니다.

---

결국 기성 편집기를 좀 더 살펴본 후 http://github.com/openlibrary/wmd 에있는 OpenLibrary WMD 포트에 정착했습니다 .

이 에디터를 선택한 이유

1. 충족 대부분의 내 요구 사항을.
2. Stack Overflow의 편집기처럼 보입니다. 몇 가지 동작 차이가 있습니다 (아래 참조).
3. jQuery를 기반으로 구축됩니다 (그리고 다른 심각한 경쟁자 인 mooWMD 보다 더 좋은 MooTools 가 필요하지 않습니다 ).

편집 상자를 직접 표시하거나 숨기는 기능을 구현하여 대부분의 경우 매우 쉬웠습니다. 내가 하지 않은 내가 어떤 소스에서 장난 필요합니다 확신 어떤 버튼과 편집기를 확장,하지만 난 그게 너무 큰 거래 될 것입니다 생각하지 않습니다.

Stack Overflow 버전과의 차이점

Stack Overflow 편집기와는 몇 가지 차이점이 있습니다.

1. 줄 끝에 한 번만 입력하면 <br/>한 단락으로 간주되지 않고. 이 방식을 선호하므로이 변경 사항은 괜찮습니다.
2. 번호가 매겨진 목록은 Microsoft Word와 같이 자동으로 번호가 지정됩니다. 즉, Enter"1. 첫 번째 항목"을 작성한 후 치면 "2."로 시작하는 줄이 자동으로 표시됩니다. 이것은 또한 제가 정말 좋아하는 변화입니다.

글쎄, 나는 이것이 비슷한 편집자를 찾는 모든 사람들에게 도움이되기를 바랍니다. 에디터 커스터마이징을 끝내면 나만의 브랜치 (MIT 라이선스에 따라 라이선스가 부여됨)를 만들 겠지만 지금은 소스 코드를 수정하지 않고 빠져 나가고 있습니다.

---

글쎄,이 질문 (및 해결책)은 꽤 오래되어서 여기에 최신 정보를 넣을 수 있다고 생각했습니다. :)

2014 년 초에 동일한 문제에 도달했을 때 결국 PageDown-Bootstrap을 사용했습니다 . 완전히 사용자 정의 할 수있는 스타일 바 (버튼 바)가있는 트위터 부트 스트랩 기반 WMD 편집기입니다.

또한 매우 유망 해 보이는 Bootstrap-Markdown 이라는 대안 이 있습니다.

---

라이브 미리보기 부분의 경우 Showdown 라이브러리는 작업하기가 매우 쉽습니다 (Edan이 지적했듯이 코드베이스에 포함되어 있음).

다음과 같이 사용합니다 (원하지 않으면 jQuery를 사용할 필요가 없습니다)

$(document).ready(function(){
    var converter = new Attacklab.showdown.converter();
    function update_description_preview(){
        $('#description-preview').html(converter.makeHtml($("#id_description").val()));
    }
    update_description_preview();

    $("#id_description").keyup(function(){
        update_description_preview();
    });
});

update_description_preview 함수는 변환기 객체를 사용하여 #id_description 요소의 마크 다운을 읽고 # description-preview 요소에 덤프합니다.

Here I am calling the function right after it is defined to initialize the preview windows (there was some text pre-loaded in the editor)

Last bit is just registering the function with the keyup event.

---

Not sure if it fully fits to the old requirements, but another solution available in 2014 is the Open Source Markdown editor with preview licensed under Apache 2.0 and created by topten software.

Online demo is available here: http://www.toptensoftware.com/markdowndeep/dingus

---

Standard Common Markdown includes a standalone javascript file to convert markdown to html. It is easy to implement as shown in the official demo or this plunker.

Roughly:

<script src="//jgm.github.io/stmd/js/stmd.js"></script>
...
var reader = new stmd.DocParser();
var writer = new stmd.HtmlRenderer();
...
var parsed = reader.parse("Some **markdown** text");
var result = writer.renderBlock(parsed);

참고URL : https://stackoverflow.com/questions/2874646/which-stack-overflow-style-markdown-wmd-javascript-editor-should-i-use