VueUeditorWrap 百度编辑器组件

组件介绍

VueUeditorWrap 是一个基于百度 UEditor 封装的富文本编辑器组件，用于在表单中快速实现富文本编辑功能。它支持文本格式化、图片上传、视频嵌入、表格编辑等功能，适用于内容管理、文章编辑等场景。

安装与引入

安装依赖

npm install diandi-ueditor

全局引入

在 src/projects/scrm/utils/el-form.js 中全局引入和配置：

import Vue from 'vue'
import VueUeditorWrap from 'diandi-ueditor'

// 注册 fire-editor 组件
Vue.component('fire-editor', VueUeditorWrap)

// 全局配置
Vue.use(EleForm, {
  // 可以为编辑器配置全局属性, 每个实例都共享这个属性
  'fire-editor': {
    // 比如设置上传 action 后, 所有的 quill-editor 编辑器上传图片都会采用这个属性
    action: store.getters.elForm.action,
    attrs: {
      serverUrl: store.getters.elForm.ueditorServerUrl
    }
  }
})

全局配置

// 全局 fire-editor 配置
'fire-editor': {
  action: String, // 上传地址
  attrs: {
    serverUrl: String // 编辑器服务地址
  }
}

// 上传配置
upload: {
  fileSize: Number, // 文件大小限制
  chunkSize: Number, // 分片尺寸（M）
  action: String, // 图片上传地址
  headers: Object // 请求头
}

基本使用

简单使用

<template>
  <ele-form
    :form-data="formData"
    :form-config="formConfig"
    @submit="handleSubmit"
  />
</template>

<script>
export default {
  data() {
    return {
      formData: {
        content: ''
      },
      formConfig: [
        {
          label: '内容',
          prop: 'content',
          type: 'fire-editor'
        }
      ]
    }
  },
  methods: {
    handleSubmit(data) {
      console.log('表单数据:', data)
    }
  }
}
</script>

配置使用

<template>
  <ele-form
    :form-data="formData"
    :form-config="formConfig"
    @submit="handleSubmit"
  />
</template>

<script>
export default {
  data() {
    return {
      formData: {
        content: ''
      },
      formConfig: [
        {
          label: '内容',
          prop: 'content',
          type: 'fire-editor',
          props: {
            attrs: {
              initialFrameWidth: '100%',
              initialFrameHeight: 400,
              toolbars: [
                ['fullscreen', 'source', 'undo', 'redo'],
                ['bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript'],
                ['forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc'],
                ['rowspacingtop', 'rowspacingbottom', 'lineheight'],
                ['customstyle', 'paragraph', 'fontfamily', 'fontsize'],
                ['directionalityltr', 'directionalityrtl', 'indent'],
                ['justifyleft', 'justifycenter', 'justifyright', 'justifyjustify'],
                ['touppercase', 'tolowercase'],
                ['link', 'unlink'],
                ['imagenone', 'imageleft', 'imageright', 'imagecenter'],
                ['simpleupload', 'insertimage', 'emotion', 'scrawl', 'insertvideo'],
                ['map', 'insertframe', 'insertcode', 'webapp', 'pagebreak'],
                ['template', 'background'],
                ['horizontal', 'date', 'time', 'spechars', 'snapscreen'],
                ['inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols'],
                ['print', 'preview', 'searchreplace', 'help']
              ]
            }
          }
        }
      ]
    }
  },
  methods: {
    handleSubmit(data) {
      console.log('表单数据:', data)
    }
  }
}
</script>

属性配置

基础属性

属性类型描述默认值
actionString上传地址-
attrsObject编辑器属性{}
disabledBoolean是否禁用false
placeholderString占位符-
valueString绑定值-
nameString原生name属性-
labelString标签文本-
requiredBoolean是否必填false
rulesArray验证规则[]
errorString错误信息-
validateEventBoolean是否在输入时触发表单验证true

编辑器属性

attrs: {
  serverUrl: String, // 编辑器服务地址
  initialFrameWidth: String, // 初始宽度
  initialFrameHeight: Number, // 初始高度
  toolbars: Array, // 工具栏配置
  zIndex: Number, // 层级
  maximumWords: Number, // 最大字数
  autoHeightEnabled: Boolean, // 是否自动高度
  autoFloatEnabled: Boolean, // 是否自动浮动
  enableAutoSave: Boolean, // 是否启用自动保存
  saveInterval: Number, // 自动保存间隔
  elementPathEnabled: Boolean, // 是否显示元素路径
  wordCount: Boolean, // 是否显示字数统计
  sourceEditor: String, // 源码编辑器类型
  scaleEnabled: Boolean, // 是否启用分屏
  toolbars: Array, // 工具栏配置
  lang: String, // 语言
  theme: String, // 主题
  cssUrl: String, // 自定义CSS地址
  customCss: String, // 自定义CSS内容
  webAppKey: String, // 百度应用密钥
  allowDivTransToP: Boolean, // 是否允许div转换为p
  allHtmlEnabled: Boolean, // 是否允许所有HTML
  pasteplain: Boolean, // 是否纯文本粘贴
  filterRules: Object, // 过滤规则
  serverUrl: String, // 服务器统一请求接口路径
  UEDITOR_HOME_URL: String, // UEditor 家目录路径
  imageUrlPrefix: String, // 图片访问路径前缀
  imagePathFormat: String, // 上传图片保存路径
  imageMaxSize: Number, // 上传图片最大大小
  imageAllowFiles: Array, // 上传图片允许的文件类型
  imageInsertAlign: String, // 插入图片时的对齐方式
  imageUrl: String, // 上传图片接口地址
  imageFieldName: String, // 上传图片表单名称
  scrawlUrl: String, // 涂鸦上传接口地址
  scrawlFieldName: String, // 涂鸦上传表单名称
  scrawlPathFormat: String, // 涂鸦保存路径
  scrawlMaxSize: Number, // 涂鸦最大大小
  snapscreenUrl: String, // 截图上传接口地址
  snapscreenPathFormat: String, // 截图保存路径
  snapscreenFieldName: String, // 截图上传表单名称
  videosUrl: String, // 上传视频接口地址
  videosFieldName: String, // 上传视频表单名称
  videosPathFormat: String, // 视频保存路径
  videosMaxSize: Number, // 视频最大大小
  videosAllowFiles: Array, // 上传视频允许的文件类型
  fileUrl: String, // 上传文件接口地址
  fileFieldName: String, // 上传文件表单名称
  filePathFormat: String, // 文件保存路径
  fileMaxSize: Number, // 文件最大大小
  fileAllowFiles: Array, // 上传文件允许的文件类型
  catcherLocalDomain: Array, // 抓取远程图片时，可抓取的域名列表
  catcherActionName: String, // 执行远程图片抓取的action名称
  catcherFieldName: String, // 提交到后台的图片信息的表单名称
  catcherPathFormat: String, // 远程图片抓取后的保存路径
  catcherMaxSize: Number, // 远程图片抓取的最大大小
  catcherAllowFiles: Array, // 可抓取的图片类型
  catcherUrlPrefix: String, // 抓取图片成功后，图片地址前缀
  catcherRemoteImgEnable: Boolean, // 是否开启远程图片抓取
  simpleUploadEnabled: Boolean, // 是否启用简单上传
  insertimageDragDropEnabled: Boolean, // 是否启用图片拖拽上传
  batchUploadEnabled: Boolean, // 是否启用批量上传
  batchUrl: String, // 批量上传接口地址
  batchFieldName: String, // 批量上传表单名称
  batchPathFormat: String, // 批量上传保存路径
  batchMaxSize: Number, // 批量上传最大大小
  batchAllowFiles: Array, // 批量上传允许的文件类型
  listDefaultPadding: Number, // 列表默认内边距
  menuArrowImage: String, // 菜单箭头图片
  menuDropImage: String, // 菜单下拉图片
  minFrameWidth: Number, // 最小宽度
  minFrameHeight: Number, // 最小高度
  autoClearinitialContent: Boolean, // 是否自动清除初始内容
  focus: Boolean, // 是否获取焦点
  readonly: Boolean, // 是否只读
  zIndex: Number, // 层级
  initialContent: String, // 初始内容
  placeholder: String, // 占位符
  fullscreen: Boolean, // 是否全屏
  autoClearEmptyNode: Boolean, // 是否自动清除空节点
  enableContextMenu: Boolean, // 是否启用右键菜单
  enableAutoTypeSetting: Boolean, // 是否启用自动排版
  enablePathFormat: Boolean, // 是否启用路径格式化
  enableFilterTxtRules: Boolean, // 是否启用文本过滤规则
  pasteFilter: Boolean, // 是否过滤粘贴内容
  pasteImageEnabled: Boolean, // 是否启用粘贴图片
  autoTypeEnabled: Boolean, // 是否启用自动排版
  selectionRadius: Number, // 选区半径
  elementPathMaxDepth: Number, // 元素路径最大深度
  removeFormatTags: String, // 清除格式时删除的标签
  whitespace: String, // 空格处理方式
  indentValue: String, // 缩进值
  maxListLevel: Number, // 最大列表层级
  listDefaultPaddingLeft: Number, // 列表默认左内边距
  maxInputCount: Number, // 最大输入次数
  tableDragable: Boolean, // 表格是否可拖拽
  tableResize: Boolean, // 表格是否可调整大小
  tableDefaultWidth: Number, // 表格默认宽度
  tableDefaultHeight: Number, // 表格默认高度
  tableMinWidth: Number, // 表格最小宽度
  tableMinHeight: Number, // 表格最小高度
  tableMergeCells: Boolean, // 表格是否可合并单元格
  tableNested: Boolean, // 表格是否可嵌套
  tableNodeIndex: Number, // 表格节点索引
  tableBorder: Number, // 表格边框
  tableCellPadding: Number, // 表格单元格内边距
  tableCellSpacing: Number, // 表格单元格间距
  tableWidth: Number, // 表格宽度
  tableHeight: Number, // 表格高度
  tableAlign: String, // 表格对齐方式
  tableFloat: String, // 表格浮动方式
  tableClassName: String, // 表格类名
  tableStyle: String, // 表格样式
  tableDefaultName: String, // 表格默认名称
  tableContextMenu: Boolean, // 表格是否启用右键菜单
  tableAllowCellBorderRadius: Boolean, // 表格是否允许单元格边框圆角
  tableAllowCellBackgroundColor: Boolean, // 表格是否允许单元格背景色
  tableAllowCellBackgroundImage: Boolean, // 表格是否允许单元格背景图片
  tableAllowCellBorderColor: Boolean, // 表格是否允许单元格边框颜色
  tableAllowCellTextAlign: Boolean, // 表格是否允许单元格文本对齐
  tableAllowCellVerticalAlign: Boolean, // 表格是否允许单元格垂直对齐
  tableAllowCellWidth: Boolean, // 表格是否允许单元格宽度
  tableAllowCellHeight: Boolean, // 表格是否允许单元格高度
  tableAllowRowHeight: Boolean, // 表格是否允许行高
  tableAllowColWidth: Boolean, // 表格是否允许列宽
  tableAllowInsertRow: Boolean, // 表格是否允许插入行
  tableAllowDeleteRow: Boolean, // 表格是否允许删除行
  tableAllowInsertCol: Boolean, // 表格是否允许插入列
  tableAllowDeleteCol: Boolean, // 表格是否允许删除列
  tableAllowMergeCells: Boolean, // 表格是否允许合并单元格
  tableAllowSplitCells: Boolean, // 表格是否允许拆分单元格
  tableAllowSort: Boolean, // 表格是否允许排序
  tableAllowFilter: Boolean, // 表格是否允许筛选
  tableAllowPagination: Boolean, // 表格是否允许分页
  tableAllowExport: Boolean, // 表格是否允许导出
  tableAllowImport: Boolean, // 表格是否允许导入
  tableAllowPrint: Boolean, // 表格是否允许打印
  tableAllowCopy: Boolean, // 表格是否允许复制
  tableAllowCut: Boolean, // 表格是否允许剪切
  tableAllowPaste: Boolean, // 表格是否允许粘贴
  tableAllowClear: Boolean, // 表格是否允许清空
  tableAllowFind: Boolean, // 表格是否允许查找
  tableAllowReplace: Boolean, // 表格是否允许替换
  tableAllowSelectAll: Boolean, // 表格是否允许全选
  tableAllowSelectRow: Boolean, // 表格是否允许选择行
  tableAllowSelectCol: Boolean, // 表格是否允许选择列
  tableAllowSelectCell: Boolean, // 表格是否允许选择单元格
  tableAllowMoveRow: Boolean, // 表格是否允许移动行
  tableAllowMoveCol: Boolean, // 表格是否允许移动列
  tableAllowInsertRowAbove: Boolean, // 表格是否允许在上方插入行
  tableAllowInsertRowBelow: Boolean, // 表格是否允许在下方插入行
  tableAllowInsertColBefore: Boolean, // 表格是否允许在左侧插入列
  tableAllowInsertColAfter: Boolean, // 表格是否允许在右侧插入列
  tableAllowDeleteRowSelected: Boolean, // 表格是否允许删除选中行
  tableAllowDeleteColSelected: Boolean, // 表格是否允许删除选中列
  tableAllowDeleteCellSelected: Boolean, // 表格是否允许删除选中单元格
  tableAllowMergeCellsSelected: Boolean, // 表格是否允许合并选中单元格
  tableAllowSplitCellsSelected: Boolean, // 表格是否允许拆分选中单元格
  tableAllowCopyCellsSelected: Boolean, // 表格是否允许复制选中单元格
  tableAllowCutCellsSelected: Boolean, // 表格是否允许剪切选中单元格
  tableAllowPasteCellsSelected: Boolean, // 表格是否允许粘贴选中单元格
  tableAllowClearCellsSelected: Boolean, // 表格是否允许清空选中单元格
  tableAllowFindCellsSelected: Boolean, // 表格是否允许在选中单元格中查找
  tableAllowReplaceCellsSelected: Boolean, // 表格是否允许在选中单元格中替换
  tableAllowSortCellsSelected: Boolean, // 表格是否允许对选中单元格排序
  tableAllowFilterCellsSelected: Boolean, // 表格是否允许对选中单元格筛选
  tableAllowExportCellsSelected: Boolean, // 表格是否允许导出选中单元格
  tableAllowImportCellsSelected: Boolean, // 表格是否允许导入选中单元格
  tableAllowPrintCellsSelected: Boolean, // 表格是否允许打印选中单元格
  tableAllowSelectAllCellsSelected: Boolean, // 表格是否允许全选选中单元格
  tableAllowSelectRowCellsSelected: Boolean, // 表格是否允许选择行选中单元格
  tableAllowSelectColCellsSelected: Boolean, // 表格是否允许选择列选中单元格
  tableAllowSelectCellCellsSelected: Boolean, // 表格是否允许选择单元格选中单元格
  tableAllowMoveRowCellsSelected: Boolean, // 表格是否允许移动行选中单元格
  tableAllowMoveColCellsSelected: Boolean, // 表格是否允许移动列选中单元格
  tableAllowInsertRowAboveCellsSelected: Boolean, // 表格是否允许在上方插入行选中单元格
  tableAllowInsertRowBelowCellsSelected: Boolean, // 表格是否允许在下方插入行选中单元格
  tableAllowInsertColBeforeCellsSelected: Boolean, // 表格是否允许在左侧插入列选中单元格
  tableAllowInsertColAfterCellsSelected: Boolean, // 表格是否允许在右侧插入列选中单元格
  tableAllowDeleteRowSelectedCellsSelected: Boolean, // 表格是否允许删除选中行选中单元格
  tableAllowDeleteColSelectedCellsSelected: Boolean, // 表格是否允许删除选中列选中单元格
  tableAllowDeleteCellSelectedCellsSelected: Boolean, // 表格是否允许删除选中单元格选中单元格
  tableAllowMergeCellsSelectedCellsSelected: Boolean, // 表格是否允许合并选中单元格选中单元格
  tableAllowSplitCellsSelectedCellsSelected: Boolean, // 表格是否允许拆分选中单元格选中单元格
  tableAllowCopyCellsSelectedCellsSelected: Boolean, // 表格是否允许复制选中单元格选中单元格
  tableAllowCutCellsSelectedCellsSelected: Boolean, // 表格是否允许剪切选中单元格选中单元格
  tableAllowPasteCellsSelectedCellsSelected: Boolean, // 表格是否允许粘贴选中单元格选中单元格
  tableAllowClearCellsSelectedCellsSelected: Boolean, // 表格是否允许清空选中单元格选中单元格
  tableAllowFindCellsSelectedCellsSelected: Boolean, // 表格是否允许在选中单元格中查找选中单元格
  tableAllowReplaceCellsSelectedCellsSelected: Boolean, // 表格是否允许在选中单元格中替换选中单元格
  tableAllowSortCellsSelectedCellsSelected: Boolean, // 表格是否允许对选中单元格排序选中单元格
  tableAllowFilterCellsSelectedCellsSelected: Boolean, // 表格是否允许对选中单元格筛选选中单元格
  tableAllowExportCellsSelectedCellsSelected: Boolean, // 表格是否允许导出选中单元格选中单元格
  tableAllowImportCellsSelectedCellsSelected: Boolean, // 表格是否允许导入选中单元格选中单元格
  tableAllowPrintCellsSelectedCellsSelected: Boolean, // 表格是否允许打印选中单元格选中单元格
  tableAllowSelectAllCellsSelectedCellsSelected: Boolean, // 表格是否允许全选选中单元格选中单元格
  tableAllowSelectRowCellsSelectedCellsSelected: Boolean, // 表格是否允许选择行选中单元格选中单元格
  tableAllowSelectColCellsSelectedCellsSelected: Boolean, // 表格是否允许选择列选中单元格选中单元格
  tableAllowSelectCellCellsSelectedCellsSelected: Boolean // 表格是否允许选择单元格选中单元格选中单元格
}

事件

事件名称回调参数描述
changevalue值变化时触发
readyeditor编辑器准备就绪时触发
focuseditor编辑器获得焦点时触发
blureditor编辑器失去焦点时触发
contentChangecontent内容变化时触发
selectionChangeselection选区变化时触发
beforeExecCommandcmdName, cmdValue执行命令前触发
afterExecCommandcmdName, cmdValue执行命令后触发
firstBeforeExecCommandcmdName, cmdValue首次执行命令前触发
beforeGetContentmode获取内容前触发
afterGetContentmode, content获取内容后触发
beforeSetContenthtml, isAppendTo设置内容前触发
afterSetContenthtml, isAppendTo设置内容后触发
errorerror错误时触发

常见问题

1. 编辑器加载失败

原因：服务地址配置错误或网络问题

解决方案：

  • 检查 serverUrl 配置是否正确
  • 确认 UEditor 服务是否正常运行
  • 检查网络连接和跨域配置

2. 图片上传失败

原因：上传地址配置错误或服务器端问题

解决方案：

  • 检查 action 配置是否正确
  • 确认服务器端是否正常接收上传请求
  • 检查网络连接和跨域配置

3. 编辑器高度问题

原因：高度配置错误或自动高度设置不当

解决方案：

  • 检查 initialFrameHeight 配置是否合理
  • 确认 autoHeightEnabled 设置是否符合需求
  • 调整编辑器容器的 CSS 样式

示例代码

完整示例

<template>
  <ele-form
    :form-data="formData"
    :form-config="formConfig"
    :label-width="'120px'"
    @submit="handleSubmit"
  />
</template>

<script>
export default {
  data() {
    return {
      formData: {
        content: ''
      },
      formConfig: [
        {
          label: '内容',
          prop: 'content',
          type: 'fire-editor',
          required: true,
          props: {
            attrs: {
              initialFrameWidth: '100%',
              initialFrameHeight: 400,
              toolbars: [
                ['fullscreen', 'source', 'undo', 'redo'],
                ['bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript'],
                ['forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc'],
                ['rowspacingtop', 'rowspacingbottom', 'lineheight'],
                ['customstyle', 'paragraph', 'fontfamily', 'fontsize'],
                ['directionalityltr', 'directionalityrtl', 'indent'],
                ['justifyleft', 'justifycenter', 'justifyright', 'justifyjustify'],
                ['link', 'unlink'],
                ['imagenone', 'imageleft', 'imageright', 'imagecenter'],
                ['simpleupload', 'insertimage', 'emotion', 'scrawl', 'insertvideo'],
                ['map', 'insertframe', 'insertcode', 'webapp', 'pagebreak'],
                ['inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols'],
                ['print', 'preview', 'searchreplace']
              ],
              placeholder: '请输入内容'
            }
          }
        }
      ]
    }
  },
  methods: {
    handleSubmit(data) {
      console.log('表单数据:', data)
      // 这里可以进行API调用等操作
      this.$message.success('提交成功')
    }
  }
}
</script>

<style scoped>
/* 自定义样式 */
</style>

简单示例

<template>
  <ele-form
    :form-data="formData"
    :form-config="formConfig"
    @submit="handleSubmit"
  />
</template>

<script>
export default {
  data() {
    return {
      formData: {
        content: ''
      },
      formConfig: [
        {
          label: '内容',
          prop: 'content',
          type: 'fire-editor'
        }
      ]
    }
  },
  methods: {
    handleSubmit(data) {
      console.log('表单数据:', data)
    }
  }
}
</script>

总结

VueUeditorWrap 是一个功能强大的富文本编辑器组件，通过简单的配置即可快速实现在表单中的富文本编辑功能。它支持多种配置选项，可以满足不同场景下的富文本编辑需求。

通过全局配置和组件级配置的结合，可以灵活应对各种富文本编辑场景，大大提高了开发效率。

版本信息