Velo Tutorial: Creating a Rich Text Editor Using the HTML Component

Before reading this article, you might want to learn about Working with the HTML Component in Velo.

In this article, we demonstrate how to use an HTML Component to add a rich text editor to your page. 

We start by creating the following page:

The left side of the page is a Wix Text element.

The right side of the page is created with an HTML Component. The component contains HTML that creates a CKEditor and a button. 

Using this setup, a user can enter rich text in the rich text editor, click the Submit text button, and the rich text will be displayed in the Wix text element.

Page Code

The following code is added to the code editor.

In the page's onReady() event handler, we set an event handler that runs when the page receives a message from the HTML Component. The event handler sets the text of the page's Text element to be the data sent from the HTML Component.

Copy
1
$w.onReady(function () {
2
  $w("#myHtmlComponent").onMessage( (event) => {
3
    $w('#myText').html = event.data;
4
  } ); 
5
} );

Note: We are using the Text element's html property to set its styled text. To learn about how a Text element displays content that is set using the html property, see Formatting Text Elements with Velo.

HTML Component Code

The following code is added to the HTML Component using the Enter Code or  Edit Code button. It contains three main sections.

In the <body> tag, we define the HTML elements that make up our page:

  • A <textarea> that is used by the CKEditor to create a rich text editor.
  • A <button> that is used for sending the contents of the rich text editor to the page code.

In the <style> tag, we define some styles that are used to restyle the button. These styles aren't necessary if you don't want to restyle the button.

In the <script> tag, we define our messaging logic. There are two parts to the messaging logic.

First, when the HTML component loads, we use the CKEditor replace() function to turn our regular HTML <textarea> into a CKEditor rich text editor.

Next, when the button in the HTML Component is clicked, it calls the sendText() function. We define the sendText() function to send the text in the rich text editor to the page code.

Copy
1
<html>
2
  <head>
3
    <meta charset="utf-8">
4
    <script src="//cdn.ckeditor.com/4.6.2/standard/ckeditor.js"></script>
5
    <style>
6
      .button {
7
        background-color: #155DE9;
8
        color: white;
9
        border: none;
10
        padding: 10px 20px;
11
        text-align: center;
12
        font-family: 'Arial';
13
      }
14
    </style>
15
    <script type="text/javascript">
16
      window.onload = () => {
17
        CKEDITOR.replace("editor1");
18
      };
19


20
      function sendText() {
21
        window.parent.postMessage(CKEDITOR.instances.CK1.getData(), "*");
22
      }
23
    </script>
24
  </head>
25
  <body>
26
    <textarea name="editor1" id="CK1"></textarea>
27
    <br>
28
    <button class="button" onclick="sendText()">Submit text</button>
29
  </body>
30
</html>

API List

The following API is used in the code in this article. To learn more, see the API Reference.

Was this helpful?
Yes
No