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! 
How are you currently passing values into the component?
Thank you for getting back to me 
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 
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 
Thanks for your reply! Unfortunately I can't get this to work 
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)