Rich text CKEDITOR

Ask the community
,
1

I’ve tried all the codes I could find, but I need help.
Hope there is one that can solve the problem for me.
Thanks in advance.
Including my codes.

1027×362 20.5 KB

import wixData from ‘wix-data’;
$w.onReady( function () {
$w(“#dataset6”).onReady(() => {
const msg = $w(“#dataset6”).getCurrentItem();
$w(“#html1”).onMessage((event) => {
if (event.data === “ready”) {
$w(“#html1”).postMessage(msg.longDescription);
}
});
});
});
export function button12_click(event, $w) {
//Send en tom besked til HTML-element. Dette fortæller HTML
// elementet, som du vil have, at det skal sende dig indholet
$w(“#html1”).postMessage(" “);
// Modtag meddelelsen fra HTML-elementet
$w(”#html1").onMessage((event) => {
// Indstil værdien for det rige tekstfelt i datasættets
// aktuelle element for at være dataene i HTML-elementet
$w(“#dataset6”).setFieldValue(“stxt”, event.data);
// Indsend det aktuelle element i datasættet
$w(“#dataset6”).save();
});
}

Code in HTML-element.
<!doctype html>

2

Are these links any good to you?
https://support.wix.com/en/article/corvid-tutorial-creating-a-rich-text-editor-using-the-html-component
https://www.wix.com/corvid/forum/community-discussion/create-a-rich-text-editor-using-the-html-component
https://www.wix.com/corvid/forum/corvid-tips-and-updates/add-a-rich-text-editor-and-connect-it-to-a-collection

3

Hi Thanks for your codes, but as you can see, the codes from what you sent are what I need to see the text inside EDITOR.

4

Hi, not sure if this helps but…

Here’s how I get data from collection into the editor, from a repeater, within $w.OnReady().
(Please note that I do not use $w(“#myHtmlComponent”).onMessage((event) in loading the editor.)

let $item = $w.at(event.context);
let clickedItemData = $item(“#dataset1”).getCurrentItem();
$w(“#myHtmlComponent”).postMessage(clickedItemData.content); //content is my html field in collection

Also, you have two html event handlers; I’m not sure this works $w(“#myHtmlComponent”).onMessage((event). I have one.

5

Thanks for your information, I tried them, but no text comes into EDITOR. I hope there is someone who has good advice.
Thanks in advance.

6

Also, have a read of Wix API reference for it too, especially the onMessage and postMessage functions. - https://www.wix.com/corvid/reference/$w.HtmlComponent.html

7

Here is some more of my code: hope it helps you.

This is a combination of databinding with the dataset, and data API for managing the interface with the html editor and the collection.

Some of my elements
#repcontainer is container for repeater, $w(“#repContainer”).onClick( (event) is how you get scope on the current item. and I grab the record id and put in a global variable to be used in data API functions

Note the $w(“#myHtmlComponent”).onMessage((event) triggers based upon messages sent back from the html component.

import wixData from "wix-data";

let current_id;
let retuner_html;

$w.onReady(function () {

    $w("#repContainer").onClick( (event) => {
        let $item = $w.at(event.context);

         let clickedItemData = $item("#dataset1").getCurrentItem();
        current_id = clickedItemData._id;

        $w('#Title').value = clickedItemData.title;
        $w('#description').value = clickedItemData.excerpt;
        // here is where data gets put in the editor
        $w("#myHtmlComponent").postMessage(clickedItemData.content);

    });

 //Receive the message from the HTML element and dependent upon the way 
 // I return event.data fromthe html element... have a look below
 
    $w("#myHtmlComponent").onMessage((event) => {
         switch (event.data) {
             case "set":
             case "ready":
             case "cleared":
             break;
             default:
                retuner_html = event.data;
                UpdateRecord();
        }
    });
});

Then here is the html… I am still working on optimizing, but it’s working fine:

<!doctype html>