# rich-text-preview

> 富文本预览

Latest version **0.0.13** (published 2022-11-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install rich-text-preview
pnpm add rich-text-preview
yarn add rich-text-preview
bun add rich-text-preview
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.13 |
| Published | 2022-11-14 |
| First published | 2022-11-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 841.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | beidao |
| Maintainers | beidao |
| Keywords | 富文本预览, vue, rich text, richText, rich-text-preview |

## Links

- npm: https://www.npmjs.com/package/rich-text-preview
- npm.io page: https://npm.io/package/rich-text-preview

## Dependencies (2)

- [v-viewer](https://npm.io/package/v-viewer.md) ^1.6.4
- [viewerjs](https://npm.io/package/viewerjs.md) ^1.11.0

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

- 0.0.13 (latest) — 2022-11-14
- 0.0.12 — 2022-11-08
- 0.0.11 — 2022-11-07
- 0.0.10 — 2022-11-07
- 0.0.9 — 2022-11-04
- 0.0.8 — 2022-11-04
- 0.0.7 — 2022-11-04
- 0.0.6 — 2022-11-04
- 0.0.5 — 2022-11-04
- 0.0.4 — 2022-11-04
- 0.0.3 — 2022-11-04
- 0.0.2 — 2022-11-03
- 0.0.1 — 2022-11-03

## README

## 实现富文本1:1 预览
> 有的时候，产品要求实现对富文本的预览效果，但是，现在大型应用都会使用reset.css等全局重置样式，导致富文本中的样式无法通过简单的 innerHTML插入到 div中实现 1:1 预览

### 安装

```bash
npm i rich-text-preview -S

或

yarn i rich-text-preview -S
```

### 用法
main.js 全局注册

```javascript
import Vue from 'vue'
import RichTextPreview from 'rich-text-preview'

Vue.use(RichTextPreview)
```

局部注册组件
```html
<script>
import RichTextPreview from 'rich-text-preview'

export default {
  component: {
    RichTextPreview
  }
}
</script>
```

使用案例：

```html
<template>
  <div id="app">
    <rich-text-preview :html="html" overflow='scroll' :previewImg='true' />
  </div>
</template>

<script>
import RichTextPreview from 'rich-text-preview'

export default {
  component: {
    RichTextPreview
  },
  data() {
    return {
      html: ''
    }
  },

  mounted(){
    this.html = `一段html片段`
  }
}

</script>
```

### 配置说明

属性           |  描述 | 类型            | 默认值|说明|
--------      | --------- |---    |--------|---|
html          | 需要预览的html片段 | String | 空| |
bg            | 背景颜色 | String | 空 ||
previewImg    | 是否需要预览富文本中的图片<br/>(内置支持图片预览) |Boolean| true |
overflow      | 文字超出宽度的表现形式 | String | 'auto' | "hidden"  横向和竖向都隐藏滚动条;<br/> "scroll hidden" 横向滚动条展示，竖向的隐藏;<br/> "hidden scroll" 横向滚动条隐藏， 竖向的展示; <br/>"scroll" 随内容自适应
coverHeight | 溢出值； 当少数情况高度计算不准确，可通过这个属性设置一个较大值 | Number | 0 |
cssText| 需要动态插入的css样式 | String | 空 | |
linkList| 需要动态插入的link的 src | Array | 空 | ["http://xxx.css", 'http://xxx2.css'] 传入链接会帮助你动态插入到DOM中 |
lazy| 富文本中的图片是否启用懒加载 | Boolean | true | lazy需要浏览器原生支持；<br/> 启用懒加载，可能存在容器出现滚动条，如果不希望容器出现滚动条，则禁用改属性 |


### 事件

事件名| 参  数 | 说 明         |
-------|-------|--------|
click-dom      | Function | 事件回传的参数是原生event对象 |

**demo**

```html
<template>
  <div id="app">
    <rich-text-preview :html="html" overflow='scroll' @click-dom='onHandle'/>

    <!-- 禁用图片懒加载 -->
    <rich-text-preview :html="html"  :lazy='false'/>
  </div>
</template>

<script>
import { richTextPreview } from 'rich-text-preview';

export default {
  component: {
    richTextPreview
  },
  data() {
    return {
      html: ''
    }
  },

  mounted(){
    this.html = `一段html片段`
  },
  methods: {
    onHandle(event) {
      // 自行实现图片的预览， 文字截取，等操作
    }
  }
}
</script>
```


### 原理

> iframe天然具备样式隔离，所以，全局的重置样式等问题，无法影响到 iframe中，就能够实现在富文本中输入的内容完整的呈现在预览容器中；
> 其中对富文本中的图片预览是额外提供的内置功能，也可以单独实现；

> 高度自适应是通过 定时器实现，iframe的onload存在一定几率不触发问题

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