Add a rich text editor and connect it to a collection

Show and tell
, ,
41

That is amazing Jeff, thank you so so much. Just double checking, in the submit button code you have #dataset2 but I have #dynamicDataset, is that right or should I have another dataset on my page?

42

Hey Jef, check my above post!

43

Hi Dev - working on it

44

Hey Splatty,

Couple of things:

  1. You’re right. Now that you only have one dataset on the page, you should just work with that one. Your code is fine with your fix.
  2. Your onClick event isn’t doing anything because it’s named submit_click . But if you check the properties panel for the button the function name is submit_onClick . It needs to look like this:
export function submit_onClick(event, $w) {
  1. Turns out the code in there did change. Where it used to say:
$w("#html1").postMessage(" ");

it should say:

$w("#html1").postMessage("save");

I’m going to have to sign off on this at this point. I hope I’ve been helpful but if you need more you may need to turn to other people on the forum or check out the Wix arena.

-Jeff

PS. Dev- I didn’t forget about you.

45

Thanks!

46

Hey Dev - We may have come across a bug. I’ll update you when I know more.

47

Thank You. Please let me know when its solved!

48

Hi all !

Thanks a lot to Jeff, I inserted your code and it worked ! All my data AND the text in the HTML component were sent to my database after many tries.

I have one request though, I want the website to load the page the user created right after he submitted his data (just like a forum works) it used to work when I was using the wix data function “submit” then “redirect to …” but since the button should not be connected to the wix data function, I need a bit of code to do that.

Can anyone provide me with a suitable code ?

Thanks !

Here is the code I used

NOTE : I don’t know how the data inserted in the other fields are submitted, but somehow it works.

I have 11 fields (input1, selection2, uploadButton1 …) in the last bit of code I used only two of them, but all of them work, so I guess I can delete that bit. (in italic)

import wixData from "wix-data";
$w.onReady(function () {
	$w("#dataset1").onReady(() => {
		const msg = $w("#dataset1").getCurrentItem();
		$w("#html1").onMessage((event) => {
			if (event.data === "ready") {
				$w("#html1").postMessage(msg.longDescription);
			}
		});
	});
});

export function button15_click(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("#dataset1").setFieldValue("descriptionmod", event.data);
		//Submit the current item of the dataset
		$w("#dataset1").save()
			.then((res) => {
		 $w("#input1").value = null; 
		 $w("#selection2").selectedIndex = undefined;
49

Hi all. Is it possible to enable fonts and colors on the CKEditor? This would seem like pretty basic functionality which is missing.

50

There are 5 types of CKeditor, you can check them out here :
https://cdn.ckeditor.com/

Comparison table :

51

Perfect! Thx Tristan. Much appreciated.

52

If anyone finds out how to remove / add functionalities, let me know !
I added the basic editor to me website, but a couple of features are missing such as underlining.

53

Does anyone know how to set a placeholder text in the text editor ?
i tried and it doesn’t work (see the line in bold)

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">   
    <script src="//cdn.ckeditor.com/4.6.2/basic/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 placeholder ="test" name="editor1" id="CK1"></textarea> 
    <script>
        CKEDITOR.replace("editor1"); 
        window.parent.postMessage("ready", "*");
    </script>
  </body>
</html>
54

hey Tristan, If you replace the word standard or basic to ‘full’, it adds a lot more features like underlining etc

55

Hi Jeff, I understand if you can’t help me anymore but the add property using rich text editor is not seeming to work for me anymore…Console says saving, but nothing ever happens

.book-the-best

56

Hey Jeff,
Is the problem solved?

57

Splatty > I know, but it also adds unwanted features. All I need is a basic editor with format editing, inserting links etc.

58

I also have another feature to request which I really need :

After submiting the data, how can the user be redirected to the page showing the content he posted ? (just like forum works)
It used to be possible when I used the Wix Data API, but since the button should not be connected to it, it doesn’t do that anymore, the user stays on the page.

EDIT : I simply connected all the elements to the database and it works now.

59

how does all this get applied to the Description box of a product

60

n.stark67,
Can you explain your question a little more?