внедрить ckeditor ( survey.js ) в реакции с использованием функционального компонента

#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" };