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
CKEditor for Comments
Answers approved by surveyjs Support
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.
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
Codeimport 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.
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.