Skip to content

ContentEditor 富文本编辑器

基于 wangEditor 封装的富文本编辑器组件,支持图片上传、自定义工具栏等功能。(注:此组件意在快速生成富文本控件(支持v-model),提供一些通用的配置。)

提示

1、图片上传功能,请先配置全局请求配置,上传接口、预览方法。
2、此处用图片和代码展示调用方式,wangeditor ssr存在问题!

用法

vue
<template>
  <div class="demo-wrapper">
    <div class="demo-item">
      <s-content-editor v-model:value="content1" placeholder="请输入内容..." />
    </div>
  </div>
</template>

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

const content1 = ref("<p>富文本内容</p>");
</script>

API

属性

属性名说明类型默认值
value(v-model)编辑器内容string''
readOnly是否只读booleanfalse
height编辑器高度string'360px'
placeholder占位文本string'请输入内容...'
toolbarConfig工具栏配置,参考Partial<IToolbarConfig>{ excludeKeys: ['insertVideo', 'insertTable'] }
mode编辑器模式'simple' | 'default''default'
uploadConfig图片上传配置(请参考useCustomUpload--