vue3-vuecmf-table

介绍

vue3-vuecmf-table是一款基于vue3、Element Plus和TypeScript的多功能列表组件,支持树形列表数据,内置搜索、筛选、分页、行展开、详情、编辑、导出和导入EXCEL等功能。

DownloadsVersionLicense

项目托管地址:

  1. Github: https://github.com/vuecmf/vue3-vuecmf-tableopen in new window
  2. Gitee: https://gitee.com/emei/vue3-vuecmf-tableopen in new window

演示

安装

yarn add vue3-vuecmf-table
npm install vue3-vuecmf-table

使用

导入组件

在项目的main.ts 文件中导入组件,如下

import { createApp } from 'vue'
import App from './App.vue'

/*导入vuecmf table组件*/
import VuecmfTable from "vue3-vuecmf-table"

createApp(App).use(VuecmfTable).mount('#app')

import { createApp } from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import "bootstrap-icons/font/bootstrap-icons.css" //v1.21+版本需要引入此样式

/*导入表单中的依赖组件vuecmf editor和vuecmf dialog*/
import VuecmfEditor from 'vue-vuecmf-editor'
import VuecmfDialog from 'vue-vuecmf-dialog'

/*导入vuecmf table组件*/
import VuecmfTable from "vue3-vuecmf-table"

createApp(App).use(VuecmfTable).use(VuecmfEditor).use(VuecmfDialog).mount('#app')

模板中使用

若你只需要列表展示、搜索及导出数据,无需表单及增删等按钮,可以使用下面“基础功能”方式使用。

<template>
  <h3>vuecmf-table demo</h3>

  <vuecmf-table
      export_file_name="相册管理列表"
      server="http://www.vuecmf.com/vuecmf/photo"
  >
  </vuecmf-table>

</template>

<script lang="ts">
import {defineComponent} from 'vue';

export default defineComponent({
  name: 'App',
});
</script>

<template>
  <h3>vuecmf-table demo</h3>

  <vuecmf-table
      export_file_name="相册管理列表"
      :selectable="selectable"
      :checkbox="true"
      :token="token"
      :detail_btn_visible="detailBtnVisible"
      :add_btn_visible="true"
      :edit_btn_visible="editBtnVisible"
      :del_btn_visible="delBtnVisible"
      :expand_action="true"
      server="http://www.vuecmf.com/vuecmf/photo"
      import_server="http://www.vuecmf.com/vuecmf/photo/saveAll"
      save_server="http://www.vuecmf.com/vuecmf/photo/save"
      upload_server="http://www.vuecmf.com/vuecmf/upload"
      del_server="http://www.vuecmf.com/vuecmf/photo/delete"
      @beforeLoadTable="beforeLoadTable"
      @afterLoadTable="afterLoadTable"
      openai_server="http://www.vuecmf.com/web/ai"
      amap_key="高德地图申请的APP KEY"
  >
    <!-- 表格头部左边 自定义按钮操作 -->
    <template #headerAction="selectRows">
      <el-button size="default" type="danger" @click.prevent="mulDel(selectRows)" >批量删除</el-button>
    </template>

    <!-- 列表每行 自定义按钮操作 -->
    <template #rowAction="{ row, index, service}">
      <el-button size="default" type="info" @click.prevent="lock(row, index, service)">禁用</el-button>
    </template>

    <!-- 每行中的每个字段内容 自定义格式化内容显示: 可获取参数有 { row, field } -->
    <template #formatRow="{ row, field }">
          <span v-if=" field == 'username' ">
              <el-input v-model="row[field]" @change="changeUser" size="default" clearable></el-input>
          </span>
    </template>

    <!-- 行展开 自定义格式-->
    <template #rowExpand="{ row, index }">
      <div :key="k" v-for="(item,k) in row.expand_data.table_list">
        {{ item.col01 }} {{ item.col02 }} {{ index }}
      </div>
    </template>

  </vuecmf-table>

</template>

<script lang="ts">
import {defineComponent} from 'vue';

export default defineComponent({
  name: 'App',
  setup(){
    const token = '961f4f941f9ecba1fd2197c09b41b101'

    const selectable = (row: any, index: number):boolean => {
      if(typeof row.username != 'undefined' && index > 0){
        //为true则行可勾选
        return true
      }else{
        return false
      }
    }

    //表格头部左边 添加 按钮操作
    const add = (rows:any):void => {
      Object.keys(rows).forEach((key) => {
        console.log(rows[key])
      })
    }

    //行 禁用 按钮操作, row = 行数据, index = 行索引, service = 组件的服务类实例
    const lock = (row:any, index:number, service: any):void => {
      console.log(row, index)

      service.delRow() //调用组件中的服务类实例中方法

      console.log('service = ', service)
    }

    //行中输入框修改事件
    const changeUser = (val:string):void => {
      console.log('修改后值=', val)
    }

    //表格数据加载前回调函数,作用是将 表格组件中的服务类实例暴露出来,便于操作表格数据
    const beforeLoadTable = (tableService:any) => {
      console.log('表格组件中service类实例g', tableService)

      //设置表单中组件的change事件回调函数, 例如在联动下拉框中使用
      tableService.import_config.changeEvent = (form_field_name: string, sel_val: string|Array<string|number>, linkage: any):void => {
        console.log('form_field_name=', form_field_name)
        console.log('sel_val=', sel_val)
        console.log('linkage=', linkage)
      }

    }

    //表格字段加载完后
    const afterLoadTable = (table_config: any) => {
      console.log(table_config)
    }


    //是否显示行详情按钮, 默认true
    const detailBtnVisible = (row: any): boolean => {
      console.log('row', row)
      return true
    }

    //是否显示行编辑按钮,默认true
    const editBtnVisible = (row: any): boolean => {
      console.log('row', row)
      return true
    }

    //是否显示行删除按钮,默认true
    const delBtnVisible = (row: any): boolean => {
      console.log('row', row)
      return true
    }

    return {
      token,
      selectable,
      add,
      lock,
      changeUser,
      beforeLoadTable,
      afterLoadTable,
      detailBtnVisible,
      editBtnVisible,
      delBtnVisible
    }
  }
});
</script>

后端API示例

// 1. 列表字段信息示例
{
   "data":{
      "field_info":[
         {
            "filter":true, //列头是否显示过滤器
            "fixed":false, //是否固定列
            "label":"表名", //列头标题
            "prop":"table_name", //列字段名
            "show":true,  //是否在列中显示
            "sortable":true, //列是否可排序
            "tooltip":"模型对应的表名(不含表前缘)", //列提示说明
            "width":150 //列宽度
         },
         ......
      ]
   },
   "msg":"",
   "code":0
}

// 2. 列表数据示例
{
   "data":{
      "total":15,   //总条数
      "per_page":20,  //每页显示条数
      "current_page":1, //当前页码
      "last_page":1,  //最后页码
      "data":[
         //每行的数据
         {
            "id":15,
            "table_name":"photo",
            "label":"我的相册",
            "component_tpl":"template\/content\/List",
            "default_action_id":89,
            "search_field_id":"116",
            "type":20,
            "is_tree":20,
            "remark":"我的相册",
            "status":10
         },
         ......
      ]
   },
   "msg":"拉取成功",
   "code":0
}

// 1. 列表字段信息示例
{
    "data":{
        //列表字段信息
        "field_info":[
            {
                "field_id":2,  //字段ID
                "prop":"table_name", //字段名
                "label":"表名",  //字段标题名
                "width":150,  //列表列宽度
                "length":64,  //字段长度
                "show":true,  //是否显示该列
                "fixed":false, //是否固定该列
                "filter":true, //是否显示搜索表单
                "tooltip":"模型对应的表名(不含表前缘)", //列提示
                "model_id":1, //模型ID
                "sortable":true //是否可排序
            },
            ......省略其它字段信息
        ],
        //表单信息
        "form_info":{
            "17":{
                "field_id":2,
                "field_name":"table_name",
                "label":"表名",
                "type":"text",
                "default_value":"",
                "is_disabled":20,
                "placeholder":"请输入用户名",     //1.25.x版本新增
                "is_edit": true,                 //1.26.x版本新增
                "sort_num":17
            },
            ............省略其它表单信息
        },
        //字段选项(表单中使用)
        "field_option":{
            //字段ID
            "7":{
                "10":"内置",
                "20":"扩展"
            },
          ......省略其它字段选项信息
        },
        "relation_info":{
            //表单联动
            "linkage":{
                //字段ID
                "2":{
                    "5":{
                        "relation_field_id":5,  //关联字段ID
                        "action_table_name":"model_action", //关联表名
                        "action_type":"dropdown"  //关联动作类型
                    },
                    "6":{
                        "relation_field_id":6,
                        "action_table_name":"model_field",
                        "action_type":"dropdown"
                    }
                }
            },
            //字段选项,用于渲染列表数据
            "full_options":{
                //字段ID
                "5":[
                    {
                        "label":"模型管理列表", //列表渲染后的值
                        "id":1   //列表值
                    },
                  ......省略其它字段选项信息
                    
                ],
            },
            //字段选项(表单中使用)
            "options":{
                //内容结构同 full_options, 这里在full_options基础上筛选出当前表单的字段选项列表
            }
        },
        //表单验证
        "form_rules":{
            //字段名
            "table_name":[
                {
                    "required":true,  //验证规则
                    "message":"表名必填", //验证提示
                    "trigger":"blur"  //触发方式
                }
            ]
        },
        //模型ID
        "model_id":1
    },
    "msg":"拉取成功",
    "code":0
}


// 2. 列表数据示例
{
   "data":{
      "total":15,   //总条数
      "per_page":20,  //每页显示条数
      "current_page":1, //当前页码
      "last_page":1,  //最后页码
      "data":[
         //每行的数据
         {
            "id":15,
            "table_name":"photo",
            "label":"我的相册",
            "component_tpl":"template\/content\/List",
            "default_action_id":89,
            "search_field_id":"116",
            "type":20,
            "is_tree":20,
            "remark":"我的相册",
            "status":10
         },
         ......
      ]
   },
   "msg":"拉取成功",
   "code":0
}

属性

属性必须说明类型可选值默认值
server加载列表数据的后端API链接,必须string-
save_server保存单条数据的后端API链接,若add_btn_visible属性为true或edit_btn_visible属性返回true时,此属性必须string-
import_server导入数据的后端API链接,若列表需要批量导入数据时,此属性必须string-
del_server删除行数据的后端API链接,若del_btn_visible属性返回true时,此属性必须string-
upload_server文件上传后端API链接,若表单中包含有上传文件控件时,此属性必须string-
token后端需要的token信息string-
page当前页码的参数名string-page
limit每页显示条数number-20
height列表表格高度string-300px
size列表中的按钮及表单样式大小stringlarge, default, smalldefault
operate_width操作列的宽度, 若行中有操作按钮,此值必须大于0,否则 操作列不显示number-0
detail_btn_visible是否显示行详情按钮 , 默认不显示function-(select_row: AnyObject) => false
add_btn_visible是否显示新增按钮 , 默认不显示boolean-false
edit_btn_visible是否显示行编辑按钮 , 默认不显示function-(select_row: AnyObject) => false
del_btn_visible是否显示行删除按钮 , 默认不显示function-(select_row: AnyObject) => false
checkbox是否显示行选择复选框boolean-false
expand是否显示行展开功能boolean-false
selectable行是否可以选择的回调函数function-() => true
load_form表单加载前的回调函数function-(tableService: AnyObject, select_row: AnyObject) => Promise.resolve(true)
row_key树形数据唯一键字段,列表数据为树形时(即包含 children 字段时)此项必须string-
default_expand_all列表数据为树形时(即包含 children 字段时)是否全部展开boolean-true
export_file_name列表数据导出的文件名称string-当前日期
expand_action每行的操作按钮是否展开显示boolean-true
form_dialog_width表单弹窗的宽度string-50%
upload_action上传动作函数,主要用于自定义上传组件,如接入外部文件管理器 。接收到两个参数:文件信息、字段信息function--
openai_serverAI大模型后端地址(如ChatGPT),用于表单中的编辑器里的AI生成内容功能用string--
amap_key高德地图应用KEY,用于表单中的编辑器里的插入地图功能用string--

插槽

插槽在模板中的具体使用,请参考“模板中使用”中的“完整功能

插槽名说明
headerAction表格头部左边的自定义按钮操作
rowAction列表每行操作列的按钮操作自定义
formatRow每行中的每个字段内容 自定义格式化内容显示: 可获取参数有 { row, field },row=当前行数据,field=字段名
rowExpand行展开 自定义显示内容,可获取参数有 { row, index } row=当前行数据,index=行索引号

事件

事件名说明参数
exception列表加载数据异常事件msg 异常信息
beforeLoadTable列表表格数据加载前的回调tableService 列表服务类对象
afterLoadTable列表表格数据加载完后的回调table_config 列表配置对象

vue-vuecmf-fileexplorer

介绍

vue-vuecmf-fileexplorer文件管理器组件是基于vue3、Element Plus和TypeScript的文件管理器组件,支持文件夹管理、上传及文件管理等功能。

DownloadsVersionLicense

项目托管地址:

  1. Github: https://github.com/vuecmf/vue-vuecmf-fileexploreropen in new window
  2. Gitee: https://gitee.com/emei/vue-vuecmf-fileexploreropen in new window

演示

安装

yarn add vue-vuecmf-fileexplorer
npm install vue-vuecmf-fileexplorer

使用

导入组件

然后在项目的main.ts 引入,如下

import { createApp } from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import VuecmfFileexplorer from "../packages/index"
import "bootstrap-icons/font/bootstrap-icons.css"

createApp(App).use(VuecmfFileexplorer).mount('#app')

模板中使用

<template>
  <h3>vuecmf-fileexplorer demo</h3>

  <vuecmf-fileexplorer
      root_path="uploads"
      :page_size="30"
      list_show="list"
      :tool_config="['new_folder','update_folder','move_folder','del_folder','upload','move_file','del_file']"
      upload_api="http://localhost:8080/web/upload"
      @loadFolder="loadFolder"
      @moveFolder="moveFolder"
      @saveFolder="saveFolder"
      @delFolder="delFolder"
      @loadFile="loadFile"
      @selectFile="selectFile"
      @moveFile="moveFile"
      @delFile="delFile"
      @saveFile="saveFile"
  >
  </vuecmf-fileexplorer>

</template>

<script lang="ts">
import {defineComponent} from 'vue';
import {AnyObject} from "../packages/vue-vuecmf-fileexplorer/src/typings/vuecmf";
//import Model from "../packages/vue-vuecmf-fileexplorer/src/Model";
//import {ElMessage} from "element-plus";

export default defineComponent({
  name: 'App',
  setup(){
    //const token = 'fea47c5084ab8a6e2d3fa004aa19abeb'
    //const api = new Model(token)

    //加载文件夹列表
    const loadFolder = (folderObj: AnyObject):void => {
      console.log(folderObj)
      folderObj.data[0].children = [
        {
          "id": 1,
          "title": "food",
          "pid": 0,
          "children": [
            {
              "id": 4,
              "title": "bread",
              "pid": 1,
              "children": null
            },
            {
              "id": 5,
              "title": "vegetable",
              "pid": 1,
              "children": null
            }
          ]
        },
        {
          "id": 2,
          "title": "hotel",
          "pid": 0,
          "children": null
        }
      ]

    }

    //保存文件夹
    const saveFolder = (folderData: AnyObject):void => {
      console.log(folderData)
    }

    //移动文件夹
    const moveFolder = (data:AnyObject):void => {
      console.log(data)
      //重新加载文件夹列表及文件列表
      data.loadFolder()

    }

    //删除文件夹
    const delFolder = (folderData: AnyObject):void => {
      console.log(folderData)
    }

    //加载文件列表
    const loadFile = (folderObj: AnyObject):void => {
      console.log(folderObj)
      folderObj.total = 16
      folderObj.data = []
      for(let i = 1; i <= 16; i++) {
        folderObj.data.push({
          "id": i,
          "file_name": "hamburger"+i+".png",
          "ext": "png",
          "size": "120kb",
          "dir_id": 4,
          "url": "https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png",
          "remark": "",
          "create_time": "2023-05-16 16:13:33",
          "update_time": "2023-05-18 15:17:35",
        })
      }

    }

    //选择文件事件
    const selectFile = (files:AnyObject):void => {
      console.log('当前选择的文件信息:', files)
    }

    //移动文件
    const moveFile = (data:AnyObject):void => {
      console.log(data)
      //重新加载文件列表
      data.loadFile()
    }

    //删除文件
    const delFile = (data:AnyObject):void => {
      console.log(data)
      //重新加载文件列表
      data.loadFile()
    }

    //保存文件
    const saveFile = (data:AnyObject):void => {
      console.log(data)
    }

    return {
      loadFolder,
      saveFolder,
      moveFolder,
      delFolder,
      loadFile,
      selectFile,
      moveFile,
      delFile,
      saveFile
    }
  }
});
</script>

属性

属性必须说明类型可选值默认值
root_path当前文件夹根目录,默认uploadsstring-uploads
page_size每页显示文件数量number-30
list_show文件列表显示方式stringcard/listcard
upload_api上传文件后端APIstring-
tool_config工具条功能配置,不加此属性则显示全部功能array['new_folder','update_folder','move_folder','del_folder','upload','move_file','del_file']['new_folder','update_folder','move_folder','del_folder','upload','move_file','del_file']

事件

事件名说明参数
loadFolder加载文件夹列表文件夹对象信息
moveFolder移动文件夹移动的文件夹信息
saveFolder保存文件夹保存的文件夹信息
delFolder删除文件夹需要删除的文件夹信息
loadFile加载文件列表文件对象信息
selectFile选择文件选择的所有文件信息
moveFile移动文件移动的文件信息
delFile删除文件需要删除的文件信息
saveFile保存文件名等信息保存的文件信息

vue-vuecmf-dialog

介绍

vue-vuecmf-dialog弹窗组件是基于vue3、Element Plus和TypeScript构建,支持最大化、最小化、还原及弹窗主体内容自适应屏幕功能。

DownloadsVersionLicense

项目托管地址:

  1. Github: https://github.com/vuecmf/vue-vuecmf-dialogopen in new window
  2. Gitee: https://gitee.com/emei/vue-vuecmf-dialogopen in new window

演示

安装

yarn add vue-vuecmf-dialog
npm install vue-vuecmf-dialog

使用

导入组件

然后在项目的main.ts 引入,如下

import { createApp } from 'vue'
import App from './App.vue'
import './registerServiceWorker'

/*导入组件*/
import VuecmfDialog from "vue-vuecmf-dialog"

createApp(App).use(VuecmfDialog).mount('#app')

模板中使用

<template>
  <h3>vue-vuecmf-dialog demo</h3>
  <el-button 
      size="default" 
      type="primary" 
      @click=" showDlg = true " >打开对话框</el-button>
  
  <vuecmf-dialog 
      :model_value="showDlg" 
      title="标题"  
      @updateVisible="updateVisible"  
      @close="close" 
      @toggleScreen="toggleScreen">

    <template #content>
      <div> 这是一个可以最大化、最小化及还原的 对话框</div>
    </template>

    <template #footer>
      <el-button type="primary" @click=" showDlg = false ">关闭</el-button>
    </template>

  </vuecmf-dialog>
</template>

<script lang="ts">
import {defineComponent, ref} from 'vue';

export default defineComponent({
  name: 'App',
  setup(){
    const showDlg = ref()
    showDlg.value = false

    const updateVisible = (val:any) => {
      console.log('val=', val)
      showDlg.value = val
    }

    const close = ():void => {
       console.log('dialog closed!')
    }
    
    const toggleScreen = (is_max: boolean):void => {
       console.log('dialog is max:', is_max)
    }

    return {
     showDlg,
     updateVisible,
     close,
     toggleScreen
    }
  }
});
</script>

属性

属性必须说明类型可选值默认值
title对话框标题,支持htmlstring-
max_screen是否全屏显示bool-false
width对话框宽度string-50%
top对话框顶部相对于窗口的偏移距离string-15vh
model_value是否显示对话框bool-false
custom_classDialog 的自定义样式类名string-
close_on_click_modal是否可以通过点击 modal 关闭 Dialogbool-false
close_on_press_escape是否可以通过按下 ESC 关闭 Dialogbool-true
show_close是否显示关闭按钮bool-true
scroll_top每次打开弹窗是否滚动到弹窗头部位置bool-true
modal是否显示遮罩层bool-true
append_to_bodyDialog 自身是否插入至 body 元素上。 嵌套的 Dialog 必须指定该属性并赋值为 truebool-false

事件

事件名说明参数
openDialog 打开时的回调-
openedDialog 打开后的回调-
closeDialog 关闭的回调-
closedDialog 关闭后的回调-
updateVisible弹窗关闭时,重置为弹窗不显示-
toggleScreen弹窗最大化及还原时的回调is_max: bool值,当前弹窗是否最大化

vue-vuecmf-editor

介绍

vue-vuecmf-editor是一款基于vue3、Element Plus和TypeScript构建的HTML5富文本编辑器。

DownloadsVersionLicense

项目托管地址:

  1. Github: https://github.com/vuecmf/vue-vuecmf-editoropen in new window
  2. Gitee: https://gitee.com/emei/vue-vuecmf-editoropen in new window

演示

安装

yarn add vue-vuecmf-editor
npm install vue-vuecmf-editor

使用

导入组件

然后在项目的main.ts 引入,如下

import { createApp } from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import "bootstrap-icons/font/bootstrap-icons.css"

//导入
import VuecmfEditor from "vue-vuecmf-editor"

createApp(App).use(VuecmfEditor).mount('#app')

模板中使用

<template>
  <h3>vuecmf-editor demo</h3>

  <vuecmf-editor
      id="myeditor"
      size="default"
      :content="contentHtml"
      @on-change="getContent"
      :token="token"
      :params="params"
      upload="http://www.vuecmf.com/vuecmf/upload"
      openai="http://localhost:8080/web/ai"
      :upload_action="uploadAction"
      amap_key="高德地图申请的应用KEY"
  ></vuecmf-editor>
  <button @click="save">保存</button>


  <el-dialog
      v-model="dialogVisible"
      title="上传文件"
      width="50%"
  >
    <span>此处可以自定义上传组件或接入外部文件管理器组件,如<a href="https://github.com/vuecmf/vue-vuecmf-fileexplorer" target="_blank">vue-vuecmf-fileexplorer</a> </span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveFile">确定</el-button>
      </span>
    </template>
  </el-dialog>

</template>


<script lang="ts">
import {defineComponent, ref} from 'vue';

export default defineComponent({
  name: 'App',
  components: {
  },
  setup(){
    const contentHtml = ref('Hello world!')
    const token = ref('')
    const params = ref('')

    const getContent = (content:string, id: string) => {
      console.log('id=', id)

      contentHtml.value = content
    }

    const save = ():void => {
      console.log(contentHtml.value)
      alert(contentHtml.value)
    }

    token.value = 'b9fa3e1f2fd0bcfc75aa7a5efd9d9d2b'
    params.value = '{"field_name":"pic"}'

    const dialogVisible = ref(false) //上传弹窗
    const fileObj = ref()
    const uploadAction = (fileInfo: any, from: string):void => {
      fileObj.value = fileInfo
      dialogVisible.value = true
      console.log(fileInfo, from)
    }

    //保存文件信息,如可将文件管理器中选择的文件信息保存
    const saveFile = ():void => {
      fileObj.value.url = 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/300'
      dialogVisible.value = false
    }

    return {
      getContent,
      contentHtml,
      save,
      token,
      params,

      dialogVisible,
      uploadAction,
      saveFile
    }

  }
});
</script>

属性

属性必须说明类型可选值默认值
id编辑器idstring--
content编辑器内容string-
height编辑器高度string-300px
size编辑器中工具条大小样式stringdefault, large, smalldefault
tools自定义工具条,多个英文逗号分隔。例如 heading,table,codestringheading 标题
align-left 左对齐
align-center 居中对齐
align-right 右对齐
bold 加粗
italic 斜体
underline 下横线
strikethrough 删除线
superscript 上角标
subscript 下角标
quote-left 块引用
link 添加超链接
unlink 取消超链接
font 字体
font-size 字大小
font-color 字体颜色
font-bg-color 文本背景色
indent 增加缩进
outdent 减少缩进
list-ol 有序列表
list-ul 无序列表
select-all 全选
remove-format 清除格式
cut 剪切
copy 复制
hr 插入水平线
table 插入表格
image 插入图片
film 插入视频
code 插入代码
redo 恢复
undo 撤销
upload_action上传动作函数,主要用于自定义上传组件,如接入外部文件管理器 。接收到两个参数:文件信息、字段信息function--
openaiAI大模型后端地址(如ChatGPT),用于编辑器里的AI生成内容功能调用string--
amap_key高德地图应用KEY,用于编辑器里的插入地图功能调用string--

事件

事件名说明参数
on-change添加或修改编辑器中的内容时,触发此事件content: 编辑器内容, id: 编辑器ID
Last Updated:
Contributors: emei8, vuecmf