# Add Underline, customise Rich Text toolbar and remove paragraph markers

**URL:** <https://forums.knack.com/t/add-underline-customise-rich-text-toolbar-and-remove-paragraph-markers/20400>\
**Category:** No-Code Solutions\
**Created:** [May 17, 2026, 1:17am UTC](https://forums.knack.com/t/add-underline-customise-rich-text-toolbar-and-remove-paragraph-markers/20400 "2026-05-17T01:17:09Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![LeighBerre96926](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/leighberre96926/32/4896_2.png) [@LeighBerre96926](https://forums.knack.com/u/LeighBerre96926)\
**Post date:** [May 17, 2026, 1:17am UTC](https://forums.knack.com/t/add-underline-customise-rich-text-toolbar-and-remove-paragraph-markers/20400/1 "2026-05-17T01:17:10Z")

</div>

_ **STOP PRESS: The original code for underline was buggy - the code below seems to be working as expected. Apologies to anyone who had tried and got frustrated …** _

For CLASSIC Knack apps…

I’ve seen a few feature requests to add Underline to the rich text toolbar. Here is a way to do it.

```auto
// ADD UNDERLINE BUTTON TO REDACTOR TOOLBAR AT POSITION 3
$(document).on('knack-view-render.any', function() {
  $('.redactor-toolbar').each(function() {
    $(this).find('.re-underline').closest('li').remove();
    var btn = '<li><a href="#" class="re-icon re-underline" rel="underline" tabindex="-1"></a></li>';
    $(this).children('li').eq(3).after(btn);
  });
});

// HANDLE UNDERLINE BUTTON CLICK
$(document).on('mousedown', '.re-underline', function(e) {
  e.preventDefault();
});

$(document).on('click', '.re-underline', function(e) {
  e.preventDefault();
  document.execCommand('underline', false, null);
  $('.redactor-editor').focus();
  var $btn = $(this);
  setTimeout(function() {
    $btn.toggleClass('redactor-act', document.queryCommandState('underline'));
  }, 10);
});

```

You can vary which position in the menu it is inserted by changing the .eq(3) to whatever position you would prefer.

Here is also some JS to stop the Rich text editor from creating a new paragraph when user presses enter - it allows the editor to work like a normal text editor.

```auto
// INSERT LINE BREAK INSTEAD OF PARAGRAPH ON ENTER IN RICH TEXT FIELDS
$(document).on('keydown', '.redactor-editor', function(e) {
  if (e.key === 'Enter' && !e.shiftKey) {
    e.preventDefault();
    document.execCommand('insertLineBreak');
  }
});

```

Finally, I leave a link to KnackPros incredibly useful post which tells us how to customise what is on that toolbar, so you can remove anything you don’t want your users to do - in my case it was them getting into the HTML view, formatting options, and adding complex content like images, videos and tables, etc. I just wanted a simple editor, one step up from paragraph text…

> [@Customize the "Rich Text" options](https://forums.knack.com/t/customize-the-rich-text-options/12799):
>
> Having many options in the Rich Text editor is great, but sometimes you want to limit which options can be used. For example, let’s suppose that users should only be allowed to use Bold, Italic, and Links. Before: After: You can customize this to your needs as you wish. CSS: /\* Customize the Rich Text options. HOW TO USE THIS 1. Select a class from the list below. CLASSES html: .re-html forma…

If you use KnackPros guidance, and you have also added Underline, make sure underline is one of the things you add to the list of exclusions. otherwise it won’t show! Dont’ ask how long it took me to realise that… 😉

---

<div class="post-metadata">

**Author:** ![LeighBerre96926](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/leighberre96926/32/4896_2.png) [@LeighBerre96926](https://forums.knack.com/u/LeighBerre96926)\
**Post date:** [May 18, 2026, 10:50am UTC](https://forums.knack.com/t/add-underline-customise-rich-text-toolbar-and-remove-paragraph-markers/20400/2 "2026-05-18T10:50:22Z")

</div>

And as a bonus, here is some more code that appends a “clean” button to the menu bar, using an eraser icon. Its function is to strip all the paragraph markers and other extraneous unwanted lines out of pasted-in text. The code above stopped the enter key creating them, but this gets rid of ones introduced by paste. Final result, for me, is this:

![image](https://us1.discourse-cdn.com/flex020/uploads/knack/original/2X/e/eb182ae025d93022bcbc98e2a48ecfb8af84256d.png)

And here is the code for that clean button that looks like an eraser. And remember, make sire you add .re-clean to the exclusion list in the CSS posted aboive if you actually want to see it - caught me again! 🙂

```auto
// CLEAN BUTTON - append to end of toolbar
$(document).on(‘knack-view-render.any’, function() {
$(‘.redactor-toolbar’).each(function() {
$(this).find(‘.re-clean’).closest(‘li’).remove();
$(this).append(‘’);
});
});

// CLEAN BUTTON BEHAVIOUR
$(document).on(‘mousedown’, ‘.re-clean’, function(e) {
e.preventDefault();
});
$(document).on(‘click’, ‘.re-clean’, function(e) {
e.preventDefault();
var $editor = $(this).closest(‘.redactor-box’).find(‘.redactor-editor’);
var html = $editor.html();
html = html.replace(/</p>\s*<p[^>]>/gi, ‘
’);
html = html.replace(/<p[^>]>/gi, ‘’);
html = html.replace(/</p>/gi, ‘’);
html = html.replace(/(<br\s*/?>\s*){3,}/gi, ‘

’);
$editor.html(html);
$editor.focus();
});

```