Rich Content Editor

Ask the community
, ,
1

Question:
Does anybody have any experience and can help with using the npm wix rich content editor and its use with Velo code?

Product:
Wix Studio - Velo Code

What are you trying to achieve:
I want to add a page where I can put the rich content editor that could edit the rich content from one of my collections.
I tried to add this npm package - however, there’s no documentation attached.

this one has documentation attached however nothing I tried worked.

What have you already tried:

I tried to use both npm packages and experimented with the code. I tried HTML code and tried to create a rich content editor in Velo following the instructions from Monorepo packaged. None of those worked.

Additional information:
[Include any other pertinent details or information that might be helpful for people to know when trying to answer your question.]

2

Looks like the your chosen NPM-Package is not ready yet.

Already tried alternatives?

Put this code into an HTML-Component on your website…

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TinyMCE Example</title>
    <!-- Load TinyMCE -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/6.3.1/tinymce.min.js"></script>
</head>
<body>
    <textarea id="editor"></textarea>
    <script>
        tinymce.init({
            selector: '#editor'
        });
    </script>
</body>
</html>

Last step would be to establish communication between your Wix-Page and the HTML-Comp.

3

And here another alternative version…

<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>
4

I did try CK Editor and it works - however, that’s not a real rich content editor. Wix has this working as you can see it in their apps like Forum or Blog. I think CK doesn’t work with Wix collections.

5
6

It’s not “Rich Text” editor it’s “Rich Content” I’m asking about. There’s a difference. I know how to get Rich Text working.

I belive that’s what Wix Uses for their apps:

However I’m struggling with getting this to work with Velo.

7

Where is the difference between Rich-Text and Rich-Content?

What is the advantage of rich content?

Are you able to mention the advantage-features?

Or better to ask → Which features are you expecting?
You can make a list?

8

https://www.qualtrics.com/support/de/survey-platform/survey-module/editing-questions/rich-content-editor/rich-content-editor-overview/?rid=langMatch&prevsite=en&newsite=de&geo=&geomatch=

9

Yes, seems to be interesting, too.

What is the exact issue? Why you can’t get Ricos to work ?
More details?

10

Can you get Ricos to work? If you can send me please an example. Just a note we are talking here about Wix Velo coding. Your help would be highly appreciated.

Here’s more info on Rich content just so you know.

11

Looks like the Editor element - or connection to the input element will be available sometime soon and the Wix team is working on it.

Does anybody form Wix Team have any updates on the release date?

12

Are you implementing it using custom elements?

13

Yes. It would be good to develop a custom element that can be used as a rich content editor or input.