Add Underline, customise Rich Text toolbar and remove paragraph markers

Ask the Community No-Code Solutions
1

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.

// 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.

// 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…

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… :wink:

2

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

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! :slight_smile:

// 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();
});