uniapp schema2code如何生成带编辑器的内容详情

在uniapp中使用schema2code时，如何生成包含富文本编辑器（如quill或ueditor）的内容详情页面？目前自动生成的页面只有基础表单字段，需要实现带图文混排的编辑器功能，求具体配置方法或实现思路。

2 回复

使用uniapp的schema2code生成带编辑器的内容详情，可在schema中定义字段类型为"editor"。在代码生成时，选择包含富文本编辑器的模板，即可自动生成带编辑器的详情页面。


在 UniApp 中使用 schema2code 生成带编辑器的内容详情页面，可以通过以下步骤实现：

1. 配置 DB Schema

在 uniCloud/cloudfunctions/common/uni-id-common 目录下的 DB Schema 中，定义字段类型为 String，并使用 "fieldtype": "editor" 指定为富文本编辑器：

{
  "bsonType": "object",
  "required": [],
  "properties": {
    "content": {
      "bsonType": "string",
      "title": "内容",
      "fieldtype": "editor"
    }
  }
}

2. 生成代码

  • 在 HBuilderX 中，右键点击 DB Schema 文件，选择 生成代码。
  • 选择生成 Admin 管理端 或 前端页面，确保勾选包含 content 字段。

3. 前端页面调整

生成的页面默认使用 <rich-text> 组件渲染内容。如需增强编辑器功能，可替换为 uni-edit 或第三方富文本组件（如 quill）：

<template>
  <view>
    <uni-forms-item label="内容">
      <uni-easyinput type="textarea" v-model="formData.content" placeholder="请输入内容" />
      <!-- 或使用富文本组件 -->
      <!-- <editor :value="formData.content" @input="onEditorInput" /> -->
    </uni-forms-item>
  </view>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        content: ""
      }
    };
  },
  methods: {
    onEditorInput(e) {
      this.formData.content = e.detail.value;
    }
  }
};
</script>

4. 数据提交与显示

  • 提交数据：通过 UniCloud 的 add 或 update 方法保存到数据库。
  • 显示详情：在详情页面使用 <rich-text> 渲染 HTML 内容：
<rich-text :nodes="detailData.content"></rich-text>

注意事项

  • 安全过滤：渲染富文本时注意 XSS 防护，可使用官方 xss 库过滤内容。
  • 图片上传：若编辑器支持图片，需配置 UniCloud 存储权限及路径。

通过以上步骤，即可快速生成支持富文本编辑的内容详情页面。

回到顶部