vue3使用wangeditor封装和自定义上传文件官方教程

 更新时间:2023年06月25日 17:35:16   作者:张旭超  
这篇文章主要为大家介绍了vue3使用wangeditor封装和自定义上传文件的官方教程,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪<BR>

1、基本配置

官方教程 https://www.wangeditor.com/

2、封装组件

/**
  initValue: 父组件传递过来的富文本框初始值,这里会实时监听,更新初始值,放置在弹窗中使用,没有钩子函数的更新。
  getEditorContent() 方法,父组件通过这个方法获取富文本编辑器的内容,包括数组格式的和html格式的内容
*/
<template>
  <div v-html="valueHtml"></div>
  <div style="border: 1px solid #ccc">
    <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'
// 初始值
const props = defineProps({
  initValue: String
})
const emits = defineEmits(['getEditorContent'])
// const emits = defineEmits([''])
let mode = ref('default')
// 编辑器实例,必须用 shallowRef
const editorRef = shallowRef()
// 内容 HTML
const valueHtml = ref('')
// 模拟 ajax 异步获取内容
onMounted(() => {
  nextTick(() => { // 界面节点更新完以后再修改值。
    valueHtml.value = 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', // 清除格式
    'fullScreen' // 全屏
  ]
}
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();
        formData.set('file', file)
        // 这里根据自己项目封装情况,设置上传地址
        axios.defaults.headers.common['Authorization'] = 'Bearer eyJhbGciOiJIUzUxMiJ9.eyJ1c2VyX2lkIjoxLCJ1c2VyX2tleSI6IjVhYzc3MDQxLTE3NGItNDEwZC1hOTJlLTVkYzU0YmRhMjllNiIsInVzZXJuYW1lIjoiYWRtaW4ifQ.GhdthjLmw4NP2WV2owYQS70tacRM-pX7NqI7Mo0_j_hatiqtSrqAr0RJC40osRETiQo_dacZcvNqATLsJHL77A'
        let result = await axios.post('https://zxc.test.cn/file/upload', formData)
         // 插入到富文本编辑器中,主意这里的三个参数都是必填的,要不然控制台报错:typeError: Cannot read properties of undefined (reading 'replace')
        insertFn(result.data.data.url, result.data.data.name, result.data.data.name)
      }
    }
  }
}
// 组件销毁时,也及时销毁编辑器
onBeforeUnmount(() => {
    const editor = editorRef.value
    if (editor == null) return
    editor.destroy()
})
const handleCreated = (editor) => {
  editorRef.value = editor // 创建富文本编辑器
}
const handleChange = (info) => {
  // info.children 数组包含了数据类型和内容,valueHtml.value内容的html格式
  emits('getEditorContent', info.children, valueHtml.value)
}
watch(()=>props.initValue, (value) => {  // 父组件获取初始值
  valueHtml.value = value
})
</script>

3、使用

父组件
<wang-editor :initValue="form.baseInfo.descInfo" @getEditorContent="onEditorChange"></wang-editor>
import WangEditor from '@/components/WangEditor'
const onEditorChange = (arr, html) => {
    console.log(arr, html)
}

以上就是vue3使用wangeditor封装和自定义上传文件官方教程的详细内容,更多关于vue3 wangeditor封装上传文件的资料请关注脚本之家其它相关文章!

相关文章

  • mint-ui如何自定义messageBox样式

    mint-ui如何自定义messageBox样式

    这篇文章主要介绍了mint-ui如何自定义messageBox样式问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-05-05
  • vue插件vue-resource的使用笔记(小结)

    vue插件vue-resource的使用笔记(小结)

    本篇文章主要介绍了vue插件vue-resource的使用笔记(小结),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • vue.js项目使用原生js实现移动端的轮播图

    vue.js项目使用原生js实现移动端的轮播图

    这篇文章主要为大家介绍了vue.js项目中使用原生js实现移动端的轮播图,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-04-04
  • Vue中定义src在img标签使用时加载不出来的解决

    Vue中定义src在img标签使用时加载不出来的解决

    这篇文章主要介绍了Vue中定义src在img标签使用时加载不出来的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-07-07
  • Vue中如何使用mock模拟数据

    Vue中如何使用mock模拟数据

    这篇文章主要介绍了Vue中如何使用mock模拟数据,具有很好的价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-06-06
  • vuex状态管理浅谈之mapState用法

    vuex状态管理浅谈之mapState用法

    当一个组件需要获取多个状态的时候,将这些状态都声明为计算属性会有些重复和冗余,为了解决这个问题我们可以使用mapState辅助函数帮助我们生成计算属性,这篇文章主要给大家介绍了关于vuex状态管理之mapState用法的相关资料,需要的朋友可以参考下
    2023-12-12
  • Vue3中的shallowRef 和shallowReactive对比分析

    Vue3中的shallowRef 和shallowReactive对比分析

    这篇文章主要介绍了Vue3中的shallowRef 和shallowReactive,通过示例代码逐一对他们的使用做的详细介绍,文末补充介绍了vue3的shallowRef()、shallowReactive()和shallowReadonly()的使用,需要的朋友可以参考下
    2023-01-01
  • 极速上手 VUE 3 teleport传送门组件及使用语法

    极速上手 VUE 3 teleport传送门组件及使用语法

    teleport 传送门组件,提供一种简洁的方式,可以指定它里面的内容的父元素,也就是说teleport 中的内容允许我们控制在任意的DOM中,使用简单,对VUE 3 teleport传送门相关知识感兴趣的朋友一起看看吧
    2021-10-10
  • Vue实例初始化为渲染函数设置检查源码剖析

    Vue实例初始化为渲染函数设置检查源码剖析

    这篇文章主要为大家介绍了Vue实例初始化为渲染函数设置检查源码剖析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • Vue 自定义指令功能完整实例

    Vue 自定义指令功能完整实例

    这篇文章主要介绍了Vue 自定义指令功能,结合完整实例形式分析了vue.js自定义指令相关实现与使用操作技巧,需要的朋友可以参考下
    2019-09-09

最新评论