vue3中，渲染动态表单（二）——使用wangEditor组件 & vue3基础页面的写法之defineComponent、toRefs、reactive和return & main文件注册全局组件_vue3 form 使用wangeditor

vue3中，渲染动态表单（二）——使用wangEditor组件 & vue3基础页面的写法之defineComponent、toRefs、reactive和return & main文件注册全局组件

效果

1、页面

index.vue

1

 <!-- editor  富文本类型 -->
<wangEditor style="width:100%" v-if="item.type === 'editor'" :initValue="dataSource[`${item.prop}`]" :disabled="showWang" ></wangEditor>

<srcipt>
import { defineComponent,toRefs, reactive } from 'vue'
import { useRoute } from 'vue-router'
export default defineComponent({
  setup() {
    name: 'CustomForm',
      const state = reactive({
        showWang: false,
        isEditDisabled: query.type === 'view' ? true : false,
      })
     return {
        ...toRefs(state),
      }
  }
})
</srcipt>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

2

<wangEditor v-if="showWang" :initValue="textInfo.content" :disabled="wangDisabled"
                @getEditorContent="onEditorChange"></wangEditor>

<script lang="ts" setup>
import { ref, inject, onMounted } from 'vue';
 
const showWang = ref(false)
const wangDisabled = ref(false)
const textInfo = ref({
    content: ''
})

// 富文本
const onEditorChange = (arr: any, html: any) => {
    textInfo.value.content = html
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

2、注册组件

src\main.ts

/*富文本编辑器*/
app.component('wangEditor', wangEditor);
import wangEditor from "./components/wangEditor/index.vue";
1
2
3

3、富文本wangEditor组件

src\components\wangEditor\index.vue

<template>
    <div style="border: 1px solid #ccc" id="wangEditor">
        <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode" />
        <Editor style="min-height: 100px; overflow-y: hidden; text-align: left;" v-model="valueHtml"
            :defaultConfig="editorConfig" :mode="mode" @onCreated="handleCreated" @onChange="handleChange" />
    </div>
</template>
<script setup>
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { onBeforeUnmount, ref, shallowRef, onMounted, nextTick, watch } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import axios from 'axios'
import { inject } from "vue";
const constant = inject('constant')
// 初始值
const props = defineProps({
    initValue: String,
    disabled: {
        type: Boolean,
        default :false,
    },
    index: Number
})
const emits = defineEmits(['getEditorContent'])
let mode = ref('default')
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()
// 内容 HTML
const valueHtml = ref('')
// 模拟 ajax 异步获取内容
onMounted(() => {
    nextTick(() => { // 界面节点更新完以后再修改值。
        valueHtml.value = props.initValue==null?'':props.initValue
    })
})
// 工具栏配置
const toolbarConfig = {
    toolbarKeys: [
        // 菜单 key
        'headerSelect',
        'bold', // 加粗
        'italic', // 斜体
        'through', // 删除线
        'underline', // 下划线
        'bulletedList', // 无序列表
        'numberedList', // 有序列表
        'color', // 文字颜色
        'insertLink', // 插入链接
        'fontSize', // 字体大小
        'lineHeight', // 行高
        'uploadImage', // 上传图片
        'delIndent', // 缩进
        'indent', // 增进
        'deleteImage',//删除图片
        'divider', // 分割线
        'insertTable', // 插入表格
        'justifyCenter', // 居中对齐
        'justifyJustify', // 两端对齐
        'justifyLeft', // 左对齐
        'justifyRight', // 右对齐
        'undo', // 撤销
        'redo', // 重做
        'clearStyle', // 清除格式
    ]
}
const editorConfig = {
    placeholder: '请输入内容...', // 配置默认提示
    // readOnly: true,
    MENU_CONF: {                // 配置上传服务器地址
        uploadImage: {
            // 小于该值就插入 base64 格式（而不上传），默认为 0
            base64LimitSize: 5 * 1024, // 5kb
            // 单个文件的最大体积限制，默认为 2M
            // maxFileSize: 1 * 1024 * 1024, // 1M
            // // 最多可上传几个文件，默认为 100
            // maxNumberOfFiles: 5,
            // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
            allowedFileTypes: ['image/*'],
            // 自定义上传
            async customUpload(file, insertFn) { // 文件上传
                const formData = new FormData();
                // let formData = new FormData();
                formData.append('file', file);
                formData.append('fileName', file.name)
                formData.append('fileType', '0')
                formData.append('encrypt', 1)
                formData.append('domain', "wangEditor")
                formData.append('code', '1');               // 业务标记
                formData.append('remark', "");           // 备注
                // 这里根据自己项目封装情况，设置上传地址
                // axios.defaults.headers.common['Authorization'] = 'Bearer eyJhbGciOiJIUzUxMiJ9.eyJ1c2VyX2lkIjoxLCJ1c2VyX2tleSI6IjVhYzc3MDQxLTE3NGItNDEwZC1hOTJlLTVkYzU0YmRhMjllNiIsInVzZXJuYW1lIjoiYWRtaW4ifQ.GhdthjLmw4NP2WV2owYQS70tacRM-pX7NqI7Mo0_j_hatiqtSrqAr0RJC40osRETiQo_dacZcvNqATLsJHL77A'
                let result = await axios.post(process.env.VUE_APP_API_HOST + constant.fileUpload + '/uploadImage', formData)
                // 插入到富文本编辑器中，主意这里的三个参数都是必填的，要不然控制台报错：typeError: Cannot read properties of undefined (reading 'replace')
                insertFn(process.env.VUE_APP_API_HOST + constant.fileUpload + '/previewImage?id=' + result.data.data[0].id, file.name, file.name)
            }
        }
    }
}
// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
    const editor = editorRef.value
    if (editor == null) return
    editor.destroy()
})
const handleCreated = (editor) => {
    editorRef.value = editor // 创建富文本编辑器
    if(props.disabled){
        editorRef.value.disable()  //禁用
    }
}
const handleChange = (info) => {
    // info.children 数组包含了数据类型和内容，valueHtml.value内容的html格式
    emits('getEditorContent', info.children, valueHtml.value, props.index)
}
watch(() => props.initValue, (value) => {  // 父组件获取初始值
    valueHtml.value = value
})
</script>

<style>
.w-e-text-placeholder {
    top: 10px;
}

.w-e-text-container {
    height: 300px;
}

.w-e-selected-image-container {
    max-width: 800px;
}

.w-e-hover-bar .w-e-bar-item:nth-of-type(4),
.w-e-hover-bar .w-e-bar-item:nth-of-type(5) {
    display: none;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137