@edgex-fe/editor-preview

@edgex-fe/editor-preview 是基于 EdgeX UI 规范的富文本预览组件，用于渲染富文本编辑器返回的 HTML 内容。组件内置统一的排版样式和 HTML 清理逻辑，可在 React、Vue 或原生 Web 项目中使用。

安装

pnpm add @edgex-fe/editor-preview

在应用入口引入样式：

import "@edgex-fe/editor-preview/styles.css";

React

在 React 中可以基于包提供的样式和 HTML 清理函数封装组件：

import {
  getEditorClassName,
  sanitizeEditorHtml,
  type EditorHtml,
} from "@edgex-fe/editor-preview";
import "@edgex-fe/editor-preview/styles.css";

interface EditorPreviewProps {
  html: EditorHtml;
  className?: string;
}

export function EditorPreview({ html, className }: EditorPreviewProps) {
  return (
    <div
      className={getEditorClassName(className)}
      dangerouslySetInnerHTML={{ __html: sanitizeEditorHtml(html) }}
    />
  );
}

使用组件：

<EditorPreview html={editorHtml} />

Vue

Vue 项目可以直接使用包内置的 Custom Element。在应用入口注册一次：

import { defineEditorElement } from "@edgex-fe/editor-preview";
import "@edgex-fe/editor-preview/styles.css";

defineEditorElement();

在组件中传入编辑器返回的 HTML：

<script setup lang="ts">
defineProps<{
  html: string;
}>();
</script>

<template>
  <edgex-editor-preview :html="html" />
</template>

如果项目使用 Vite，需要让 Vue 编译器将该标签识别为 Custom Element：

import vue from "@vitejs/plugin-vue";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: (tag) => tag === "edgex-editor-preview",
        },
      },
    }),
  ],
});

HTML 安全

组件默认会清理 HTML 中的脚本、事件属性和危险链接。React 示例显式调用了 sanitizeEditorHtml，Vue 的 Custom Element 会在渲染时自动执行相同的清理逻辑。

只有在 HTML 来源完全可信时，才应通过 renderEditor 的 sanitize: false 选项跳过清理。