实现富文本1:1 预览
有的时候，产品要求实现对富文本的预览效果，但是，现在大型应用都会使用reset.css等全局重置样式，导致富文本中的样式无法通过简单的 innerHTML插入到 div中实现 1:1 预览
安装
npm i rich-text-preview -S
或
yarn i rich-text-preview -S用法
main.js 全局注册
import Vue from 'vue'
import RichTextPreview from 'rich-text-preview'
Vue.use(RichTextPreview)局部注册组件
<script>
import RichTextPreview from 'rich-text-preview'
export default {
component: {
RichTextPreview
}
}
</script>使用案例：
<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 | 是否需要预览富文本中的图片 (内置支持图片预览) |
Boolean | true | |
| overflow | 文字超出宽度的表现形式 | String | 'auto' | "hidden" 横向和竖向都隐藏滚动条; "scroll hidden" 横向滚动条展示，竖向的隐藏; "hidden scroll" 横向滚动条隐藏， 竖向的展示; "scroll" 随内容自适应 |
| coverHeight | 溢出值； 当少数情况高度计算不准确，可通过这个属性设置一个较大值 | Number | 0 | |
| cssText | 需要动态插入的css样式 | String | 空 | |
| linkList | 需要动态插入的link的 src | Array | 空 | ["http://xxx.css", 'http://xxx2.css'] 传入链接会帮助你动态插入到DOM中 |
| lazy | 富文本中的图片是否启用懒加载 | Boolean | true | lazy需要浏览器原生支持； 启用懒加载，可能存在容器出现滚动条，如果不希望容器出现滚动条，则禁用改属性 |
事件
| 事件名 | 参 数 | 说 明 |
|---|---|---|
| click-dom | Function | 事件回传的参数是原生event对象 |
demo
<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存在一定几率不触发问题