Rich Text Editor

Discussion Ask a question
,
1

Hey there,

How can I make it so that users can input rich text when submitting a form? As far as I can see… it only appears to be able to be done in the database collection itself .

Regards,
Jason

1 Like
2

Hi Jason,

Right now, we do not have a rich text input in the site. We are considering what will be the best way to introduce one. Can you share why you need one? This will help us understand the needs.

3

There’s a roundabout way to get around this limitation for those will to venture deep into the weeds. It’s a good example of how you can put plain old HTML and JavaScript in an iframe, and communicate with it from your page code.

Check it out in action here http://www.wix.com/uvalbwix/richtext

It involves:

  • Using the HTML component to put a CK Editor in an iframe

  • Writing a tiny bit of old-school JavaScript within that iframe to communicate with your page code by sending a postMessage

  • Writing three lines of code in your page to capture it.

Hard-core example, but I like that it shows how you can get around some limitations by working a bit harder, rather than just slamming into a brick wall :-).

The html component code:

<html>
    <head>
        <meta charset="utf-8">
        <title>CKEditor</title>
        <script src="//cdn.ckeditor.com/4.6.2/standard/ckeditor.js"></script>
    </head>
    <body>
        <textarea name="editor1" id='CK1'></textarea>
        <script>
            CKEDITOR.replace( 'editor1' );

            function sendRichTextToEditor(e){
              var ck =  CKEDITOR.instances.CK1;
              window.parent.postMessage({
                "value":ck.getData()
              } , "*");
            }
        </script>
      <br>
      <button onclick="sendRichTextToEditor()">Submit the text back to your page code</button>

    </body>
</html>

The page code:

$w.onReady(function () {
	$w("#html1").onMessage((event)=>{
		$w('#text3').html = event.data.value;
	});	
});
3 Likes
4

Hello,

Uval: Thank you so much for providing the code, I will definitely give it a shot!

Yoav: I’d like to have it for the sake of the dynamic pages so that content can be displayed how the customer/client wants it. For example on Ebay when adding a product description it gives you a rich text editor to allow all kind of formatting tags. It’s the same as why you would want it in this forum. The forum as well includes rich text editing. :slight_smile:

1 Like
5

if you can help me… I just found this track now and would like to implement in my db input. It does not throw an error, but how do I hook the output to my db field?

6

ooooo I think I got it. eeeeeee

7

How??? I Have the same problem.

8

This works fine with basic features. We cannot include different Fonts, font-size, font colour, background colour etc. They are available as plugins. Please help how to bring those featurs into HTML component.
I have used CKEditor5 instead of CKEditor4 as given in the above code.