#reactjs #react-hooks #react-functional-component #surveyjs
Вопрос:
Я пытаюсь реализовать CKEditor в reactjs, используя функциональный компонент и библиотеку npm survey-react? Обычные компоненты, такие как флажок, легко визуализируются, но я не могу визуализировать пользовательские виджеты, такие как 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 = () =gt; { const handleComplete = (survey, options) =gt; { console.log("Survey results: " JSON.stringify(survey.data)); } const survey = new Survey.Model(createQuestions); return ( lt;divgt; lt;Survey.Survey json={JSON.stringify(createQuestions)} onComplete={handleComplete} model={survey} /gt; lt;/divgt; ) } 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" };