云墨UI

Appearance

RichText 富文本渲染器(1.3.3) ​

RichText 组件是一个用于展示富文本内容的 Vue 组件，支持 HTML 内容的渲染、净化以及图片预览功能。

基础用法 ​

使用content属性传入富文本内容，组件会自动渲染。

<template>
    <ym-rich-text :content="htmlContent" />
  </template>
  
  <script setup lang="ts">
  import { ref } from 'vue';
  import { YmRichText } from 'guyan-ym-ui';
  import 'guyan-ym-ui/dist/index.css';
  
  const htmlContent = ref('<p>这是一段富文本内容。</p>');
  </script>

净化HTML内容 ​

使用is-clean属性开启HTML内容的净化功能，防止XSS攻击。通过config属性可以自定义净化规则。

TIP

净化HTML内容需要引入DOMPurify库，提供了一套默认的净化配置规则，可以自定义，具体规则请参考DOMPurify。

净化后：

未净化：

<template>
    <p>净化后：</p>
    <ym-rich-text :content="htmlContent" :isClean="true" />
    <p>未净化：</p>
    <ym-rich-text :content="htmlContent" :isClean="false" />
  </template>
  
  <script setup lang="ts">
  import { ref } from 'vue';
  import { YmRichText } from 'guyan-ym-ui';
  import 'guyan-ym-ui/dist/index.css';
  
  const htmlContent = ref(`<p>净化后的内容: <a href="javaScript:alert('恭喜你被诈骗了100元，以后长点心吧傻孩子！！！')">点击我领福利</a><strong>Safe Content</strong></p>`);
  </script>

图片预览 ​

使用is-img-preview属性开启图片预览功能，点击富文本中的图片时会自动弹出大图。使用preview-config属性可以自定义图片预览的配置。

<template>
    <ym-rich-text :content="htmlContent" :isImgPreview="true" />
  </template>
  
  <script setup lang="ts">
  import { ref } from 'vue';
  import { YmRichText } from 'guyan-ym-ui';
  import 'guyan-ym-ui/dist/index.css';
  
  const htmlContent = ref('<p>点击图片预览: <img src="https://jeek-space-blog.top:3000/images/article/6c372c58e9f76a1059cec97dae6b84d7.jpeg" alt="example" /></p>');
  </script>

RichText API ​

Props ​

属性名描述类型可选值默认值
content富文本内容string--
configDOMPurify 配置object--
isClean是否净化HTML内容boolean-true
isImgPreview是否开启图片预览boolean-false
previewConfig图片预览配置ImageViewerProps--

Emits ​

事件名描述参数类型
click点击富文本内容时触发MouseEvent

Expose ​

属性名描述
ref组件的根元素引用
normalizationHtml修改富文本渲染器与内容
cleanContent净化HTML内容的方法，返回净化后的TrustedHTML对象
dompurifyIstanceDOMPurify 实例