uni-app 微信小程序可用的简易富文本编辑器

在开发uni-app微信小程序时，如果需要集成一个简易的富文本编辑器，可以借助一些开源组件库或者自己实现基本的富文本编辑功能。以下是一个使用rich-text组件和自定义输入框的简单富文本编辑器示例。虽然功能相对基础，但可以作为起点进行扩展。

实现步骤

1. 安装依赖：确保你已经安装了uni-app的开发环境，并且项目已经初始化。

2. 创建组件：在components目录下创建一个名为RichTextEditor的组件。

RichTextEditor.vue

<template>
  <view class="rich-text-editor">
    <textarea 
      v-model="content" 
      placeholder="请输入内容" 
      @input="updateContent"
      style="height: 200px;"
    ></textarea>
    <rich-text :nodes="formattedContent"></rich-text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      content: '',
      formattedContent: []
    };
  },
  methods: {
    updateContent(event) {
      // 简单示例：将换行符转换为<br/>标签
      this.formattedContent = this.parseContentToNodes(event.detail.value);
    },
    parseContentToNodes(text) {
      // 使用正则表达式将换行符替换为<br/>标签
      const formattedText = text.replace(/\n/g, '<br/>');
      // 将字符串转换为rich-text可接受的nodes格式
      return [{
        name: 'p',
        children: [{
          type: 'text',
          text: formattedText
        }]
      }];
    }
  }
};
</script>

<style scoped>
.rich-text-editor {
  padding: 16px;
  background-color: #f8f8f8;
}
textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}
</style>

1. 使用组件：在你的页面中使用这个组件。

pages/index/index.vue

<template>
  <view>
    <RichTextEditor />
  </view>
</template>

<script>
import RichTextEditor from '@/components/RichTextEditor.vue';

export default {
  components: {
    RichTextEditor
  }
};
</script>

说明

• 上述代码实现了一个简易的富文本编辑器，使用textarea作为输入，rich-text用于显示富文本内容。
• updateContent方法中，通过正则表达式将换行符替换为<br/>标签，然后将字符串转换为rich-text组件可接受的nodes格式。
• 这个示例非常基础，如果需要更复杂的功能（如加粗、斜体、链接等），建议使用成熟的富文本编辑器组件库，如uView UI的富文本编辑器组件。

这个示例代码可以帮助你快速搭建一个简易的富文本编辑器，后续可以根据需求进行功能扩展和优化。