实现富文本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存在一定几率不触发问题