更新记录

1.2.0（2025-01-03）

更新日志

• v1.0.0 初始版本
• v1.1.0 新增H1/H2标题支持
• v1.2.0 优化工具栏样式

平台兼容性

BeiCangRichTextEditor 富文本编辑器组件

介绍

BeiCangRichTextEditor 是一个功能丰富的富文本编辑器组件，基于uni-app开发，适用于需要富文本编辑的场景。组件提供了多种文本格式化功能，支持自定义样式和高度。

功能特性

• 支持加粗、斜体、下划线文本格式
• 支持无序列表
• 支持左对齐、居中对齐、右对齐
• 支持H1、H2标题格式
• 可自定义编辑器高度
• 支持获取用户输入内容
• 提供placeholder提示
• 支持双向绑定内容

安装

确保在项目中安装了 UniApp 及相关依赖。

使用方法

1. 引入组件

在需要使用富文本编辑器的页面中引入 BeiCangRichTextEditor 组件。

<template>
  <view>
    <bei-cang-rich-text-editor
      v-model="editorContent"
      placeholder="请输入内容..."
      :setHeight="600"
    ></bei-cang-rich-text-editor>
    <button @click="getContent">获取内容</button>
  </view>
</template>

<script>
import BeiCangRichTextEditor from '@/uni_modules/BeiCangRichTextEditor/BeiCangRichTextEditor.vue'

export default {
  components: {
    BeiCangRichTextEditor
  },
  data() {
    return {
      editorContent: ''
    };
  },
  methods: {
    async getContent() {
      const content = await this.$refs.editor.getUserInput();
      console.log('用户输入的内容:', content);
    }
  }
};
</script>

2. 组件属性

3. 方法

• getUserInput(): 获取用户输入的内容并以HTML格式返回

4. 样式定制

组件提供了以下CSS类名用于样式定制：

• .rich-text-editor: 编辑器容器
• .toolbar: 工具栏
• .toolbar-item: 工具栏按钮
• .richEditor: 编辑区域

可以通过覆盖这些类名来定制组件样式。

示例

<template>
  <view>
    <bei-cang-rich-text-editor
      v-model="editorContent"
      placeholder="请输入内容..."
      :setHeight="600"
      ref="editor"
    ></bei-cang-rich-text-editor>
    <button @click="getContent">获取内容</button>
  </view>
</template>

<script>
import BeiCangRichTextEditor from '@/uni_modules/BeiCangRichTextEditor/BeiCangRichTextEditor.vue'

export default {
  components: {
    BeiCangRichTextEditor
  },
  data() {
    return {
      editorContent: ''
    };
  },
  methods: {
    async getContent() {
      const content = await this.$refs.editor.getUserInput();
      console.log('用户输入的内容:', content);
    }
  }
};
</script>

注意事项

1. 组件高度最小为500rpx
2. 编辑器内容以HTML格式存储
3. 样式定制时请注意层级关系

更新日志

• v1.0.0 初始版本
• v1.1.0 新增H1/H2标题支持
• v1.2.0 优化工具栏样式