# web-editor-markdown

**Repository Path**: liangliangboy/web-editor-markdown

## Basic Information

- **Project Name**: web-editor-markdown
- **Description**: 基于 web 端的 Markdown 编辑器，支持协同编辑扩展和方便的插件扩展
- **Primary Language**: TypeScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 30
- **Created**: 2023-04-19
- **Last Updated**: 2023-07-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README


## 说明：此文件经个人转译，只保留个人认为的重要信息，如需查看原文，请访问[原连接](https://gitee.com/zengyong2020/web-editor-markdown/)

## 网页版Markdown编辑器

web-editor-markdown是一款基于浏览器的可以像Typora一样实时渲染的Markdown编辑器，该编辑器由TypeScript和JavaScript编程语言开发，不依赖于其他第三方库。支持中文，可通过本地接入方式为Javascript、Vue、React等应用扩展功能，拥有四种渲染方式：`SOURCE`,`SOURCE_AND_PREVIEW`, `RENDER` and `PREVIEW`,如果有必要，该工具的底层还支持协作编辑的能力，该操作还可以是原子级的。

### 语言版本
可知的是，目前拥有英语和汉语两个版本。


### 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
```