Question T10592
Visible to All Users

CKEditor for Comments

created 2 years ago

Hi
How can i add a ckeditor if survey.question.getType()==='comment' of any question.
The normal comment textbox i need to remove by ckeditor to add rich text data.
Thanks and Regards,
Amjad

Answers approved by surveyjs Support

created 2 years ago (modified 2 years ago)

Hello Amjad,
You can simply update your JSON and replace the "type": "comment" with "type": "editor" for required elements.

JSON
"elements": [ { "type": "editor", "name": "ckeditor", ... } ]

Register CKEditor and get your questions rendered with CKEditor instead of a regular comment editor.

Important note is that CKEditor is a third-party widget which is distributed under a commercial License.

Please feel free to contact us if you have any questions.

    Show previous comments (1)

      Hello Amjad,
      Thank you for the update. You don't need to substitute the name attribute. Just update the element type from comment to editor. To register the CKEditor, register the ckeditor.js, and surveyjs-widgets.js. Please follow this demo: CKEditor. You can click "Edit in Plunker" to run this demo in action.

      Please let me know if this helps.

        Hi Jane,
        I wanted to add Ckeditor during survey creation process. below is the code used

        Code
        import React, { useMemo, useEffect, forwardRef, memo } from "react"; import PropTypes from "prop-types"; import * as SurveyKo from "survey-knockout"; import * as SurveyJSCreator from "survey-creator"; import * as widgets from "surveyjs-widgets"; // lib import { applySurveyCreatorTheme } from "@lib/Theme"; import "survey-creator/survey-creator.css"; const $ = window.$; //ckeditor const self = window; applySurveyCreatorTheme(SurveyJSCreator); // widgets.icheck(SurveyKo, $); widgets.prettycheckbox(SurveyKo); widgets.select2(SurveyKo, $); widgets.inputmask(SurveyKo); widgets.jquerybarrating(SurveyKo, $); widgets.jqueryuidatepicker(SurveyKo, $); widgets.nouislider(SurveyKo); widgets.select2tagbox(SurveyKo, $); // widgets.signaturepad(SurveyKo); widgets.sortablejs(SurveyKo); widgets.ckeditor(SurveyKo); widgets.autocomplete(SurveyKo, $); widgets.bootstrapslider(SurveyKo); const options = { showEmbededSurveyTab: false, showTranslationTab: true }; function Create({ id, onSave, innerRef }) {   const surveyCreator = useMemo(     () => new SurveyJSCreator.SurveyCreator(null, options),     []   );   surveyCreator.haveCommercialLicense = true;   surveyCreator.showToolbox = "right";   surveyCreator.showPropertyGrid = "right";   //  surveyCreator.supportedLocales = ['en', 'de', 'es', 'fr']   //  surveyCreator.surveyLocalization.supportedLocales = ['en', 'de', 'es', 'fr']   if (!self.alreadyRendered) {     const script = document.createElement("script");     script.src = "https://cdn.ckeditor.com/4.14.1/standard/ckeditor.js";     document.head.append(script);     script.onload = function () {       const CKEDITOR = window.CKEDITOR;       self.alreadyRendered = true;       if (self.forceUpdate) self.forceUpdate();     };   }   surveyCreator.saveSurveyFunc = () => {     onSave(surveyCreator.text);   };   useEffect(() => {     if (surveyCreator && id) {       surveyCreator.render(id);     }   }, [surveyCreator, id]);   useEffect(() => {     if (innerRef && innerRef.hasOwnProperty("current") && !innerRef.current) {       innerRef.current = surveyCreator;     }   }, [innerRef, surveyCreator]);   return <div id={id} />; } Create.propTypes = {   id: PropTypes.string.isRequired,   onSave: PropTypes.func.isRequired, }; const CreateWithRef = forwardRef(function (props, ref) {   return <Create {...props} innerRef={ref} />; }); export default memo(CreateWithRef);

        I tried adding the Ckeditor during creation of Survey as above. but clicking on editor gives me these error in console could you help me what more i need to add in my code to make Editor functionable.
        Clipboard-File-1.png
        Thanks

          Hello,

          I created a separate ticket on your behalf: T10688: Add CKEditor during survey creation. We placed it in our processing queue and will process it shortly.