Preserve Feather Content Block HTML Formatting

By September 7, 2016JavaScript, MVC, Sitefinity

Feather widgets in Sitefinity are a significant improvement over traditional Sitefinity widgets. They are more responsive, provide better tooling, and are easier to customize (both the main area as well as designer views). However, I recently encountered an issue with one of the basic default Feather widgets included with more recent versions of Sitefinity. In this post we’re going to see how to modify this behavior, so that when working with the Feather Content Block widget we have it behave the way we would like. This post also serves a second purpose: Introducing how to modify a built-in Sitefinity Feather widget’s behavior. This technique can be used to modify any custom or built-in Sitefinity Feather widget.

The Problem

Sitefinity has a Feather equivalent for most of its widgets. In this case we’re looking at the Feather Content Block widget, one that Sitefinity uses in place of its classic counterpart. The issue I ran into was that this widget removes all formatting, spacing, and indentation from any manually-entered HTML. Whenever you switch away from the HTML view or click the “Save”, button, Sitefinity compresses it all down to a single line. It’s important to note that this does not affect the actual output of the content, so this issue is more relevant to maintaining your HTML as opposed to messing up the final output. This means this issue isn’t as serious, but that doesn’t mean it’s not worth fixing!

Before and After

Now that’s ugly! But before we get to changing the Feather Content Block behavior, I want to mention the upside to what Sitefinity is doing here: Compressing HTML does provide a benefit to users loading up the pages, as there’s less to download. The above scenario is a rather simple example, but if you had lots of content, you would ideally want it to be compressed down so that the page has less data to transmit. However, being able to maintain that HTML also carries importance, and having to re-format it every time you want to make a change is a cumbersome workflow.

With out of the way, let’s get to changing the Feather Content Block!

The Fix

First, you’ll want to navigate to your project’s “ResourcesPackages” directory and locate which package you are using. Sitefinity comes with “Bootstrap” out of the box, so that’s the one we’ll be drilling down into.

Within Bootstrap, go to client-components/fields/html-field and create a new JavaScript file named “sf-html-field.js” (which should mirror the name of the already-existing file “sf-html-field.sf-html”). Its initial content can be directly copied from the default version of the file located in the Feather GitHub project. You can also, of course, download that file into the html-field directory to save you the copy/paste trouble. This JavaScript is what controls what happens when working with the “HTML Field” component, the primary tool that the Feather Content Block uses itself. Note that any other widgets that use this (including your own) will also benefit from this change.

Create the JS File

Now that we have our entry point to modifying the Feather Content Block, we can do so. We need to make two modifications here: One to prevent compression when we press “Save” on the widget, and one to prevent compression when we switch away from “HTML editing mode” back to “WYSIWYG editing mode” (the HTML button in the top-right corner of the widget). This change is very easy to make! All you have to do is comment out or delete both of the instances of the following line of code:

This statement appears on line 277 (which is within the “toggleHtmlView” function definition) and on line 317 (the “close” function).

Save the changes to the JavaScript file, and that’s it! It’s not a compiled file for your project (it’s JavaScript; this also applies to the cshtml files within ResourcePackages) so all you have to do is save and Sitefinity will pick up the change. If we go back to our Feather Content Block instance and either switch away from the HTML or click the Save button, our HTML is preserved!

HTML formatting preserved

As you can see, the HTML formatting within the Feather Content Block widget now maintains exactly what we put into it. I’ve also shown you how easy it is to modify the behavior of the Feather “HTML Field” client component. This should make the journey of maintaining content block HTML on your site a much more pleasant one!

The following two tabs change content below.
  • Danny Brabant

    Hi Scott, thanks for your post. I tried your solution, I download the file, I put in the html-field directory and I changed two line for comment. The problem is that the file is not called, the file in the DLL (telerik.sitefinity.frontend) is called. Do you know how I can fix that ?

    Thanks

    Danny

  • Pingback: Disable Content Filters in Sitefinity - Falafel Software Blog()