wangeditor-antd

基于vite+vue3.5x+typescript重新封装的WangeditorV5富文本编辑器

安装

1npm install wangeditor-antd

或者

1yarn add wangeditor-antd

使用

1<template>
2    <wang-editor v-model:value="html" />
3</template>
4<script setup lang="ts">
5import { ref } from 'vue'
6import WangEditor from 'wangeditor-antd'
7import 'wangeditor-antd/dist/style.css'
8
9const html = ref('')
10</script>

功能

数据绑定使用vue3.5x的defineModel()

const props = defineProps({
  //  编辑器模式 默认为default，可选值：default | simple
  model:{type: String as  PropType<EditorModel>,default:'default'},
  //  是否显示边框
  bordered:{type: Boolean,default:true},
  //  内容区域高度
  height:{type: String,default:'300px'},
  //  上传服务器地址
  server:{type: String,default:''},
  //  上传文件字段名
  fileName:{type: String,default:'file'},
  //  上传文件大小限制，默认2M
  fileSize:{type: Number,default:1024 * 1024 * 5},
  //  上传文件数量限制，默认5
  fileMax:{type: Number,default:5},
  //  placeholder
  placeholder:{type: String,default:'请输入内容...'},
  //  token
  token:{type: String,default:''},
  //  背景颜色 默认#fafafa
  bgColor:{type: String,default:'#fafafa'},
  //  边框颜色 默认#d9d9d9
  borderColor:{type: String,default:'#d9d9d9'},
})