Add a rich text editor and connect it to a collection

Hey Splatty,

It should also be property/title, but you need to add a static section to the URL to make it unique. Check out this article which explains what you need to know.

-Jeff

Awesome thank you I will give it a go.

Works perfectly thanks jeff!! Last thing - With the delete button connected to the dataset, does it have a confirmation or anything before you delete the item?

There’s no out-of-the-box functionality like that but I wrote a post about how to do something similar to confirm if you want to save.

Check this out. You just need to use remove instead of save.

Thanks again Jeff. It would be good if when you pressed delete the page would reload with the repeaters without that item listed. Is that what happens automatically?

Check out the link to the remove API I sent you. Sounds like it should but I’ve never tried it. Give it a try.

Ok so FYI it deletes and updated the page automatically which is awesome. I have now put the pop up confirmation for delete as well which works a treat so thanks for that too.

One thing, on my edit page how do I connect the CK editor to the data collection so it displays the text for that property? All the other fields work as they are connected to the dataset but not this one. TIA!

Add this code to the onReady function at the top of your page code:

$w("#dataset1").onReady(() => {
	const msg = $w("#dataset1").getCurrentItem();
	$w("#html1").postMessage(msg.richtext);
});

You need to replace dataset1, html1, and richtext with the corresponding elements or fields in your site.

The code in the html element has this line:

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

Above it, add this:

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

You are a legend thank you so much!

Sorry, not working…Is this right?

$w.onReady(function () {
$w(“#dataset2”).onReady(() => {
const msg = $w(“#dataset2”).getCurrentItem();
$w(“#html1”).postMessage(msg.longDescription);
});
});

Looks right, did you change the html element’s code?

yup. Page at https://tailoredwebdesign.wixsite.com/book-the-best/properties then click edit property

It doesnt list any text. I have synced my database and checked they have text and the names of the elements?

Not sure why you have 2 datasets on the page. Seems like you should just be working with the dynamic dataset as that controls which data the dynamic page displays at any given time.

Change dataset2 to dynamicDataset in the onReady and it works.

Thought you said “last thing” yesterday :wink:

Awesome thank you again!

Sorry Jeff but still not working :frowning: - Have connected to dynamic dataset but blank still…Sorry!!

Hmmm I might have pushed my luck! If you do have a chance Jeff, I promise that is it from me on here!!!

Still looking into it. Need another day or 2.

Hey Jeff ,
I have check everything above, but I cannot get richtext into my database.
Here’s link: Imperial News

Please help me!

Ok, here we go:
The following is the code for your HTML element:

<!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() {       
         window.onmessage = (event) => {  
         if (event.data == "save") {
            window.parent.postMessage(CKEDITOR.instances.CK1.getData(),"*"); 
         } else {
            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>

And this is your onReady code:

$w.onReady(function () {
	$w("#dynamicDataset").onReady(() => {
		const msg = $w("#dynamicDataset").getCurrentItem();
		$w("#html1").onMessage((event) => {
			if (event.data === "ready") {
				$w("#html1").postMessage(msg.longDescription);
			}
		});
	});
});

I don’t think this changed, but just in case, this is the code for your submit button, which should not be connected in the UI.

export function submit_onClick(event, $w) {
	//Send a blank message to the HTML element. This tells the HTML 
	//element you want it to send you its contents  
	$w("#html1").postMessage("save");
	//Receive the message from the HTML element
	$w("#html1").onMessage((event) => {
		//Set the value for the rich text field of the dataset's 
		//current item to be the data in the HTML element
		$w("#dataset2").setFieldValue("longDescription", event.data);
		//Submit the current item of the dataset
		$w("#dataset2").save()
			.then((res) => {
				$w("#PropertyInfo").value = null;
				$w("#Location").selectedIndex = undefined;
				$w("#Type").selectedIndex = undefined;
				$w("#Guests").selectedIndex = undefined;
				$w("#Bedrooms").selectedIndex = undefined;
				$w("#Bathrooms").selectedIndex = undefined;
			});
	});
}

Note that in the weird event that your user ever uses “save”, “set”, or “ready” as the new text in the richtext editor this code won’t work. But I’m assuming these are safe.

-Jeff

Hey Jeff ,
I have check everything above, but I cannot get richtext into my database.
Here’s link: https://www.imperialnews.com/rumour-mill-editor-private-author
Please help me!