如何在Strapi插件中引入并配置Richtext（WYSIWYG）组件？

Strapi自带的Richtext（WYSIWYG）组件完全可以在自定义插件中复用，因为Strapi Admin UI基于React构建，核心组件都对外暴露可导入的接口。下面是结合3D资源上传、JSON字段管理和Richtext组件的完整实现示例：

1. 基础依赖确认 #

确保你的插件package.json中已包含@strapi/strapi-admin作为peer依赖（插件初始化时通常会自动添加）：

"peerDependencies": {
  "@strapi/strapi-admin": "^4.x.x"
}

2. 核心组件实现 #

在插件的src/admin/components/3DResourceForm/index.js中创建表单组件，整合所有需求：

import { useState } from 'react';
import { Richtext, FileInput, InputText, Box, Flex } from '@strapi/strapi-admin';

const DResourceForm = () => {
  // 管理JSON格式的资源元数据
  const [resourceMeta, setResourceMeta] = useState({
    name: '',
    category: '',
    // 将富文本内容存入JSON字段
    detailedDesc: ''
  });

  // 处理3D资源上传
  const [uploadedFile, setUploadedFile] = useState(null);

  // 更新JSON字段的通用方法
  const updateMetaField = (key, value) => {
    setResourceMeta(prev => ({ ...prev, [key]: value }));
  };

  // 处理富文本内容变更（直接存入JSON字段）
  const handleRichTextChange = (content) => {
    updateMetaField('detailedDesc', content);
  };

  return (
    <Box padding={4}>
      <Flex direction="column" gap={6}>
        {/* 3D资源上传区域 */}
        <Box>
          <h3 style={{ marginBottom: '12px' }}>上传3D资源文件</h3>
          <FileInput
            label="支持格式：.glb/.gltf/.obj"
            accept=".glb,.gltf,.obj"
            value={uploadedFile}
            onChange={(file) => setUploadedFile(file)}
          />
        </Box>

        {/* JSON元数据管理区域 */}
        <Box>
          <h3 style={{ marginBottom: '12px' }}>资源元数据（JSON格式）</h3>
          <InputText
            label="资源名称"
            value={resourceMeta.name}
            onChange={(e) => updateMetaField('name', e.target.value)}
            marginBottom={2}
          />
          <InputText
            label="资源分类"
            value={resourceMeta.category}
            onChange={(e) => updateMetaField('category', e.target.value)}
          />
        </Box>

        {/* Richtext富文本编辑区域 */}
        <Box>
          <h3 style={{ marginBottom: '12px' }}>资源详细描述（富文本）</h3>
          <Richtext
            value={resourceMeta.detailedDesc}
            onChange={handleRichTextChange}
            // 自定义编辑器工具栏选项
            editorOptions={{
              toolbar: [
                'heading',
                'bold',
                'italic',
                'link',
                'image',
                'unordered-list',
                'ordered-list',
                'code-block',
                'blockquote'
              ]
            }}
          />
        </Box>
      </Flex>
    </Box>
  );
};

export default DResourceForm;

3. 注册插件路由与组件 #

在插件的src/admin/index.js中注册菜单和页面组件：

import DResourceForm from './components/3DResourceForm';

export default {
  register(app) {
    // 添加插件菜单入口
    app.addMenuLink({
      to: '/plugins/3d-resource-manager',
      icon: 'cube',
      intlLabel: {
        id: '3d-resource-manager.menu.label',
        defaultMessage: '3D资源管理器'
      },
      Component: DResourceForm
    });
  },

  bootstrap() {}
};

关键注意事项 #

• 兼容性：确保插件使用的Strapi版本与@strapi/strapi-admin版本一致，避免组件API不兼容问题。
• 富文本内容存储：示例中直接将富文本内容存入JSON字段的detailedDesc属性，你也可以根据需求将其单独作为独立字段存储。
• 编辑器定制：editorOptions支持自定义工具栏、上传配置等，可根据业务需求调整。

内容的提问来源于stack exchange，提问作者mattwallace