Adding dynamic preview to Questions and Answers

Hello,

I would like to achieve the follow:

When a user asks a question or answers a question, I want their input to be echoed ( in real time) in a paragraph above where they are typing.

Can you tell me where I should look to accomplish this?

thanks

  • Anang

    Hi @Curtis

    You can try this code below, add the code on your active themes functions.php

    function add_qa_script(){
    ?>
    <script>
     jQuery(function ($) {
     	if (typeof(tinyMCE) != "undefined") {
            tinymce.on('SetupEditor', function (editor) {
                if (editor.id === 'answer') {
                    // Could use new 'input' event instead.
                    editor.on('change keyup paste', function (event) {
                       $("<div id='live-type' style='margin:20px 0px'></div>").insertBefore("#edit-answer");
                       $("#live-type").html(this.getContent());
                    });
                }
                if (editor.id === 'question_content') {
                	editor.on('change keyup paste', function (event) {
                		$("<div id='live-type' style='margin:20px 0px'></div>").insertBefore("#ask-question");
                    	$("#live-type").html(this.getContent());
                	});
                }
    
            });
         }
        });
    </script>
    <?php
    }
    add_action( 'wp_footer', 'add_qa_script', 100 );

    Let me know if that's worked

    Best Regards