JLC Docs
PIG
AI
PIG
AI

前端富文本组件

组件介绍

Wangeditor 是一款基于 Web 的所见即所得富文本编辑器，它提供了丰富的富文本编辑功能，支持插入图片、音视频等多媒体内容，并且可以通过自定义插件扩展其功能。Wangeditor 支持跨浏览器和跨平台，同时具有良好的兼容性和性能表现，易于集成和使用。

Wangeditor 采用 HTML5 和 JavaScript 技术实现，可以直接嵌入到网页中使用，也可以作为独立的编辑器使用。在使用过程中，Wangeditor 提供了简洁的 API 接口和详细的文档，方便开发人员进行二次开发和扩展。

页面使用

<template>
  <editor v-model:get-html="form.content" />
</template>

<script setup lang="ts">
import { reactive } from 'vue';
import editor from '/@/components/Editor/index.vue';

const form = reactive({
  content: ''
});
</script>
双向绑定

使用 v-model:get-html 可以双向绑定 HTML 内容，使用 v-model:get-text 可以获取纯文本内容。

属性说明

属性名称描述类型默认值
disable是否禁用编辑器Booleanfalse
placeholder编辑器默认占位符String"请输入内容..."
mode编辑器模式，可选值为 default 或 simpleStringdefault
height编辑器高度String"310px"
getHtml双向绑定的属性，用于获取编辑器中 HTML 内容String-
getText双向绑定的属性，用于获取编辑器中纯文本内容String-
uploadFileUrl上传文件的接口地址String"/admin/sys-file/upload"

编辑器模式

Wangeditor 提供两种编辑模式：

default 模式

默认模式提供完整的编辑功能，包括文本格式化、插入图片、视频、表格等高级功能。

<editor v-model:get-html="content" mode="default" />

simple 模式

简化模式仅提供基础的文本编辑功能，适用于不需要复杂格式的场景。

<editor v-model:get-html="content" mode="simple" />

文件上传配置

组件支持自定义文件上传接口：

<editor
  v-model:get-html="content"
  uploadFileUrl="/api/custom/upload"
/>
上传接口规范

自定义上传接口需要返回符合 Wangeditor 规范的 JSON 格式，包含 url 字段表示上传后的文件地址。

获取内容

获取 HTML 内容

<template>
  <editor v-model:get-html="htmlContent" />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const htmlContent = ref('<p>默认内容</p>');
</script>

获取纯文本内容

<template>
  <editor v-model:get-text="textContent" />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const textContent = ref('默认文本');
</script>

禁用编辑器

在查看模式下可以禁用编辑功能：

<editor v-model:get-html="content" :disable="true" />
最佳实践

在详情页面中使用禁用模式展示富文本内容，可以保持样式的同时防止误操作。

本页目录