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

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>

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>

2、注册组件

src\main.ts

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

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>