更新记录

1.0.0（2025-06-03）

初次版本

平台兼容性

uni-app(4.03)

uni-app x(4.04)

其他

zmt-editor编辑器组件使用手册

支持多种文本格式编辑、图片上传、表格插入等功能，适用于各类需要富文本编辑的应用场景。

安装与引入

### 基本用法

直接调用即可。

在模板中使用组件：

<template>
  <div>
    <ZmtEditor 
      :initialContent="initialHtmlContent" 
      @contentChange="handleContentChange"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      initialHtmlContent: '<p>欢迎使用ZMT编辑器</p>'
    }
  },
  methods: {
    handleContentChange(content) {
      console.log('编辑器内容变化:', content);
      // 可以在这里处理内容变化，如保存到服务器
    }
  }
}
</script>

组件特性

1. 丰富的文本格式化工具

   • 支持粗体、斜体、下划线、删除线等文本样式
   • 提供左对齐、居中对齐、右对齐和两端对齐功能
   • 支持无序列表、有序列表以及缩进调整

2. 图片上传功能

   • 支持从本地选择图片上传
   • 支持粘贴剪贴板中的图片
   • 上传进度实时显示
   • 上传成功后自动插入到编辑器中

3. 表格创建与编辑

   • 支持自定义行数和列数创建表格
   • 表格单元格大小可调整
   • 表格样式美观，支持表头设置

4. 链接插入

   • 支持插入带有文本和URL的超链接
   • 链接默认在新窗口打开

5. 其他功能

   • 字体颜色选择器，提供丰富的颜色选项
   • 字号调整
   • 清除格式功能
   • 字数统计
   • 图片大小调整功能

Props

cloudStorageConfig默认值：

{
  uploadUrl: '',         // 上传URL
  fileKey: 'file',       // 文件字段名
  successHandler: null,  // 自定义成功处理函数
  failHandler: null,     // 自定义失败处理函数
  headers: {}            // 请求头
}

事件

方法

样式定制

主要样式类：

• .zmt-editor-container - 编辑器整体容器
• .toolbar - 工具栏
• .editor-content - 编辑区域
• .status-bar - 状态栏
• .dialog - 对话框