# the-editor

> a markdown editor

Latest version **0.1.0** (published 2021-02-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install the-editor
pnpm add the-editor
yarn add the-editor
bun add the-editor
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support; large bundle; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2021-02-03 |
| First published | 2020-11-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 6 |
| Unpacked size | 12.1 MB |
| Known vulnerabilities | 0 (+3 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 5 |
| Author | Johnson |
| Maintainers | joenlee |
| Keywords | markdown, editor |

## Links

- npm: https://www.npmjs.com/package/the-editor
- Repository: https://github.com/YES-Lee/the-editor
- Homepage: https://github.com/YES-Lee/the-editor#readme
- Issues: https://github.com/YES-Lee/the-editor/issues
- npm.io page: https://npm.io/package/the-editor

## Dependencies (6)

- [marked](https://npm.io/package/marked.md) ^1.2.7
- [codemirror](https://npm.io/package/codemirror.md) ^5.59.1
- [highlight.js](https://npm.io/package/highlight.js.md) ^10.5.0
- [github-markdown-css](https://npm.io/package/github-markdown-css.md) ^4.0.0
- [resize-observer-polyfill](https://npm.io/package/resize-observer-polyfill.md) ^1.5.1
- [@fortawesome/fontawesome-free](https://npm.io/package/@fortawesome/fontawesome-free.md) ^5.15.1

## Alternatives

- [@mdxeditor/editor](https://npm.io/package/@mdxeditor/editor.md) — 962.4K weekly downloads
- [mmdb-lib](https://npm.io/package/mmdb-lib.md) — 680.9K weekly downloads
- [playcanvas](https://npm.io/package/playcanvas.md) — 36.2K weekly downloads
- [@glw907/cairn-cms](https://npm.io/package/@glw907/cairn-cms.md) — 967 weekly downloads
- [markdown-to-confluence](https://npm.io/package/markdown-to-confluence.md) — 103 weekly downloads

## Recent versions

- 0.1.0 (latest) — 2021-02-03
- 0.0.10 — 2021-02-02
- 0.0.9 — 2021-01-13
- 0.0.8 — 2021-01-13
- 0.0.7 — 2021-01-12
- 0.0.6 — 2021-01-11
- 0.0.5 — 2021-01-10
- 0.0.3 — 2021-01-09
- 0.0.2 — 2021-01-09
- 0.0.1 — 2020-11-21

## README

# The Editor

![build](https://github.com/YES-Lee/the-editor/workflows/Build/badge.svg)
![version](https://img.shields.io/npm/v/the-editor)
![miniziped](https://img.shields.io/bundlephobia/minzip/the-editor)
![total downloads](https://img.shields.io/npm/dt/the-editor)

**The Editor**是一个极简`markdown`编辑器。仅提供了几个核心的基础 API：`getValue`, `getHTML`, `getTOC`, `setValue`。配置选项也非常精简，能满足大部分的需求场景。

[👉 体验一下 👈](https://codesandbox.io/s/the-editor-xd5sf?file=/src/App.vue)

## 特性

- 模块化
- 极简 API
- markdown 代码高亮
- markdown 代码折叠
- 图片上传（粘贴）
- 实时预览
- Table of content（TOC）支持

## 快速开始

### 通过 NPM 引入

安装

```bash
yarn add the-editor
// or
npm i the-editor
```

使用

```javascript
const editor = new TheEditor(editorElement, options);
// options=可选，具体属性见下文
```

以`vue`为例

```javascript
// main.js
import 'the-editor/dist/the-editor.css'; // 引入样式
```

```vue
// app.vue
<template>
  <div ref="editor">
</template>
<script>
import { TheEditor } from 'the-editor'

export default {
  mounted() {
    const editor = new TheEditor(this.$refs.editor, {
      value: '# Hello The Editor'
    })
  }
}
</script>
```

### 通过 jsdelivr 引入

```html
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/the-editor@0.1.0/dist/the-editor.min.css"
/>
<script src="https://cdn.jsdelivr.net/npm/the-editor@0.1.0/dist/the-editor.min.js"></script>
```

## 选项列表

所有选项均为可选

| 选项        | 类型    | 默认值 | 描述                      |
| ----------- | ------- | ------ | ------------------------- |
| value       | string  | null   | markdown 文本             |
| gfm         | boolean | true   | GitHub Flavoured Markdown |
| lineNumbers | boolean | true   | 是否显示行号              |

## 实例方法

| 方法     | 参数   | 返回值                                                  | 描述               |
| -------- | ------ | ------------------------------------------------------- | ------------------ |
| setValue | string | void                                                    | 设置 markdown 文本 |
| getValue |        | string                                                  | 获取 markdown 文本 |
| getHTML  |        | string                                                  | 获取 HTML 文本     |
| getTOC   |        | Array<{ anchor: string; text: string; level: number; }> | 获取 TOC           |

---
_Source: https://npm.io/package/the-editor · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._