Welcome to the LimeSurvey Community Forum

Ask the community, share ideas, and connect with other LimeSurvey users!

LimeSurvey Not Working properly with Tiny MCE

  • BITCNI
  • BITCNI's Avatar Topic Author
  • Offline
  • Premium Member
  • Premium Member
More
1 year 8 months ago #241378 by BITCNI
Please help us help you and fill where relevant:
Your LimeSurvey version: LimeSurvey Cloud
Version 3.28.51
Own server or LimeSurvey hosting: LS
Survey theme/template: BITCNI_extends_vanilla
==================
Hello, again.
Not sure if I should start a new Topic or continue the other one, but this does seem to be a new issue.
As some Mods here will be aware, we recently installed Tiny MCE in order to allow formatting; however, when users copy/paste from Word *or* just applying formatting, LimeSurvey is converting the formatting to HTML, so instead of  . . .

THIS
...
We get this:
<p style="margin: 0cm; line-height: 13.5pt;"><strong><span style="font-size: 11.5pt; font-family: 'Lucida Sans Unicode',sans-serif; color: #1b1d1e;">THIS</span></strong><span style="font-size: 11.5pt; font-family: 'Lucida Sans Unicode',sans-serif; color: #1b1d1e;"> </span></p> <p style="line-height: 18.75pt; margin: 0cm 0cm 11.25pt 0cm;"><span style="font-size: 10.0pt; font-family: 'Lucida Sans Unicode',sans-serif; color: #bbbbbb;">Mar 10, 2023 </span></p>

I put a ticket in with Tiny MCE, and they've said this is a problem with LimeSurvey and not the Plugin.

*sigh*

Anyone know if this is fixable, or does LS simply not support this SaaS properly? :(
 

Please Log in to join the conversation.

  • Joffm
  • Joffm's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
1 year 8 months ago #241380 by Joffm
What else did you expect?
Even if you insert this editor, the entered text is stored in a database field of type "text".
As you see here
[url] forums.limesurvey.org/index.php/forum/ca...r-respondents#240240 [/url]
you have to use.
{html_entity_decode(Q1)}

Joffm

Volunteers are not paid.
Not because they are worthless, but because they are priceless
The following user(s) said Thank You: DenisChenu

Please Log in to join the conversation.

  • BITCNI
  • BITCNI's Avatar Topic Author
  • Offline
  • Premium Member
  • Premium Member
More
1 year 8 months ago #241383 by BITCNI
To be honest, I thought the Plugin would decode it when it loaded and rendered it.

When you say that we have to use {html_entity_decode(Q1)}, can you please explain how this is used. Do I have to copy and paste this into every question? Does it go above or below the <script> code?

Thanks for your response and help.

Please Log in to join the conversation.

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
1 year 8 months ago #241388 by tpartner
Replied by tpartner on topic LimeSurvey Not Working properly with Tiny MCE
You were given a sample survey in one of your other threads. It uses the html_entity_decode() function to display the html stored in a previous question.

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

Please Log in to join the conversation.

  • BITCNI
  • BITCNI's Avatar Topic Author
  • Offline
  • Premium Member
  • Premium Member
More
1 year 8 months ago #241404 by BITCNI
Thanks, but when I downloaded the sample and tried to import it, I got this error.

Are you on a newer version?
Attachments:

Please Log in to join the conversation.

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
1 year 8 months ago #241450 by tpartner
Replied by tpartner on topic LimeSurvey Not Working properly with Tiny MCE
Yes, that sample survey was for version 5.x because you didn't fill in the first questions about your LimeSurvey installation.

Here is a slightly modified script that parses the HTML properly in the editor if respondents return to the page:
 
Code:
<script type="text/javascript" data-author="Tony Partner">
 
  $(document).on('ready pjax:scriptcomplete',function(){
 
    // Identify this question
    var thisQuestion = $('#question{QID}');
    var thisTextarea = $('textarea:eq(0)', thisQuestion);
    var textID = $(thisTextarea).attr('id');
 
 
    // Clean up the textarea value before initiating the editor
    function decodeEntities(encodedString) {
      var textArea = document.createElement('textarea');
      textArea.innerHTML = encodedString;
      return textArea.value;
    }
    var decodedval = decodeEntities($(thisTextarea).val());
    $(thisTextarea).val(decodeEntities($(thisTextarea).val()));
 
    // Initiate the editor
    tinymce.init({ 
      selector:'#'+textID,
      plugins: 'code'    
    });
  });
</script>

Here is a sample survey for 3.x. The first group contains two questions with editors. the second group contains a text-display question that uses the html_entity_decode() function to display the HTML from the editor in Q1.

 

File Attachment:

File Name: limesurvey...3293.lss
File Size:21 KB

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

Please Log in to join the conversation.

  • BITCNI
  • BITCNI's Avatar Topic Author
  • Offline
  • Premium Member
  • Premium Member
More
1 year 8 months ago - 1 year 8 months ago #241455 by BITCNI
Thanks, Tony. You're very patient, and I do really appreciate your help greatly.

I infer from looking at your file that this code you've written needs to go into every question that is a 'List with Comment'?

I did test it with one question, and it worked perfectly for rendering when someone returns to the Survey and continues filling it in.  However, if they hit the back/previous button, the formatting returns to code being displayed instead of the rich text format.  Is that a browser issue, or is there no way around that?

Many thanks
Brian
Last edit: 1 year 8 months ago by BITCNI.

Please Log in to join the conversation.

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
1 year 8 months ago #241457 by tpartner
Replied by tpartner on topic LimeSurvey Not Working properly with Tiny MCE
Yes, and it will also work in long-text questions.

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

Please Log in to join the conversation.

  • BITCNI
  • BITCNI's Avatar Topic Author
  • Offline
  • Premium Member
  • Premium Member
More
1 year 8 months ago #241461 by BITCNI
Thanks, Tony, but it worked once, and as soon as I hit the 'Previous' button to see what happened, it reverted to HTML. This is what I put into the Source for the question:
Code:
<script src="https://cdn.tiny.cloud/1/<our API key>/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script><script>
    tinymce.init({
        selector:'#question{QID} textarea.form-control',
        plugins: 'code'
    });
</script><script>
$(function() {
$("label[for=answer{SGQ}comment].control-label").text("Please provide detail of how you meet the option you have selected, as well as how you meet the preceding criteria.");
});
</script><script type="text/javascript" data-author="Tony Partner">
$(document).on('ready pjax:scriptcomplete',function(){
// Identify this question
var thisQuestion = $('#question{QID}');
var thisTextarea = $('textarea:eq(0)', thisQuestion);
var textID = $(thisTextarea).attr('id');
// Clean up the textarea value before initiating the editor
function decodeEntities(encodedString) {
var textArea = document.createElement('textarea');
textArea.innerHTML = encodedString;
return textArea.value;
}
var decodedval = decodeEntities($(thisTextarea).val());
$(thisTextarea).val(decodeEntities($(thisTextarea).val()));
// Initiate the editor
tinymce.init({
selector:'#'+textID,
plugins: 'code'        
});
});
</script>

Please Log in to join the conversation.

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
1 year 8 months ago #241462 by tpartner
Replied by tpartner on topic LimeSurvey Not Working properly with Tiny MCE
Did you try my sample survey?

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

Please Log in to join the conversation.

  • BITCNI
  • BITCNI's Avatar Topic Author
  • Offline
  • Premium Member
  • Premium Member
More
1 year 8 months ago #241465 by BITCNI
Thanks, Tony.

Yes: I copied it exactly from your Survey file, after importing it.  Yours works perfectly, but when I copy/paste the code into mine, only the first question renders with formatting; all the other questions display HTML.

This is what I used in the first question:
Code:
<script src="https://cdn.tiny.cloud/1/<my API Key>/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script> <script type="text/javascript" data-author="Tony Partner">                                $(document).on('ready pjax:scriptcomplete',function(){                                                                // Identify this question                                var thisQuestion = $('#question{QID}');                                var thisTextarea = $('textarea:eq(0)', thisQuestion);                                var textID = $(thisTextarea).attr('id');                                                                                                // Clean up the textarea value before initiating the editor                                function decodeEntities(encodedString) {                                                var textArea = document.createElement('textarea');                                                textArea.innerHTML = encodedString;                                                return textArea.value;                                }                                var decodedval = decodeEntities($(thisTextarea).val());                                $(thisTextarea).val(decodeEntities($(thisTextarea).val()));                                                                // Initiate the editor                                tinymce.init({                                                 selector:'#'+textID,                                                plugins: 'code'                                                    });                });</script>

And this is what I pasted into all the other questions in the group.
Code:
[b]<script type="text/javascript" data-author="Tony Partner">[/b][b]                [/b][b]                $(document).on('ready pjax:scriptcomplete',function(){[/b][b]                                [/b][b]                                // Identify this question[/b][b]                                var thisQuestion = $('#question{QID}');[/b][b]                                var thisTextarea = $('textarea:eq(0)', thisQuestion);[/b][b]                                var textID = $(thisTextarea).attr('id');[/b][b]                                [/b][b]                                [/b][b]                                // Clean up the textarea value before initiating the editor[/b][b]                                function decodeEntities(encodedString) {[/b][b]                                                var textArea = document.createElement('textarea');[/b][b]                                                textArea.innerHTML = encodedString;[/b][b]                                                return textArea.value;[/b][b]                                }[/b][b]                                var decodedval = decodeEntities($(thisTextarea).val());[/b][b]                                $(thisTextarea).val(decodeEntities($(thisTextarea).val()));[/b][b]                                [/b][b]                                // Initiate the editor[/b][b]                                tinymce.init({ [/b][b]                                                selector:'#'+textID,[/b][b]                                                plugins: 'code'                  [/b][b]                                });[/b][b]                });[/b][b]</script>[/b]

I notice in your Code that it is below the question's text.  Does it matter if it's above or below?
 

Please Log in to join the conversation.

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
1 year 8 months ago #241466 by tpartner
Replied by tpartner on topic LimeSurvey Not Working properly with Tiny MCE
Attach a sample survey (.lss file).

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

Please Log in to join the conversation.

Moderators: holchtpartner

Lime-years ahead

Online-surveys for every purse and purpose