uni-app 简单的富文本编辑器

当然，以下是一个使用uni-app实现简单富文本编辑器的示例代码。这个示例将展示如何使用第三方富文本编辑器组件rich-text以及如何处理基本的文本格式（如加粗、斜体、下划线等）。

首先，确保你的uni-app项目中已经安装了必要的依赖。虽然uni-app本身不直接提供富文本编辑器组件，但你可以使用其rich-text组件来显示富文本内容，并结合其他UI组件来实现简单的编辑功能。

1. 在pages/index/index.vue文件中添加以下代码：

<template>
  <view class="container">
    <!-- 工具栏 -->
    <view class="toolbar">
      <button @click="addText('**bold**')">B</button>
      <button @click="addText('*italic*')">I</button>
      <button @click="addText('__underline__')">U</button>
    </view>
    <!-- 输入框 -->
    <textarea v-model="content" placeholder="Enter text here..."></textarea>
    <!-- 显示富文本 -->
    <rich-text :nodes="parsedContent"></rich-text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      content: '',
      parsedContent: []
    };
  },
  methods: {
    addText(format) {
      const selectedText = format; // 这里可以扩展为获取选中的文本，目前简单处理
      const newText = this.content + selectedText + ' ';
      this.content = newText;
      this.parseContent();
    },
    parseContent() {
      // 这里使用简单的字符串替换来模拟富文本解析，实际应用中可能需要更复杂的解析逻辑
      let parsed = this.content;
      parsed = parsed.replace(/***(.*?)***/g, '<strong>$1</strong>');
      parsed = parsed.replace(/*(.*?)*/g, '<em>$1</em>');
      parsed = parsed.replace(/__(.*?)__/g, '<u>$1</u>');
      this.parsedContent = [{
        name: 'div',
        attrs: {
          class: 'rich-text',
          style: 'line-height: 1.6;'
        },
        children: [{
          type: 'text',
          text: parsed
        }]
      }];
    }
  },
  watch: {
    content(newVal) {
      this.parseContent();
    }
  }
};
</script>

<style>
.container {
  padding: 20px;
}
.toolbar {
  margin-bottom: 10px;
}
button {
  margin-right: 5px;
}
</style>

1. 说明：

• 工具栏：包含加粗（B）、斜体（I）和下划线（U）按钮。
• 文本输入框：使用textarea来输入文本。
• 富文本显示：使用rich-text组件来显示解析后的富文本内容。
• 解析逻辑：在parseContent方法中，通过简单的字符串替换来模拟富文本解析。实际应用中，你可能需要使用更强大的库（如html-to-rich-text）来解析HTML格式的富文本。

这个示例展示了如何在uni-app中实现一个简单的富文本编辑器。当然，对于更复杂的需求，你可能需要引入专门的富文本编辑器插件或库。