富文本控件自定义选择图片

1.场景介绍

在富文本编辑器中，需要选择图片和附件，图片来源和附件来源于素材库

2.效果展示

以向订单详情中加入商品信息为例，勾选弹出窗口的商品信息时，订单详情子表格中会同步添加对应的商品信息。效果图如下：

3.实现思路

视图作为一个弹窗，视图自定义查询素材库接口给数据，当数据选中后，传递给富文本组件。

4.操作步骤

4.1、生成一个页面图片和附件选择器，创建一个视图，类型为画廊，名称图片视图

4.2、设置可选择行逻辑

4.3、添加一个方法getImageGroupList获取图片分组

const { origin } = window.location
const url = `${origin}/afc/api/afc/material-groups`
const params = {
  materialType: 'image',// 如果是附件值为attachment
  pageIndex: 0,
  pageSize: -1
}
const res = await this.Ajax.get(url, params)
return res && res.data || []

4.4、添加一个方法getImageInfoList(groupId) 根据分组id查询对应的图片

const { origin } = window.location
const url = `${origin}/afc/api/afc/materials/list` // 如果是附件值为`${origin}/afc/api/afc/materials/page`
const params = {
  materialGroupId: groupId,
  materialType: 'image', // 如果是附件值为attachment
  pageIndex: 0,
  pageSize: -1
}
const res = await this.Ajax.get(url, params)
return res

4.5、视图里面声明一个变量imageGroupList 为[]

4.6、添加事件视图查询前

this.v_imageGroupList = await this.getImageGroupList()
console.log('this.v_imageGroupList:', this.v_imageGroupList)
const { level } = this.condition
const filterValue = level && level.value || ''
const findItem = this.v_imageGroupList.find((item)=>item.id === filterValue || item.code === filterValue) || this.v_imageGroupList[0]
const { id } = findItem
const res  = await this.getImageInfoList({groudId: id})
let result = []
let type = 'image' // 类型可以是图片或者附件
if(type === 'image') {
  // 如果是图片两者选其一
  result = res.map((ele)=>{
    const { code, iconType, types } = ele
    const url = `/afc/api/afc/materials/font/actions/show?code=${code}&iconType=${iconType}&types=${types}`
    return {
      ...ele,
      url: url,
      html: `<img src="${url}" style="width:120px;height:120px;" />` 
    }
  })
} else {
  // 如果是附件两者选其一
  const { origin } = window.location
  result = res.map((ele)=>{
    const { fileId, name } = ele
    const url = `${origin}/afc/api/lowcode/models/attachments/${fileId}/actions/download`
    return {
      ...ele,
      url: url,
      html: `<a href="${url}">${name}</a>` 
    }
  })
}

this.data = result
console.log('data:', this.data, this)
this.loading = false
return false

4.7、添加筛选条件

4.8、 添加一个富文本编辑页面，富文本组件配置如下

bold italic underline strikethrough | fontsizeselect | forecolor | alignleft aligncenter alignright alignjustify | customImage | customAttachment

4.9、表单添加事件表单加载前

this.$bus.$on('clickCustomImage', (value) => { // 监听点击图片
  this.Api.openDialog({
    "id": 'ffff.Apple', // 弹窗是创建的图片视图id
    "width": "500px",
    "height": "500px",
    "resourceType": 'view_grid_1',
    "dialog": {
      ...this.GlobalPreference.dialogAction,
      "isCheckChange": false,
      "isNoDraggable": 'undefined',
      "title": '',
    },
    "props": {
      "globalConfig": {
        "chooseCallback": (items) => {
          console.log('items:', this.formData, items)
          const html = items.map((ele) => ele.html).join(' ')
          this.$bus.$emit('richTextInsertImage', html)
        }
      },
    }
  })
})
this.$bus.$on('clickCustomAttachment', (value) => { // 监听点击附件上传
  this.Api.openDialog({
    "id": 'ffff.Apple',
    "resourceType": 'view_2',
    "dialog": {
      ...this.GlobalPreference.dialogAction,
      "isCheckChange": false,
      "isNoDraggable": 'undefined',
      "title": '',
      "top": '0 vh',
    },
    "props": {
      "globalConfig": {
        "chooseCallback": (items) => {
          console.log('items:', items)
          const html = items.map((ele) => ele.html).join(' ')
          this.$bus.$emit('richTextInsertAttachment', html)
        }
      },
    }
  })
})

注意附件上传弹窗和图片选择弹窗一样的只是接口url不一样

详情可下载对应构件包