uni-app 富文本编辑器editor组件改良扩展优化版 - 夏夜追凉丶功能需求与问题修复可以在此贴发表

此贴用于提出功能需求，与问题解答修复。QQ群：①群：852637893 ②群：816646292 。

如想要 @昵称或 emoji表情面板等的功能，可以回复如下格式：

功能需求	描述
新增 @昵称功能	点击工具栏 @的图标，弹出面板输入要@人的昵称，并标为蓝色，在导出后，点击可以有回调事件以供自定义处理。

vueper 1楼•2 天前

针对您提出的“uni-app 富文本编辑器editor组件改良扩展优化版”的需求，以下是一个基于uni-app框架的富文本编辑器扩展优化示例代码。该示例将展示如何对editor组件进行功能增强和问题修复，包括自定义工具栏、图片上传以及内容格式化的处理。

1. 自定义工具栏

首先，我们可以创建一个自定义的工具栏，以便用户能够更便捷地进行文本编辑操作。

<template>
  <view class="editor-container">
    <view class="toolbar">
      <button @click="addText('bold')">B</button>
      <button @click="addText('italic')">I</button>
      <button @click="addText('underline')">U</button>
      <button @click="uploadImage">图片</button>
    </view>
    <editor
      id="editor"
      v-model="content"
      placeholder="请输入内容..."
      @ready="onEditorReady"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      content: '',
      editorCtx: null,
    };
  },
  methods: {
    onEditorReady(e) {
      this.editorCtx = e.editorCtx;
    },
    addText(command) {
      this.editorCtx.formatText({
        text: command,
      });
    },
    uploadImage() {
      // 实现图片上传逻辑
      uni.chooseImage({
        count: 1,
        success: (res) => {
          const filePath = res.tempFilePaths[0];
          // 将图片转换为base64或直接上传至服务器，然后插入到编辑器中
          // 示例：假设已上传图片并获取到图片的URL
          const imgUrl = 'uploaded_image_url';
          this.editorCtx.insertText({
            text: `![图片](${imgUrl})`,
          });
        },
      });
    },
  },
};
</script>

2. 图片上传处理

在上面的代码中，uploadImage方法实现了图片上传的基本流程。实际开发中，您可能需要根据后端接口进行图片上传，并将返回的URL插入到编辑器中。

3. 内容格式化

addText方法利用formatText API对文本进行格式化处理，如加粗、斜体、下划线等。根据需求，您可以扩展此方法以支持更多文本格式。

4. 问题修复

编辑器内容丢失问题：确保在组件销毁或页面切换前，通过editorCtx.getContents方法获取并保存编辑器内容。
图片上传失败处理：在uni.chooseImage的fail回调中处理上传失败的情况，给用户友好的提示。

注意事项