Embed Videos in Rich Text Editor

App Building
1

According to Formats - Quill Rich Text Editor which is what the Rich Text Editor uses, video is a supported format, and works exactly the same as URL embedding. Would it be possible to add video embedding on the Rich Text Editor? That would be really useful; right now I'm making a button separate from the Rich Text Editor that inserts video links into the editor, which is not ideal.

You can look at this example (https://codepen.io/alexkrolick/pen/evGLwW?editors=0110) for a Quill editor with video embedding. It should be quite simple to enable. Is it possible to enable it right now with the current Rich Text Editor?

2

Hey @Vitaliy_Vekslyer!

@minijohn has a nice post here about creating a rich text editor using a custom component which it looks like can be extended to include video embeds as mentioned in the gist you linked as long as "Storage and cookies" is enabled on the component.

Could that work for your use case?

1 Like
3

I implemented something similar and yes it works pretty well. Thank you. :slight_smile: :pray:

1 Like
4

@Vitaliy_Vekslyer good to hear :rocket: Mind sharing your implementation?

5

Here is my iFrame code for my custom component, using plain JS and Quill:

<style>

  .ql-toolbar {
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
  }
  
  #editor {
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
  }
  
iframe {
  width: 480px;
  height: 240px;
}
  
*::-webkit-scrollbar {
  width: 4px;
}

*::-webkit-scrollbar-track {
   background: #F2F2F2;
  position: relative;
  right: 2px;
}

*::-webkit-scrollbar-thumb {
  background: #C4C7CC;
  border-radius: 2px;
}
</style>

<html>
  <!-- Include stylesheet -->
  <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">

  <!-- Create the editor container -->
  <body>
    <div 
      id="editor" 
      style="height: 90%;"
    >
      <p></p>
    </div>
  </body>

  <!-- Include the Quill library -->
  <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>

  <!-- Initialize Quill editor -->
  <script>
    var quill = new Quill('#editor', {
      theme: 'snow',
      modules: {
        toolbar: [
      [{ 'header': [1, 2, 3, true] }, { 'font': [] }],
      ['bold', 'italic', 'underline', 'blockquote'],
      [{'list': 'ordered'}, {'list': 'bullet'}, 
       {'indent': '-1'}, {'indent': '+1'}],
      ['link', 'image', 'video'],
      ['clean']
    ]
      },
    });

    Retool.subscribe((model) => {
      const delta = quill.clipboard.convert(model.content);
      quill.setContents(delta, 'silent');
    });

    const editor = document.getElementById('editor').firstChild;
    const toolbar = document.getElementsByClassName('ql-snow')[0];
    let selection = quill.getSelection();

    editor.addEventListener('blur', () => {
        selection = quill.getSelection();
        Retool.modelUpdate({ content: quill.root.innerHTML });
    });

    // When embedding a video, it embeds it at the top for some reason,
    // to prevent that, this selects the last place the user had their cursor in
    editor.addEventListener('focus', () => {
        quill.setSelection(selection.index);
    });

  </script>
</html>

This is the Model:

{
"content": "<p></p>"
}
1 Like
6

Nice :mechanical_arm: thanks for that