|
@@ -2,7 +2,7 @@
|
|
|
<template>
|
|
|
<div>
|
|
|
<div v-if="props.item?.label" class="ml-2 mb-2 color959595">{{ props.item.label }}</div>
|
|
|
- <div class="box z-10">
|
|
|
+ <div class="z-10 box mb-5">
|
|
|
<!-- 工具栏 -->
|
|
|
<Toolbar
|
|
|
:editor="editorRef"
|
|
@@ -15,20 +15,22 @@
|
|
|
:defaultConfig="editorConfig"
|
|
|
:editorId="editorId"
|
|
|
:style="editorStyle"
|
|
|
+ @on-maxLength="onMaxLengthFun"
|
|
|
+ @on-blur="onBlurFun"
|
|
|
@on-change="handleChange"
|
|
|
@on-created="handleCreated"
|
|
|
/>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
-<!-- <style src="@wangeditor/editor/dist/css/style.css"></style> -->
|
|
|
<script setup>
|
|
|
-defineOptions({ name: 'wangeditor-index' })
|
|
|
+defineOptions({ name: 'wangEditor-index' })
|
|
|
import '@wangeditor/editor/dist/css/style.css' // 引入 css
|
|
|
import { onBeforeUnmount, ref, shallowRef, unref, computed, nextTick, watch } from 'vue'
|
|
|
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
|
|
|
import { i18nChangeLanguage } from '@wangeditor/editor'
|
|
|
import { isNumber } from '@/utils/is'
|
|
|
+import Snackbar from '@/plugins/snackbar'
|
|
|
// import { getAccessToken, getTenantId } from '@/utils/auth'
|
|
|
|
|
|
i18nChangeLanguage('zh-CN')
|
|
@@ -48,7 +50,7 @@ const props = defineProps({
|
|
|
},
|
|
|
height: {
|
|
|
type: [Number, String],
|
|
|
- default: '200px'
|
|
|
+ default: '300px'
|
|
|
},
|
|
|
editorConfig: {
|
|
|
type: Object,
|
|
@@ -83,7 +85,7 @@ watch(
|
|
|
watch(
|
|
|
() => valueHtml.value,
|
|
|
(val) => {
|
|
|
- emit('update:modelValue', val)
|
|
|
+ emit('update:modelValue', val === '<p><br></p>' ? '' : val)
|
|
|
}
|
|
|
)
|
|
|
|
|
@@ -91,13 +93,23 @@ const handleCreated = (editor) => {
|
|
|
editorRef.value = editor
|
|
|
}
|
|
|
|
|
|
+const onMaxLengthFun = (editor) => {
|
|
|
+ const maxLength = editor?.getConfig()?.maxLength || null
|
|
|
+ if (maxLength) Snackbar.info(`最多可输入${maxLength}个字符`)
|
|
|
+}
|
|
|
+
|
|
|
+const onBlurFun = (editor) => {
|
|
|
+ const text = editor.getText()?.replace(/\s+/g, '')
|
|
|
+ if (!text) valueHtml.value = ''
|
|
|
+}
|
|
|
+
|
|
|
// 编辑器配置
|
|
|
-import Snackbar from '@/plugins/snackbar'
|
|
|
const editorConfig = computed(() => {
|
|
|
return Object.assign(
|
|
|
{
|
|
|
placeholder: '请输入内容...',
|
|
|
readOnly: props.item.readonly || props.readonly,
|
|
|
+ maxLength: Number(props.item.maxLength) || Number(props.maxLength) || null,
|
|
|
customAlert: (s, t) => {
|
|
|
switch (t) {
|
|
|
case 'success':
|