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