HTML CKEditor in LightBox - OnMessage and PostMessage not Working

Ask the community
,
1

OnMessage and PostMessage are not working. There’s some kind of problem with the message binding. Has anybody run into this problem before?

This embedded html code works fine in the HTMLEDITOR on a normal page

<!doctype html>

<html>

  <head>

    <meta charset="utf-8">

    <script src="//cdn.ckeditor.com/4.6.2/standard/ckeditor.js"></script>

    <script type="text/javascript">

     function init() {

        // this is the event handler used from sendmessage or                         postmessage events//        

         window.onmessage = (event) =>

         {

            // Use shortcut - it has the same result as above.

            if (event.data)

            {

                // this is a request for a retuner update, basically getting all the data from the editor

                if (event.data === "content_get")

                {

                    window.parent.postMessage(CKEDITOR.instances.CK1.getData(),"*");

                } else if (event.data === "clear_content") {

                    CKEDITOR.instances.CK1.setData(" ");

                    window.parent.postMessage("cleared","*");

                  //lookin for the start of html, a bit of a hack, but can't figure out what event looks like

                } else if (event.data[0] === '<') {

                    CKEDITOR.instances.CK1.setData(event.data);

                    window.parent.postMessage("set","*");

                }

            }

       }

     }

     </script>

  </head>

  <body onload="init();">

    <textarea name="editor1" id="CK1"></textarea>

    <script>

        CKEDITOR.replace("editor1");

        window.parent.postMessage("ready", "*");

    </script>

  </body>

</html>

This is the onMessage event handler in the Lightbox OnReady()


//Receive the message from the HTML element async
$w("#myHtmlComponent").onMessage((event) => {
console.log(event.data);
 switch (event.data) {
 case "set":
 case "ready":
 break;
 default:
        UpdateRecord();
        }
    });

Any thoughts? Thanks in advance,

Tom

2

Have you read about using the html element already and how to use onMessage and postMessage through Wix Code?
https://support.wix.com/en/article/corvid-working-with-the-html-element
https://support.wix.com/en/article/guidelines-and-limitations-of-the-html-code-and-embed-a-site-elements
https://www.wix.com/corvid/reference/$w.HtmlComponent.html
https://www.wix.com/corvid/reference/$w.HtmlComponent.html#onMessage
https://www.wix.com/corvid/reference/$w.HtmlComponent.html#postMessage

3

Thanks for your reply!

I began to suspect a timing issue, and found this was indeed the problem. When I put a SetTimer on the PostMessage to the html editor, then it worked:

$w.onReady( function () {

let receivedData = wixWindow.lightbox.getContext(); // will be equal to itemData
console.log(receivedData);
$w(“#Title”).text = receivedData.title;
$w(“#Description”).text = receivedData.excerpt;

received_content = receivedData.content;

setTimeout(function() {
$w(“#htmlContent”).postMessage(received_content);
}, 1000);

} );

Is there a better solution to the timing issue/delay?

Thanks in advance,

Tom