富文本编辑器 TinyEditor

采用tinymce编辑器二次开发

基础用法

basic.vue

<template>
  <p>默认富文本</p>
  <dk-tiny-editor v-model="value" />
  <p>宽度低于设置定值</p>
  <dk-tiny-editor v-model="value" style="width: 299px" />
</template>
<script setup lang="ts">
import { ref } from 'vue'

const value = ref('')
</script>

组件配置

TinyEditor Props

属性	说明	类型	默认值
disabled	是否禁用编辑器	Boolean	false
modelValue	编辑器内容	String	''
height	编辑器高度	Number	400
document	是否显示文档效果	Boolean	false
buttonText	按钮文本	String	'编辑富文本'
showDialogWidth	弹窗宽度	Number	300

TinyEditor Events

事件名	说明	参数
update:modelValue	更新modelValue值	(newValue: string) => void
input	输入事件	(newValue: string) => void
change	内容改变事件	(newValue: string) => void
click	点击触发的事件	(event: MouseEvent) => void