0

我正在尝试使用功能组件和survey-react npm库在reactjs中实现CKEditor?像复选框这样的普通组件很容易呈现,但我无法呈现像 CKEditor 这样的自定义小部件。有人可以帮我吗?下面是我的代码。我现在想不出有什么可做的。该文档没有显示任何使用功能组件的内容。

import React from 'react'
import * as Survey from "survey-react";
import * as widgets from "surveyjs-widgets";
import "survey-react/survey.css";
import "survey-react/modern.css";
import {createQuestions} from '../database/createQuestions'
   
const CreateQuestionsPage = () => {
    const handleComplete = (survey, options) => {
        console.log("Survey results: " + JSON.stringify(survey.data));
    }

    const survey = new Survey.Model(createQuestions);

    return (
        <div>
            <Survey.Survey 
                json={JSON.stringify(createQuestions)} 
                onComplete={handleComplete}
                model={survey}
            />
        </div>
    )
}

export default CreateQuestionsPage

createQuestions.js 文件

export var createQuestions = {
    "title": "New Question",
    "description": "This form helps you to create a question for a question type, including exam mode, difficulty level, question bank and tags. Tags helps you to group the questions and find it easily from a pool.",
    "pages": [
        {
            "name": "page1",
            "elements": [
                {
                    "type": "radiogroup",
                    "name": "language",
                    "title": "Language",
                    "choices": ["English"]
                }, {
                    "type": "dropdown",
                    "name": "exam_mode",
                    "title": "Exam Mode",
                    "choices": ["Exam", "Home Work"]
                }, 
                {
                    "type": "dropdown",
                    "name": "difficulty_level",
                    "title": "Difficulty Level",
                    "choices": ["Easy", "Medium", "Hard"]
                }, 
                {
                    "type": "dropdown",
                    "name": "question_type",
                    "title": "Question Type",
                    "choices": [
                        "Multiple Choice", 
                        "Multiple Selection", 
                        "Fill In The Blanks",
                        "Yes/No or True/False",
                        "Descriptive",
                        "Passage Based",
                        "Audio Based",
                        "Video Based",
                        "Short Answer"
                    ]
                },
                {
                    "type": "dropdown",
                    "name": "subject",
                    "title": "Subject",
                    "choices": [
                        "English", 
                        "Maths", 
                        "Reasoning",
                        "GK/GS",
                    ]
                },{
                    "type": "editor",
                    "name": "description",
                    "title": "Description",
                },{
                    "type": "comment",
                    "name": "hint",
                    "title": "Hint",
                },{
                    "type":"number",
                    "name":"mark",
                    "title":"Marks"
                },{
                    "type":"tagbox",
                    "name":"tags",
                    "title":"Tags"
                },{
                    "type":"comment",
                    "name":"question_bank",
                    "title":"Question Bank"
                },{
                    "type":"boolean",
                    "name":"publish",
                    "title":"Publish",
                    "isRequired": true,
                    "description": "( You need to publish this question, if you want to assign it to an exam / homework. )"
                }
            ]
        }
    ],
    "showQuestionNumbers": "off"
};
4

0 回答 0