Hi all. Have some code that won’t behave and would appreciate another set of eyes to help.
I have a collection that I want users to be able to write to. Right now I have 5 fields:
Name
Title
Story
Summary
Image
The “Story” field is actually a rich text editor in an HTML box (CKEditor). The other 4 fields are linked to the collection as they normally would be, but the button is not…as I want to pick-up all 5 fields from pressing one button and load the data into the collection. So the button click is sensed by the code, which should then upload all the data.
The other “wrinkle” here is that the name button is autofilled from the PrivateMembersData Collection.
The code I run on the page is as follows:
import wixUsers from 'wix-users';
import wixData from "wix-data";
$w.onReady(function () {
wixData.query("Members/PrivateMembersData")
.eq("_id", wixUsers.currentUser.id)
.find()
.then( (results) => {
$w('#input2').value = results.items[0].name;
});
} );
export function button1_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(" ");
//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("story", event.data);
//Submit the current item of the dataset
$w("#dataset1").save();
});
}
The html box with CKEditor in it is as follows:
<!doctype html>
<html>
<head>
<!--Define the character set for the HTML element -->
<meta charset="utf-8">
<!--Call the external script to use the CDN CKEditor in your page-->
<script src="//cdn.ckeditor.com/4.16.1/basic/ckeditor.js"></script>
<script type="text/javascript">
//Define an init function that sends the rich text editor contents to the page code
function init() {
//onMessage runs when the HTML element receives a message from the page code
window.onmessage = (event) => {
if (event.data) {
//postMessage sends the contents of the CKEDITOR back to the page code
window.parent.postMessage(CKEDITOR.instances.CK1.getData(),"*");
}
}
}
</script>
</head>
<body onload="init();">
<!--Define the HTML element as a textarea-->
<textarea name="editor1" id="CK1"></textarea>
<script>
//Use the CKEditor replace() function to turn our text area into a CKEditor rich text editor
CKEDITOR.replace("editor1");
</script>
</body>
</html>
It’s kind of running but with two issues:
-
I have to press the button twice to make it work
-
Although the name field does show up in the text input box, it does not make it into teh collection with the other info.
Can anyone help me understand why I am seeing this odd behaviour and recommend modifications??
Thanks,
Simon.
A couple things to note:
-
It is not enough to set the value (in code) of an element that’s connected to a dataset item field. You also need to use the setFieldValues function (or setFieldValue) to set the fields in the current item of the dataset.
-
The onMessage() function of the HtmlComponent adds an event handler that runs when the HTML Component sends a message. This should be done in the page’s onReady() function. Then, every time the HtmlComponent sends a message, it will be handled by the event handler that was added.
I haven’t tested the code, but what you need is something like this:
import wixUsers from 'wix-users';
import wixData from "wix-data";
$w.onReady(function () {
wixData.query("Members/PrivateMembersData")
.eq("_id", wixUsers.currentUser.id)
.find()
.then((results) => {
$w('#input2').value = results.items[0].name;
});
// add an event handler to 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").setFieldValues( {
"story": event.data,
"name": $w('#input2').value
} );
// Submit the current item of the dataset
$w("#dataset1").save();
});
});
export function button1_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(" ");
}
Hi Yisrael,
Thanks for the suggested code. Unfortunately, while it’s not throwing any errors in the console, it isn’t writing to the collection all any more…with my limited coding capabilities, I can’t see why not, as what you have suggested seems relatively straightforward. Odd.
I tried commenting out the line that writes the name to #dataset1 and linking that on page to the dataset but it didn’t make any difference.
It’s not database permissions…as I was able to write the collection yesterday.
I hate to ask…but do you have any other suggestions?
Simon.
So maybe I was wrong. 
You might want to put in some console.log() statements in your code to see what’s happening and when. Maybe the onMessage() event handler is not being triggered, or some other issue is causing the problem. If you put in enough console.log() statements, you’ll understand better what’s happening with your code.
My question would be —> Why you simply do not use the wix given Rich-Text-Field-Editor, instead of using a laborious html-verion?
I can’t see any advantages of the html-version! So why not using the standard one?
This is what I wanted all along but didn’t think it existed. I can edit the rich text in the collection itself but I didn’t see any input block that I could drop on my page. I still can’t see it…where is it?
@simon9978
https://www.wix.com/velo/reference/$w/richtextbox
- Place the RichTextBox-element onto your page.
- Create a Rich-Text-Field in your DB.
- Use it.
@russian-dima Thanks…will try this instead. Much better than trying to reach outside Wix.
@yisrael-wix No worries. I appreciate the time you put into answering my question. I’m going to try using the Wix provided approach instead, per Velo-Ninja below.
Even if you would go the HTML-Version-way, you would still have to solve more issues, for example…
Take a look onto the following example, especialy the received POST-MESSAGES, after typing in new VALUES (sending value by value).
Pay attention onto the received results in the console.
https://russian-dima.wixsite.com/my-site
The more lines you add, the bigger grows up your RESULTS.
This behaviour you would also have to DEBUG.
And surely you would run into other problems, when going they html-version-way.
I note that there is actually a rich text input box in the legacy editor but not in EditorX, which I am using. Seems like a strange step backwards for EditorX to me…frustrating, as I can’t figure out how to drop an input field onto my page just with Velo…I am not that good at this.
@simon9978 Ohhh, i am not familiar with editor-X. There is really no given RichTextBox in Editor-X ?
Ok, Editor-X is still in beta-phase for me. 
If so, than you are probably forced to use the HTML-Version 
@russian-dima I think you’re right. I need to debug CKMEdit version.
@simon9978
Then take a look onto the very bottom of this post and start your debuging from there…
Hi Gents, I have this working now - with one caveat.
Turns out to have primarily been a missing # in the code on #dataset1 and a field name wrong also…easy fixes. It now uploads the data OK.
However, CKEDITOR has huge margins and the rich text blocks that I am displaying from collections do not. This means that paragraphs look well spaced in CKEDITOR but have no additional spacing (compared to a line feed) when displayed on my page. What I have been doing in the collection editor is adding returns between paragraphs and then it looks fine but I can’t very well expect users to do the same, given that the paragraph spacing looks fine in CKEDITOR.
Does anyone know whether there is a way to fix this in Wix? I can see numerous recommendations of using CKEDITOR in these forums but I can’t see an answer to this problem. The usual recommended solution from CKEDITOR is to modify the CSS but without a way to post a CSS file in Wix, this isn’t a great solution for me. Suree would be nice if there was a rich text editor input block in Editor X, as I briefly thought this morning, as this would then be a non-issue for me.
You CAN use CSS in HTML-Components!
And it is always usefull to give more details about your issues.
You were talking about some …
This means that paragraphs look well spaced in CKEDITOR but have no additional spacing (compared to a line feed) when displayed on my page
Perhaps a screenshot would be useful to understand your isse better.
You are talking about some bugfixes in your code, how do look like your UPDATED_CODE?
And what about the other mentioned issues on the top of your post?
This means that paragraphs look well spaced in CKEDITOR but have no additional spacing (compared to a line feed) when displayed on my page
Hi again. Sorry…I nearly put screenshots in yesterday but tried (and failed) to get the job done with words.
This image shows how text looks in the CKEditor. It adds gaps between paragraphs, as I would generally expect it to do…ie it has biggish
margins.
This next image shows how it looks In both the collection rich text editor field once uploaded (in the manage content view) and on the live site itself. Its rendered in paragraph P2 font (font-8) live. The
margins are different though.
So I need to add CSS that will control how CKEditor renders the text it is editing…otherwise, when the user thinks his paragraphs look nicely separated in CKEditor, they will actually look more like one massive paragraph. It looks to me from their site that this is only possible using a .css file.
Any idea how to achieve this?
Alternatively, could you recommend how to perhaps add CSS that would change the way the text is displayed on the live site (ie increase the
margins so that the correct spacing is added…just in that text block? Can that be done in Velo code?
This is my final code, which appears to be working. Hoping I can fix the spacing issue now.
import wixUsers from 'wix-users';
import wixData from "wix-data";
import wixWindow from 'wix-window';
$w.onReady(function () {
wixData.query("Members/PrivateMembersData")
.eq("_id", wixUsers.currentUser.id)
.find()
.then((results) => {
$w('#input2').value = results.items[0].name;
});
// add an event handler to 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").setFieldValues( {
"story": event.data,
"source": $w('#input2').value
} );
// Submit the current item of the dataset
$w("#dataset1").save();
wixWindow.openLightbox("SuccessfulPost");
});
});
export function button1_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(" ");
}
