uni-app 富文本编辑器 支持添加图片和视频功能

在 uni-app 中实现支持添加图片和视频功能的富文本编辑器，可以通过集成第三方富文本编辑器组件或者自行封装实现。以下是一个基于 rich-text 组件和 u-editor 插件的简单示例，展示如何实现这一功能。需要注意的是，uni-app 本身没有内置的富文本编辑器组件，但可以通过插件或者社区提供的组件来实现。

1. 使用 u-editor 插件

首先，确保你的项目中已经安装了 u-editor 插件。如果还没有安装，可以通过以下命令安装（假设使用的是 HBuilderX）：

npm install @dcloudio/uni-ui

然后，在页面的 <template> 中引入并使用 u-editor：

<template>
  <view>
    <u-editor
      ref="editor"
      v-model="content"
      :config="editorConfig"
      @ready="onEditorReady"
      @change="onContentChange"
    />
    <button @click="insertMedia">Insert Media</button>
  </view>
</template>

在 <script> 中配置编辑器并处理图片/视频插入逻辑：

export default {
  data() {
    return {
      content: '',
      editorConfig: {
        // 配置项，比如工具栏等
        toolbars: [
          ['bold', 'italic', 'underline'],
          ['image', 'video'] // 假设插件支持这些按钮
          // 注意：这里的 'image' 和 'video' 按钮可能需要自定义实现
        ]
      }
    };
  },
  methods: {
    onEditorReady() {
      console.log('Editor is ready');
    },
    onContentChange(content) {
      this.content = content;
    },
    insertMedia() {
      // 弹出选择图片/视频的界面，这里只是示例，具体实现需根据需求定制
      uni.chooseImage({
        count: 1,
        success: (res) => {
          const filePath = res.tempFilePaths[0];
          // 插入图片到编辑器内容中，这里需要自行处理内容格式
          this.content += `![alt text](${filePath})`;
          // 注意：这里的插入方式需要根据实际的富文本解析器来调整
        }
      });
    }
  }
};

注意事项

1. 自定义按钮：由于 u-editor 可能不直接支持图片和视频插入按钮，你可能需要自定义这些按钮的点击事件，使用 uni.chooseImage 和 uni.chooseVideo API 来选择媒体文件，并将选中的文件路径以特定的格式插入到富文本内容中。
2. 内容解析：在显示富文本内容时，需要使用支持图片和视频的解析器，如 html2canvas 或其他第三方库，将富文本内容正确渲染到页面上。
3. 兼容性：不同平台（如小程序、H5、App）可能对富文本内容的解析和渲染有所不同，需要根据具体平台进行调整。