How do I customise the Rich Text Editor

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

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:

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

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.

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

Thanks,
Scott

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

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

I'm seeing the following error:

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

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