{"id":23868421,"url":"https://github.com/powerstream3604/toast-markdown-editor","last_synced_at":"2026-06-04T16:31:17.057Z","repository":{"id":51342777,"uuid":"366654372","full_name":"PowerStream3604/Toast-markdown-editor","owner":"PowerStream3604","description":"my custom version of toast editor","archived":false,"fork":false,"pushed_at":"2021-05-18T08:29:39.000Z","size":3792,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-03T11:28:20.636Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/PowerStream3604.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-05-12T09:01:09.000Z","updated_at":"2021-05-18T08:29:42.000Z","dependencies_parsed_at":"2022-09-24T20:02:01.685Z","dependency_job_id":null,"html_url":"https://github.com/PowerStream3604/Toast-markdown-editor","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PowerStream3604%2FToast-markdown-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PowerStream3604%2FToast-markdown-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PowerStream3604%2FToast-markdown-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PowerStream3604%2FToast-markdown-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/PowerStream3604","download_url":"https://codeload.github.com/PowerStream3604/Toast-markdown-editor/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240211989,"owners_count":19765945,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-01-03T11:28:18.885Z","updated_at":"2025-11-13T16:02:25.692Z","avatar_url":"https://github.com/PowerStream3604.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Toast-markdown-editor\nMy custom version of Toast UI Editor\n\n### 사용법 참고\n[How to use](https://github.com/PowerStream3604/Toast-markdown-editor/blob/main/%EC%82%AC%EC%9A%A9%EB%B2%95.md)\n# Markdown 편집기\n\n- 1. Bootstrap Markdown Editor\n\n    특징 : \n\n    - preview, 이미지 업로드 및 기타 기능 지원\n    - Bootstrap을 위한 마크다운 편집기\n    - github markdown과 비슷한 기능(edit, preview 측면에서)\n\n    Github: \n\n    [inacho/bootstrap-markdown-editor](https://github.com/inacho/bootstrap-markdown-editor)\n\n    Demo:  \n\n    [Bootstrap Markdown Editor](http://inacho.github.io/bootstrap-markdown-editor/)\n\n    ![Bootstrap Markdown Editor](https://github.com/PowerStream3604/Toast-markdown-editor/blob/main/markdownEditorPictures/BootStrap%20markdown%20Editor.png)\n\n- 2. JS-Markdown-Editor\n\n    특징: \n\n    - 양쪽에서 (edit, preview)를 볼 수 있음\n    - 문서 작성 시 필요한 최소한의 기능 제공\n    - pc환경에서 문서할 때 적합\n\n    Github : \n\n    [Grafikart/JS-Markdown-Editor](https://github.com/Grafikart/JS-Markdown-Editor)\n\n    Demo : \n\n    [Markdown Editor](https://rawgit.com/Grafikart/JS-Markdown-Editor/master/dist/demo.html)\n\n    ![JS-markdown-editor-file](https://github.com/PowerStream3604/Toast-markdown-editor/blob/main/markdownEditorPictures/JS-markdown-editor.png)\n\n- 3. Woofmark\n\n    특징:\n\n    - 마크다운, html, WISIWYG 입력 모드 지원\n    - 되돌리기, 다시하기 기능 지원\n    - 스타일 전체가 customize 가능\n\n    Github : \n\n    [](https://github.com/bevacqua/woofmark)\n\n    Demo : \n\n    [woofmark](https://bevacqua.github.io/woofmark/)\n\n    ![Woofmark-markdown-editor](https://github.com/PowerStream3604/Toast-markdown-editor/blob/main/markdownEditorPictures/Woofmark.png)\n\n- 4. Ckeditor5\n\n    특징:\n\n    - live preview가 가능\n    - 다른 markdown editor 보다 많은 기능 지원\n\n    Website:\n\n    [Rich text editor of tomorrow | CKEditor 5](https://ckeditor.com/ckeditor-5/)\n\n    Github:\n\n    [ckeditor/ckeditor5](https://github.com/ckeditor/ckeditor5)\n\n    Demo:\n\n    [CKEditor 5 demo - A set of ready to use rich text editors created with a powerful framework](https://ckeditor.com/ckeditor-5/demo/)\n\n- 5. Toast UI Editor\n\n    **소개 :**\n\n    텍스트 또는 WYSIWYG를 사용하여 마크다운 문서 편집기\n\n    구문 강조 표시, 라이브 미리 보기 및 차트 기능이 함께 제공됨\n\n    **특징 :**\n\n    1. 구문 강조 표시\n    2. 라이브 미리 보기\n    3. 차트 기능\n    4. NHN에서 만듦\n    5. 오픈소스\n\n    **license :** \n\n    **MIT** (해당 소프트웨어를 누구든지 무상으로 제한 없이 취급 가능)\n\n    (단, 저작권 표시 및 허가 표시를 소프트웨어의 모든 복제물 또는 중요한 부분에 기재해야 함)\n\n    Website \u0026 Demo:\n\n    [TOAST UI](https://ui.toast.com/tui-editor)\n\n    Github:\n\n    [nhn/tui.editor](https://github.com/nhn/tui.editor)\n\n# 최종적으로 선택한 markdown editor\n\n## Toast UI Editor\n\n선택 이유\n\n- 많은 기능들을 지원\n- live preview가능\n- 상업적으로 이용시에도 무료\n- 깔끔한 디자인\n- ajax를 사용 X \n#### 참고\n\n**customization 후에도 ajax 사용 X** \n## 기존의 Toast UI에서 추가한 기능\n### 이미지 관련 기능\n1. Image Tab에서 ClipBoard tab 추가\n- Clipboard에 복사한 이미지를 ` Ctrl + V ` 로 바로 업로드 가능\n2. 기존의 base64인코딩으로 처리되던 image를 서버로 업로드\n3. 이미지 업로드시 loading progress 표시\n4. 이미지 성공 여부에 따른 prompt box 표시\n\n### 링크 관련 기능\n1. Link tab에서 Target 관련 CheckBox 추가\n- CheckBox 클릭 시 링크가 새로운 탭에서 열린다\n2. `{target='_blank'}` 관련한 markdown 문법 지원\n\n### 이미지 관련 \n  - 1.Insert Image popup에서 clipboard 탭이 하나더 필요\n\n      **원래의 popup**\n\n      ![원래의-popup](https://github.com/PowerStream3604/Toast-markdown-editor/blob/main/markdownEditorPictures/%EC%9B%90%EB%9E%98%EC%9D%98%20popup.png)\n\n      2. customizing 후의 Insert Image 창\n\n      **현재의 popup**\n\n      ![현재의 popup](https://github.com/PowerStream3604/Toast-markdown-editor/blob/main/markdownEditorPictures/%ED%98%84%EC%9E%AC%EC%9D%98%20popup.png)\n\n      3. 이미지 서버 업로드 로딩시 화면\n\n      **loading progress 표시**\n\n      ![image loading progress](https://github.com/PowerStream3604/Toast-markdown-editor/blob/main/markdownEditorPictures/image%20upload%20loading%20progress%20%ED%91%9C%EC%8B%9C.png)\n\n      4. 서버 업로드 작업\n\n      기존의 **toast ui editor**는 **base64**형태로 이미지를 처리\n\n      이는, 이미지 **랜더링**시 많은 부하 유발\n\n      (따라서, 서버로 업로드 결정)\n\n      — **업로드된 후 자동으로 url은 업로드된 경로로 변경됨** —\n\n      ![서버업로드 작업](https://github.com/PowerStream3604/Toast-markdown-editor/blob/main/markdownEditorPictures/%EC%9D%B4%EB%AF%B8%EC%A7%80%20%EC%84%9C%EB%B2%84%20%EC%97%85%EB%A1%9C%EB%93%9C.png)\n\n      5. 업로드 성공시\n\n      **success!!** \n\n      prompt box 표시(animation)\n\n      ![success prompt](https://github.com/PowerStream3604/Toast-markdown-editor/blob/main/markdownEditorPictures/image%20upload%20success%20prompt.gif)\n\n      6. 업로드 실패시\n\n      **failed!!**\n\n      prompt box 표시(animation)\n\n      ![fail prompt](https://github.com/PowerStream3604/Toast-markdown-editor/blob/main/markdownEditorPictures/image%20upload%20fail%20prompt.png)\n      \n      ### 링크 관련\n      \n      1. Target 속성에 New Window checkbox 추가\n      \n      ![link new window checkbox](https://github.com/PowerStream3604/Toast-markdown-editor/blob/main/markdownEditorPictures/link%20%EA%B4%80%EB%A0%A8%20tab.png)\n      \n      2. `New Window` checkbox 클릭시 `{target='_blank'}` 추가됨\n      \n      ![target blank image](https://github.com/PowerStream3604/Toast-markdown-editor/blob/main/markdownEditorPictures/link%20target%20_blank%20image.png)\n      \n      3. 실질적으로 html 태그에 `target='_blank'` 라는 속성 자동으로 추가됨\n\n      ![html blank attribute added](https://github.com/PowerStream3604/Toast-markdown-editor/blob/main/markdownEditorPictures/link%20html%20target%20blank.png)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpowerstream3604%2Ftoast-markdown-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpowerstream3604%2Ftoast-markdown-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpowerstream3604%2Ftoast-markdown-editor/lists"}