富文本—wangeditor4--vue3

插件文档地址
https://www.wangeditor.com/v4/pages/01-%E5%BC%80%E5%A7%8B%E4%BD%BF%E7%94%A8/01-%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8.html




npm 安装 npm i wangeditor --save



<button @click="addcon">设置内容</button>
<button @click="gethtml">获取html</button>
<div id="div1"></div>



//引入组件
import E from 'wangeditor'
//引入我的接口
import {upfile} from '../assets/common'




    //公共变量定义实例
    const fwb = ref()

    onMounted(()=>{
      fwb.value = new E('#div1')

      // 配置菜单栏，设置不需要的菜单
      // fwb.value.config.excludeMenus = [
      //     'emoticon',
      //     'video'
      // ]

      // 配置菜单栏，设置需要的菜单
      fwb.value.config.menus = [
        'head',
        'bold',
        'fontSize',
        'image',
      ]



      //上传图片
      
      //方案一：返回格式符合要求
      //配置服务端接口
      // fwb.value.config.uploadImgServer = 'http://91fen.vip:15086/fileUpload'
      

      // 方案二：自己上传图片，传入链接
   
      fwb.value.config.customUploadImg = async function  (resultFiles, insertImgFn) {
          // resultFiles 是 input 中选中的文件列表
          
          //根据自己的需要执行上传,异步变同步，保证得到链接后再展示防止报错
          var imgurl = await myupfileapi(resultFiles[0])

          // insertImgFn 是获取图片 url 后，插入到编辑器的方法
          // 上传图片，返回结果，将图片插入到编辑器中
          insertImgFn(imgurl)

      }



      fwb.value.create()

      fwb.value.$textContainerElem.css('height', '200px !important'); //设置高度
    
    })



    //按钮设置内容
    const addcon = ()=>{
      fwb.value.txt.html('<p>按钮  设置的内容</p><img src="http://91fen.vip:15086/duan/20240228/4C08F8764529C83FE53B50F0BA96C620.png">') // 重新设置编辑器内容
    }
    //我的上传图片方法
    const myupfileapi = async (file)=>{

      const formData = new FormData()
      formData.append('myfile',file)
      formData.append('packageName','pc')
      
      var imgurl =  await upfile(formData).then((response)=>{
          return response.data.data.url
      })

      return imgurl

    }
    //获取html
    const gethtml = ()=>{
        console.log(fwb.value.txt.html())
    }