Velo Tutorial: Creating a Rich Text Editor Using the HTML Component
In this article, we demonstrate how to use an HTML Component to add a rich text editor to your page.
The right side of the page is created with an HTML Component. The component contains HTML that creates a CKEditor and a button.
Page Code
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.
1$w.onReady(function () {
2 $w("#myHtmlComponent").onMessage( (event) => {
3 $w('#myText').html = event.data;
4 } );
5} );HTML Component Code
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.
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>