# h-richedit

> 简单的移动端富文本编辑器

Latest version **1.0.1** (published 2018-09-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install h-richedit
pnpm add h-richedit
yarn add h-richedit
bun add h-richedit
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2018-09-04 |
| First published | 2018-09-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 576.5 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 9 |
| Author | houguizhao |
| Maintainers | houxiaozhao |
| Keywords | vue, mobile, richedit, richeditor |

## Links

- npm: https://www.npmjs.com/package/h-richedit
- Repository: https://github.com/houxiaozhao/h-richeditor
- Homepage: https://github.com/houxiaozhao/h-richeditor#readme
- Issues: https://github.com/houxiaozhao/h-richeditor/issues
- npm.io page: https://npm.io/package/h-richedit

## Dependencies (2)

- [lrz](https://npm.io/package/lrz.md) ^4.9.40
- [vue](https://npm.io/package/vue.md) ^2.5.11

## Alternatives

- [ext-list](https://npm.io/package/ext-list.md) — 6.3M weekly downloads
- [@lexical/selection](https://npm.io/package/@lexical/selection.md) — 3.8M weekly downloads
- [@lexical/text](https://npm.io/package/@lexical/text.md) — 3.6M weekly downloads
- [@lexical/clipboard](https://npm.io/package/@lexical/clipboard.md) — 3.0M weekly downloads
- [@tiptap/extension-mention](https://npm.io/package/@tiptap/extension-mention.md) — 3.0M weekly downloads

## Recent versions

- 1.0.1 (latest) — 2018-09-04
- 1.0.0 — 2018-09-04

## README

# h-richeditor

> 简单的移动端富文本编辑器
> 在 h-richeditor 上重新发布了一个包，之前那个不知道怎么搞的，我没有权限发布了。😭
> 改了个名字，使用方式都没有变

## 使用

```bash
# install dependencies
npm i h-richeditor
## OR
yarn add h-richeditor
```

#### `main.js`中

```javascript
import Vue from 'vue';
import RichEditor from 'h-richeditor';
Vue.use(RichEditor);
```

#### 组件中

```vue
<rich-editor :title.sync="title" :description.sync="description" placeholder="标题" contentplaceholder="内容" :hasTitle=true>
</rich-editor>
```

![](https://github.com/houxiaozhao/h-richeditor/blob/master/src/assets/img2.png?raw=true)

![](https://github.com/houxiaozhao/h-richeditor/blob/master/src/assets/img.png?raw=true)

#### 其他

- 使用了 lrz 依赖，用来压缩图片。

- 支持添加图片，粘贴图片到文本框。

- 如果不使用 npm 安装，可以 clone 下来直接复制`src/components`文件夹到项目中。自行修改样式。

- 逻辑比较简单 主要是使用了 contenteditable 这个属性。

- 图片处理稍微复杂一些

  - 直接点击上传按钮添加图片

    得到图片后压缩，添加到 img 标签，然后添加到内容中。

  - 粘贴添加图片

    在 div 上添加监听粘贴事件，得到图片后把图片添加到 div 上，然后还要把事件 emit 到父组件，在绑定的字符串中添加图片

- 实现了双向绑定，一定要添加 sync 修饰符

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