WangEditor 富文本

WangEditor 富文本编辑器封装；文档示例使用客户端渲染以避免 SSR 访问浏览器 API。

基础示例

示例使用本地演示数据；上传、校验和提交不会连接业务后端。

<script setup lang="ts">
import { ref } from "vue";
import { WangEditor } from "@/components/editor/wang-editor";

const content = ref(
  "<h3>IDX Web 富文本示例</h3><p>这里可以编辑正文、插入图片、调整格式，并通过 <strong>v-model</strong> 同步 HTML 内容。</p><ul><li>支持工具栏配置</li><li>支持上传事件接入</li><li>支持只读和隐藏工具栏场景</li></ul>"
);
</script>

<template>
  <ClientOnly>
    <div class="demo-surface">
      <WangEditor v-model="content" height="320px" />
    </div>
  </ClientOnly>
</template>

隐藏源代码

引入方式

import { WangEditor } from "@/components/editor/wang-editor";

Props

参数	说明	类型	默认值	必填
toolbarKeys	工具栏内容	string[]	[]	否
excludeKeys	去除掉指定的工具类内容	string[]	[]	否
height	富文本高度	string	"400px"	否
mode	富文本模式	"default" | "simple"	"default"	否
disabled	是否禁用编辑器	boolean	false	否
hideToolBar	是否隐藏工具栏	boolean	false	否
placeholder	占位符	string	"请输入内容 ..."	否
uploadConfig	上传配置	{<br> /** 单个文件的最大体积限制，默认为 2M */<br> maxFileSize?: number;<br> /** 最多可上传几个文件，默认为 100 */<br> maxNumberOfFiles?: number;<br> /** 上传服务器 */<br> server?: string;<br> }	{}	否
modelValue	组件双向绑定值。	string	""	否

Events

事件名	说明	回调参数
imageUpload	图片上传	file: File, insertFn: ImageInsertFnType
imageBeforeUpload	图片上传前	file: File
imageProgress	图片上传进度	progress: number
imageSuccess	图片上传成功	file: File, res: unknown
imageFailed	图片上传失败	file: File, res: unknown
imageError	图片上传错误	file: File, err: unknown, res: unknown
videoUpload	视频上传	file: File, insertFn: VideoInsertFnType
fileBeforeUpload	文件上传	file: File
fileUpload	文件上传	file: File, insertFn: FileInsertFnType
onPaste	粘贴事件	editor: IDomEditor, event: ClipboardEvent
onCreated	创建事件	editor: IDomEditor
update:modelValue	双向绑定值更新时触发。	value: string

Slots

插槽名	说明	参数
-	该组件未声明 Slots。	-

Expose

名称	说明	类型
editor	暴露 editor 给外部调用。	editorRef
setHtml	暴露 setHtml 给外部调用。	(html: string) => editorRef.value?.setHtml(html)
getHtml	暴露 getHtml 给外部调用。	() => editorRef.value?.getHtml()
clear	暴露 clear 给外部调用。	() => editorRef.value?.clear()
focus	暴露 focus 给外部调用。	() => editorRef.value?.focus()

Module API

名称	说明	类型
WangEditor	导出 WangEditor 供业务侧复用。	useInstall(index)

Types

WangEditorProp

导出 WangEditorProp 供业务侧复用。

字段	说明	类型	默认值	必填
toolbarKeys	工具栏内容	string[]	-	否
excludeKeys	去除掉指定的工具类内容	string[]	-	否
height	富文本高度	string	-	否
mode	富文本模式	"default" | "simple"	-	否
disabled	是否禁用编辑器	boolean	-	否
hideToolBar	是否隐藏工具栏	boolean	-	否
placeholder	占位符	string	-	否
uploadConfig	上传配置	{<br> /** 单个文件的最大体积限制，默认为 2M */<br> maxFileSize?: number;<br> /** 最多可上传几个文件，默认为 100 */<br> maxNumberOfFiles?: number;<br> /** 上传服务器 */<br> server?: string;<br> }	-	否

WangEditorEmits

导出 WangEditorEmits 供业务侧复用。

字段	说明	类型	默认值	必填
imageUpload	图片上传	[file: File, insertFn: ImageInsertFnType]	-	是
imageBeforeUpload	图片上传前	[file: File]	-	是
imageProgress	图片上传进度	[progress: number]	-	是
imageSuccess	图片上传成功	[file: File, res: unknown]	-	是
imageFailed	图片上传失败	[file: File, res: unknown]	-	是
imageError	图片上传错误	[file: File, err: unknown, res: unknown]	-	是
videoUpload	视频上传	[file: File, insertFn: VideoInsertFnType]	-	是
fileBeforeUpload	文件上传	[file: File]	-	是
fileUpload	文件上传	[file: File, insertFn: FileInsertFnType]	-	是
onPaste	粘贴事件	[editor: IDomEditor, event: ClipboardEvent]	-	是
onCreated	创建事件	[editor: IDomEditor]	-	是

API 根据当前组件源码生成；同步版本与验证记录见维护说明。