Text entry formatting

Is there any change on this? The idea post link doesn’t seem to work.

Hi ​@StephanieQuan, going off of TomG's recommendation here, I found the QuillJS library which can accomplish this. The below code will take a Text Entry question, hide it, insert a div with Quill enabled, and then save the encoded text to the Qualtrics Text Entry question when the text in the div is updated. Like Tom mentions, the encoding makes it difficult to read, but you can also create an Embedded Data field that saves the non-encoded text as well.

To give it a try, first add the below to the survey's Header over in the Look & Feel:

<link href="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.snow.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.js"></script>

Then, in the Survey Flow, create an Embedded Data field called "NoEncoding"

Finally, create a Text Entry question over in the Builder and add the below to the question's JavaScript:

Qualtrics.SurveyEngine.addOnReady(function()
{
	/*Place your JavaScript here to run when the page is fully displayed*/

var qid = this.questionId;
var qualtricsTextField = document.getElementById('QR~'+qid);

    // Create a container for the Quill editor
    var quillContainer = document.createElement('div');
    qualtricsTextField.style.display = 'none'; // Hide the original text field
    qualtricsTextField.parentNode.insertBefore(quillContainer, qualtricsTextField);

    // Initialize Quill
    var quill = new Quill(quillContainer, {
        theme: 'snow',
        modules: {
            toolbar: [
                ['bold', 'italic', 'underline'],
                [{ 'list': 'ordered' }, { 'list': 'bullet' }],
                ['link']
            ]
        }
    });

	  // Function to decode HTML entities
    function decodeHTML(html) {
        var textarea = document.createElement('textarea');
        textarea.innerHTML = html;
        return textarea.value;
    }

    // Restore the previous value if the user navigates back
    if (qualtricsTextField.value) {
        var decodedContent = decodeHTML(qualtricsTextField.value); // Decode HTML entities
        quill.root.innerHTML = decodedContent; // Restore Quill's content
    }

    // Sync Quill's content with the hidden Qualtrics field
    quill.on('text-change', function () {
        qualtricsTextField.value = quill.root.innerHTML; // Save the full HTML content to the Qualtrics field
		var noEncoding = quill.getText();
		Qualtrics.SurveyEngine.setEmbeddedData("noEncoding", noEncoding);
    });
});

Also, the Product Idea in Evolve is EV-2162

​@Tom_1842 - thank you for sharing your brilliance!!! Once the text has been input as rich content, is there a way to keep the formatting in place? For instance, I would like to have an email trigger to send me a response report any time the survey is completed, and display the rich text response as it was formatted in the Quill text box, rather than showing the encoded or NoEncoding versions. 

​@ahendrickson It looks like Qualtrics escapes the HTML when piping from a survey question, but not when piping from an Embedded Data field. Try creating two Embedded Data Fields, "noEncoding" and "yesEncoding". The Embedded Data field "yesEncoding" retains the formatting and will render in browsers and emails. Updated JavaScript:

Qualtrics.SurveyEngine.addOnReady(function()
{
	/*Place your JavaScript here to run when the page is fully displayed*/

var qid = this.questionId;
var qualtricsTextField = document.getElementById('QR~' + qid);

// Create a container for the Quill editor
var quillContainer = document.createElement('div');
qualtricsTextField.style.display = 'none'; // Hide the original text field
qualtricsTextField.parentNode.insertBefore(quillContainer, qualtricsTextField);

// Initialize Quill
var quill = new Quill(quillContainer, {
    theme: 'snow',
    modules: {
        toolbar: [
            ['bold', 'italic', 'underline'],
            [{ 'list': 'ordered' }, { 'list': 'bullet' }],
            ['link']
        ]
    }
});

// Function to decode HTML entities
function decodeHTML(html) {
    var textarea = document.createElement('textarea');
    textarea.innerHTML = html;
    return textarea.value;
}

// Restore the previous value if the user navigates back
if (qualtricsTextField.value) {
    var decodedContent = decodeHTML(qualtricsTextField.value); // Decode HTML entities
    quill.root.innerHTML = decodedContent; // Restore Quill's content
}

// Sync Quill's content with the hidden Qualtrics field
quill.on('text-change', function () {
    // Save the full HTML content to the Qualtrics field
    qualtricsTextField.value = quill.root.innerHTML;

    var noEncoding = quill.getText();
    Qualtrics.SurveyEngine.setEmbeddedData("noEncoding", noEncoding);

    var yesEncoding = quill.root.innerHTML;

    var yesEncoding = quill.root.innerHTML.replace(/<ol>([\s\S]*?)<\/ol>/g, function (match, innerContent) {
        if (innerContent.includes('data-list="bullet"')) {
            return '<ul>' + innerContent + '</ul>';
        }
        return match; // leave as-is if not a bullet list
    });

    Qualtrics.SurveyEngine.setEmbeddedData("yesEncoding", yesEncoding);
});

});

Also, adding this CSS to the Style section of the Look and Feel I thought helped with the hyperlink popup by attaching it to the bottom of the text area.

.ql-snow .ql-tooltip {
    position: static !important;
}

​@Tom_1842 WOW, this did exactly what I need. Thank you SO much – this will be so helpful for my project and I am so grateful for your quick and effective response.