Rich-text-preview NPM

实现富文本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>