How do I customise the Rich Text Editor

Queries and Resources
1

Firstly, I am not sure if I am being stupid or not but the rich text editor only allows up to h2 headings.

I need this to be h3 headings as the content that the text area will contain will be rendered in the middle of my website. How do I add a preset to the form to be able to create a h3 heading.

Any feedback will be much appreciated. Thanks

2

Hey @ScottRob!

The Rich Text Editor should support up to 6 levels of headers, and you can pass default values to it by using its key in the default form data:

1664×732 138 KB

Hopefully, that's what you're looking to do! :grin: How are you currently passing values into the component?

3

Thank you for getting back to me :slight_smile:

Is there a way to add headings into the drop down bar. I want to pass values through the rich text editor. You see the dropdown on the screenshot that shows normal - i want to be able to select headings 1-6. At the minute I can only choose heading 1-2.

image
image706×365 11 KB

See above screenshot. I want the dropdown to show all the headings. Any way to do this?

Thanks,
Scott

4

Hey @ScottRob, welcome to the community :hugs:

I was just running into the same issue. Retool uses Quill.js under the hood, haven't had time to optimize the script too much but here's the gist:

Create a custom component with

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.quilljs.com/1.3.7/quill.snow.css" rel="stylesheet">
  <script src="https://cdn.quilljs.com/1.3.7/quill.js"></script>
  <style>
    .save-button {
      text-align: right; 
      margin: 15px 0;
    }

    .save-button a {
      background: blue;
      padding: 10px 20px;
      border-radius: 3px;
      color: #fff;
      text-decoration: none;
      font-family: 'Ideal Sans SSm A', 'Ideal Sans SSm B', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto;
    }
  </style>
</head>
<body>
  <div class="save-button">
    <a href="javascript:void(0);" id="saveButton">Save guide</a>
  </div>
  
  <div id="editor" style="height: 600px"></div>

  <script type="text/javascript">
    let toolbarOptions = [
      [{'header': [1, 2, 3, 4, 5, false]}],
      [ 'bold', 'italic', 'underline', 'strike' ],
      [{ 'color': [] }, { 'background': [] }],
      [{ 'script': 'super' }, { 'script': 'sub' }],
      ['blockquote', 'code-block'],
      [{ 'list': 'ordered' }, { 'list': 'bullet'}, { 'indent': '-1' }, { 'indent': '+1' }],
      [ 'direction', { 'align': [] }],
      [ 'link', 'image' ]
    ]

    window.Retool.subscribe(function(model) {
      const saveButton = document.querySelector("#saveButton");
      saveButton.onclick = saveBodyInModel;

      function saveBodyInModel() {
        window.Retool.modelUpdate({ updated_body: quill.root.innerHTML});
        window.Retool.triggerQuery('query4')
      }

      let quill = new Quill('#editor', {
        history:{
          delay:2000,
          maxStack:150,
        },
        modules: {
          toolbar: toolbarOptions
        },
        handlers: {
          imageHandler: selectLocalImage
        },
        theme: 'snow'
      });

      let body = model.body || '';
      quill.clipboard.dangerouslyPasteHTML(body);
    })
  </script>
</body>
</html>

You should move the save functions out of the window.Retool scope otherwise the component re-initializes and duplicates itself.

Hope that helps :v:

1 Like
5

Thanks for your reply! Unfortunately I can't get this to work :frowning:

It's coming up as a blank... any help? Sorry new to the component creating

image
image1358×474 32.6 KB

6

I'm seeing the following error:

1078×202 78.2 KB

It looks like adding the following function to the custom component helps!

 function selectLocalImage() {
      const input = document.createElement('input');
      input.setAttribute('type', 'file');
      input.click();

      // Listen upload local image and save to server
      input.onchange = () => {
        const file = input.files[0];

        // file type is only image.
        if (/^image\//.test(file.type)) {
          saveToServer(file);
        } else {
          console.warn('You could only upload images.');
        }
      };
 }

custom_rte (1).json (14.3 KB)

1 Like
7

Legend @Kabirdas, I took it out for the snippet but forgot the reference in the handler :v: @ScottRob did that work for you?

8

love this!

Is there a way to make the box size auto-expand (like with the basic plain text edit components in retool)?

Thanks!

9

There is an experimental feature flag we can turn on for you that enables the auto-height setting for custom components. There are still some issues being worked out with it, it's currently not supported within modules, but if you're interested in trying it out let us know!

1 Like
10

hello, sorry I missed this post. Yes I would LOVE to have that feature turned on please!