<p align="center">
<img width=130 alt="web-editor-markdown" src="https://gitee.com/zengyong2020/web-editor-markdown/raw/master/markdown.jpeg" />
<br>
A markdown editor in browser, supports collaborative editing
<br><br>
<a title="npm bundle size" target="_blank" href="https://www.npmjs.com/package/web-editor-markdown"><img alt="npm bundle size" src="https://img.shields.io/bundlephobia/minzip/web-editor-markdown?style=flat-square&color=blueviolet"></a>
<a title="Version" target="_blank" href="https://www.npmjs.com/package/web-editor-markdown"><img src="https://img.shields.io/npm/v/web-editor-markdown.svg?style=flat-square"></a>
<a title="Downloads" target="_blank" href="https://www.npmjs.com/package/web-editor-markdown"><img src="https://img.shields.io/npm/dt/web-editor-markdown.svg?style=flat-square&color=97ca00"></a>
<!-- <a title="Visitors" target="_blank" href="javascript:;"><img src="https://visitor-badge.glitch.me/badge?page_id=zengyong.web-editor-markdown"></a> -->
<br>
</p>
## ð¡ Web Editor Markdown
[web-editor-markdown](https://github.com/Ben-love-zy/web-editor-markdown.git) is a Markdown editor based on Web browser and real-time rendering like `Typora`. It is based on TypeScript and JavaScript, and does not rely on any third-party framework. It supports Chinese friendly and can be easily extended and connected to native JavaScript, Vue, React, Angular and other applications. It provides four rendering modes: `SOURCE`, `SOURCE_AND_PREVIEW`, `RENDER` and `PREVIEW`. If necessary, its underlying layer also supports the ability of collaborative editing and provides atomic `Operation` for extending collaborative editing.
### ⨠English Demo
### ⨠Chinese Demo
### ð ï¸ Getting started
* install it
```shell
npm install web-editor-markdown --save
```
* use it
```ts
import { Editor, withUndoRedo } from "web-editor-markdown";
let editor = new Editor(document.getElementById('id'));
editor = withUndoRedo(editor); // UndoRedo Plugin
editor.insertTextAtCursor('**This is a bold text**\n> tipsï¼You can switch source mode with `cmd+/`');
```
* others
```ts
import { EditorViewMode } from "web-editor-markdown";
editor.switchViewMode(EditorViewMode.PREVIEW); // switch rendering modeï¼(shortcut key: 'cmd+/')
console.log('content', editor.getContent());
```
* local source
```shell
npm install
npm start
```
基于 web 端的 Markdown 编辑器，支持协同编辑扩展和方便的插件扩展
需积分: 0 182 浏览量
2023-01-17
15:46:17
上传
评论 2
收藏 948KB ZIP 举报
web-editor-markdown-master.zip （95个子文件） 
web-editor-markdown-master 
webpack.config.sdk.js 3KB webpack.config.js 3KB src plugins undo-redo undo-redo.ts 5KB undo-redo-editor.ts 376B index.ts 27B index.ts 69B collaborative-editing collaborative-editing-editor.ts 250B collaborative-editing.ts 502B index.ts 39B assets index.less 3KB view-model view-model.ts 142B operations operation.ts 339B set-selection-operation.ts 1KB remove-text-operation.ts 877B insert-text-operation.ts 884B index.ts 153B utils weak-map.ts 0B debounce.ts 307B browser.ts 448B markdown-parse markdown-render index.ts 729B html-generate.ts 9KB markdown-block-creater list-item-creater.ts 6KB fenced-code-block-creater.ts 2KB setext-heading-creater.ts 331B creater.ts 2KB thematic-break-creater.ts 1KB factory.ts 2KB block-quote-creater.ts 2KB html-block-creater.ts 302B table-creater.ts 3KB indented-code-block-creater.ts 355B atx-heading-creater.ts 802B markdown-parser-line common.ts 1KB delimiter-stack.ts 1KB index.ts 19KB markdown-parser-block index.ts 8KB tree-walker.ts 1KB node document-node.ts 664B table-thead-node.ts 2KB block-quote-node.ts 1KB image-node.ts 583B table-td-node.ts 718B thematic-break-node.ts 698B paragraph-node.ts 771B code-node.ts 539B checkbox-node.ts 758B list-node.ts 1KB item-node.ts 2KB head-node.ts 701B table-node.ts 832B node.ts 4KB del-node.ts 532B table-tr-node.ts 745B strong-node.ts 632B emph-node.ts 535B text-node.ts 763B table-tbody-node.ts 739B underline-node.ts 551B code-block-node.ts 1KB link-node.ts 586B table-th-node.ts 719B index.ts 2KB html-block-node.ts 930B index.ts 1KB funs.ts 2KB event view-event.ts 1KB keyboard-event.ts 4KB mouse-event.ts 1KB base-event.ts 2KB hotkeys.ts 2KB index.ts 1KB view source-and-preview-view.ts 2KB base-view.ts 13KB preview-view.ts 705B source-view.ts 1KB view-provider.ts 1KB render-view.ts 701B index.ts 198B model text-model.ts 2KB selection-model.ts 3KB index.ts 64B index.ts 107B editor.ts 12KB LICENSE 1KB
demo-en.gif 166KB markdown.jpeg 27KB demo text.ts 2KB
index.html 1KB index.ts 1021B package.json 1KB package-lock.json 208KB .gitignore 185B demo-zh.gif 709KB tsconfig.json 1KB README.md 2KB资源评论
