Go Headless

Build Apps

Client

API Preview

Ricos

Develop Websites

REST

Velo

GraphQL (Alpha)

# 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](resourceId::66466255-9cdd-4498-bfdf-c62b1cf012ce*fallback::https://github.com/wix-private/developer-docs/blob/57a91d4a9b2061b23737a20ed08ed228f1e0e78b/velo-articles/Wix%20Editor%20Elements%20with%20Velo/Working%20with%20the%20HTML%20iframe%20Element.md).

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:

<div style="text-align:center">

![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/dfff8cbb-ddcb-4376-8cae-3fedb2dd4458/2017/08/29/4fbb8d5d-33e3-40a8-9bb4-c83eba9855b7.png)

</div>

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](fallback::https://ckeditor.com/) 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.

```javascript
$w.onReady(function () {
  $w("#myHtmlComponent").onMessage( (event) => {
    $w('#myText').html = event.data;
  } ); 
} );
```

<blockquote class="important">

**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](fallback::https://www.sbdautomotive.com/ja/wg-cgi/dev.wix.com/docs/develop-websites/articles/wix-editor-elements/formatting-layout/about-formatting-text-elements).

</blockquote>

#### 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.

```html
<html>
  <head>
    <meta charset="utf-8">
    <script src="//cdn.ckeditor.com/4.6.2/standard/ckeditor.js"></script>
    <style>
      .button {
        background-color: #155DE9;
        color: white;
        border: none;
        padding: 10px 20px;
        text-align: center;
        font-family: 'Arial';
      }
    </style>
    <script type="text/javascript">
      window.onload = () => {
        CKEDITOR.replace("editor1");
      };

      function sendText() {
        window.parent.postMessage(CKEDITOR.instances.CK1.getData(), "*");
      }
    </script>
  </head>
  <body>
    <textarea name="editor1" id="CK1"></textarea>
    <br>
    <button class="button" onclick="sendText()">Submit text</button>
  </body>
</html>
```

### API List

The following API is used in the code in this article. To learn more, see the [API Reference](fallback::https://www.wix.com/velo/reference/).

*   [HtmlComponent](fallback::https://www.wix.com/velo/reference/$w.HtmlComponent.html)

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

ページコード

HTML Component Code

APIリスト