Hello,
I have gone through with this link https://surveyjs.io/Examples/Library/?id=survey-markdown-radiogroup&platform=jQuery&theme=default and want to add image along with question or answer. This example using image link if we see json but if we use survey tool with following steps:
a) Drag radio buttons
b) I want to put images with radio buttons.
c) Drag image picker in front of each radio option. (Is this possible in current version?)
Also I want to know can we add question along with sub question?
Please suggest.
Thanks,
Guys please suggest.
Hello,
If you want to choose image, you can use the imagepicker question.
What do you mean under the "sub question"? Could you describe it in greater details or share a picture?
Thanks, Serge
SurveyJS Team
Hello Serge,
Thanks for reply:
a) If you want to choose image, you can use the imagepicker question.
But I am not able to use image picker along with question answer type please check attached screen shot.
b) What do you mean under the "sub question"? Could you describe it in greater details or share a picture?
A question may have sub questions example:
Hello Serge,
Any update?
Hello,
a) There is no built-in ways to drag-drop image into a question items text. You can add ckeditor as shown in this example (I'll post the link later) to edit texts as markdown so you will be able to add images via means of the custom editor. I nned to say that ckeditor is fird-party commercal tool.
b) You can use a panel to organize sub questions.
Thanks, Serge
SurveyJS Team
I would request you please provide some referece example for both cases.
Also your website seems to be down from last 2-3 hrs:
We're waiting for our hoster. See https://github.com/surveyjs/surveyjs/issues/1307 for more details.
I'll post links later.
Thanks, Serge
SurveyJS Team
Okie once website is up please send me reference links.
Thanks,
Hello Serge,
Please send me reference link. So that I can share with client.
Thanks,
Hello,
Panel element is used to group questions - https://surveyjs.io/Examples/Library/?id=questiontype-panel&platform=jQuery&theme=default
ckeditor usage demo - https://surveyjs.io/Examples/Builder/?id=ckeditorpropertyeditor&theme=bootstrap
Thanks, Serge
SurveyJS Team
Links are not working giving 500 internal server error.
Hello,
Links are working ok for me. Can you try to clean ro turn off cache?
Thanks, Serge
SurveyJS Team
Ok cool its working now.
I see panel example which looks ok.
But for image along with question/answer using editor is still not clear to me.
I try editor by drag/drop radio group and I want to append image in front of each radio button. Can you please guide?
Hello Serge Any update?
Hello Serge
Any update? How to modify editor with radio button+ image?
Hello,
There is no built-in functionality allowing to append image in front of each radio button.
This can be acheved manually via using markdown in items text, as shown in the example you mentioned first - https://surveyjs.io/Examples/Library/?id=survey-markdown-radiogroup
We have an example how to use custom editor for question titles (https://surveyjs.io/Examples/Builder/?id=ckeditorpropertyeditor)) but for now we haven't example of custom editor for choice items.
I need some time to create this example.
Thanks, Serge
SurveyJS Team
Sure Serge please take your time meanwhile I am also trying to customize it at my end.
Let me know once you are done.
Thanks,
Hello,
I've created a sample for you
https://plnkr.co/edit/LnbNNTWimR9yd63SHQ5d?p=preview
You can open edit question choices modal
Then press edit for choice and change item's text
Thanks, Serge
SurveyJS Team
Thanks Serge.
Let me check.
Hello Serge,
I used panel for sub-question feature but I am unable to set question numbering example:
a) Panel 'A' have 3 questions 1,2,3.
b) I added one more Panel 'B' with 3 questions then order should be 1,2,3 (for Panel B). But its giving 4,5,6.
c) Can we change question numbering?
Thanks,
I've exatracted this question into a separate thread - https://surveyjs.answerdesk.io/ticket/details/t1026
Hello Serge,
ck editor does not have option to upload image from local system. In this example:
https://next.plnkr.co/edit/LnbNNTWimR9yd63SHQ5d?p=preview
Can we use another editor? which provides image uploading from local system.
Hello,
Sure, you can use any 3-rd pary editor according to it's license.
The pluner contains sample code of the custom editor creation and registration:
var CkEditor_ModalEditor = { afterRender: function (modalEditor, htmlElement) { var editor = CKEDITOR.replace(htmlElement); editor.on('change', function () { modalEditor.editingValue = editor.getData(); }); editor.setData(modalEditor.editingValue); modalEditor.onValueUpdated = function (newValue) { editor.setData(newValue); } }, destroy: function (modalEditor, htmlElement) { var instance = CKEDITOR.instances[htmlElement.id]; if (instance) { instance.removeAllListeners(); CKEDITOR.remove(instance); } } }; SurveyEditor .SurveyPropertyModalEditor .registerCustomWidget("html", CkEditor_ModalEditor); SurveyEditor .SurveyPropertyModalEditor .registerCustomWidget("text", CkEditor_ModalEditor);
Thanks, Serge
Hello Serge,
I try to add http://mindmup.github.io/bootstrap-wysiwyg/ editor but I am not able to understand afterRender and destroy process of this editor. I also try to manage it using editor js but events are not clear https://github.com/mindmup/bootstrap-wysiwyg/blob/master/bootstrap-wysiwyg.js
Could you please suggest any solution?
Hello,
Sure. Please provide us with your minimal sample code in plunker.
Thanks, Serge
SurveyJS Team
I am unable to signup with plunker. Source code is attached you can directly run into plunker.
Editor name: Summer note bootstrap editor.
https://summernote.org/getting-started/#basic-api
Thanks,
Hello Serge Any update?
Hello Serge any update?
I am unable to find out solution :(
Hello,
Here is the working sample - https://plnkr.co/edit/goOCnttqMzygFisZEmjv?p=preview
And the summernote custom editor code:
var Summernote_ModalEditor = { afterRender: function (modalEditor, htmlElement) { var editor = $(htmlElement).summernote({ callbacks: { onChange: function(contents, $editable) { modalEditor.editingValue = contents; } }, placeholder: 'Hello stand alone ui', tabsize: 2, height: 100 }); modalEditor.onValueUpdated = function (newValue) { editor.summernote('code', newValue); } editor.summernote('code', modalEditor.editingValue); }, destroy: function (modalEditor, htmlElement) { $(htmlElement).summernote('destroy'); } }; SurveyEditor .SurveyPropertyModalEditor .registerCustomWidget("html", Summernote_ModalEditor); SurveyEditor .SurveyPropertyModalEditor .registerCustomWidget("text", Summernote_ModalEditor);
Thanks, Serge
SurveyJS Team
Great thanks :)
Hello Serge,
I have added summer note editor in survey page. I have noticed couple of things with survey editor:
a) When we upload image of 10-12KB it works great and loads complete image in editor.
b) When we upload image of 20-30KB survey tool editor will get hanged. It gives page is unresponsive error.
c) I tested same on official summer note editor website but it worked without any issue.
d) I try same with https://plnkr.co/edit/goOCnttqMzygFisZEmjv?p=preview example and it is failed to load.
e)When it hanged does not gives any error in console mode.
You can test here:
https://next.plnkr.co/edit/goOCnttqMzygFisZEmjv?p=preview&preview
http://183.182.84.29/TeleHealthCSS/survey/index
Please suggest.
Thanks,
We've modified your plunker and it looks ok: https://next.plnkr.co/edit/fVLkU1t1TcJ44Yjo Could you check it please and provide us with exact steps how to reproduce this issue?
Nope still same error:
Add image in question header :
a) When we upload image of 10-12KB it works great and loads complete image in editor.
b) When we upload image of 20-30KB survey tool editor will get hanged. It gives page is unresponsive error.
Hello,
We sill are not able to reproduce the issue on our side. Please provide us with a working sample (you can use the above plunker) and exact steps to reproduce the problem.
Thanks, Serge
SurveyJS Team
I have attached the testing video.
Please refer,
Unfortunately I'm not able to play the video:
Thanks, Serge
SurveyJS Team
Please check latest video.
Any update? Have you seen the video?
Any update? Have you seen the video?
Hello,
Yes, I've seen the video. And I've tryied to reproduce the issue locally. But unfortunately I've not managed reproduce the issue locally.
Probably environment affects the behaviour.
We can't fix the issue unless it will be reproduced.
We need to localize the source of a problem. Can you try to reproduce it on different computers/OSes/browsers and inform us about the results?
Thanks, Serge
SurveyJS Team
Hello Serge,
Let me explain what is the issue:
a) Please upload attached images with editor.
b) Once you select image and click on apply/OK it will show image in survey tool editor.
c) Now click on image and then click on outside of image area. This will make page un-responsive.
d) Now click on image and click on edit page property then page will be become un-responsive.
e) There is one image in attachment "test" when you upload this image and inside the survey editor when you click on image it will become coded and page will get un-responsive again.
I tested this with 15 computers and all are getting same issue.
Please suggest.
Hello,
Probably the problem is in inplace editing adorners.
Can you check this plunk - https://next.plnkr.co/edit/j79rbWT95P1XzEvl ?
Thanks, Serge
SurveyJS Team
you are right.
Its working fine let me modify my survey demo page.
Thanks,
Here is the necessary code:
SurveyEditor.removeAdorners(\[ "title", "item\-title", "choices\-label", "choices\-draggable", "label", "rating\-item", "select\-choices" ]);
Thanks, Serge
SurveyJS Team
Thank You Serge.
Its working good now :)