> Portal Navigation: > > - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version. > - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages). > - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`). > - Top-level index of all portals: https://dev.wix.com/docs/llms.txt > - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt ## Resource: Creating a Rich Text Editor Using the HTML Component ## Article: Creating a Rich Text Editor Using the HTML Component ## Article Link: https://dev.wix.com/docs/develop-websites/articles/code-tutorials/wix-editor-elements/creating-a-rich-text-editor-using-the-html-component.md ## Article Content: # 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](https://dev.wix.com/docs/develop-websites/articles/wix-editor-elements/other-elements/html-i-frame-element/working-with-the-html-iframe-element.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:

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

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](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; } ); } ); ```

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

#### 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 `` tag, we define the HTML elements that make up our page: * A `

` 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">

``` ### API List The following API is used in the code in this article. To learn more, see the [API Reference](https://www.wix.com/velo/reference/). * [HtmlComponent](https://www.wix.com/velo/reference/$w.HtmlComponent.html)