import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

import Home from './Home';
import SurveyJSExample from './SurveyJSExample';
import CKEditorExample from './CKEditorExample';

ReactDOM.render(
  <Router>
    <Switch>
      <Route path="/surveyJSExample">
        <SurveyJSExample />
      </Route>
      <Route path="/ckEditorExample">
        <CKEditorExample />
      </Route>
      <Route path="/">
        <Home />
      </Route>
    </Switch>
  </Router>,
  document.getElementById('root')
);

{
  "name": "@plnkr/starter-react",
  "version": "1.0.2",
  "description": "React starter template",
  "dependencies": {
    "react": "^16.13.0",
    "react-dom": "^16.13.0",
    "react-router-dom": "^5.1.2",
    "ckeditor4-react": "^1.1.1",
    "survey-react": "^1.7.23",
    "surveyjs-widgets": "^1.7.23"
  },
  "plnkr": {
    "runtime": "system",
    "useHotReload": true
  }
}

import React from "react";
import { Link } from "react-router-dom";

export default function Home() {
  return (
    <div>
      HOME
      <ul>
        <li><Link to="/surveyJSExample">SurveyJS Example</Link></li>
        <li><Link to="/ckEditorExample">CKEditor Example</Link></li>
      </ul>
    </div>
  )
}

import React from 'react';
import { Link } from "react-router-dom";
import * as Survey from "survey-react";
import * as widgets from "surveyjs-widgets";
import CKEditor from 'ckeditor4-react';

export default function SurveyJSExample() {
  Survey
    .StylesManager
    .applyTheme("modern");

  var json = {
      "elements": [
          {
              "type": "comment",
              "name": "normalComment",
              "title": "A comment"
          },
          {
              "type": "editor",
              "name": "ckeditor",
              "title": "CK Editor"
          }
      ]
  };

  const surveyData = {
    "normalComment": "There's a second question element of type 'editor' that doesn't renders."
  };

  const survey = new Survey.Model(json);

  survey
    .onComplete
    .add(function (result) {
        alert(JSON.stringify(result.data));
    });

  return (
    <div>
      Trying to use CKEditor into SurveyJS.
      <ul>
        <li><Link to="/">Back to home</Link></li>
      </ul>
      <Survey.Survey 
        model={survey}
        data={surveyData} />
    </div>
  );
}

import React from 'react';
import { Link } from "react-router-dom";
import CKEditor from 'ckeditor4-react';

export default function CKEditorExample() {
  return (
    <div>
      Using CKEditor standalone
      <ul>
        <li><Link to="/">Back to home</Link></li>
      </ul>
      <CKEditor
        data="<p>Hello from <strong>CKEditor 4</strong>!</p>" />
    </div>
  );
}