Extend the HTML field of the rich-text editor

The HTML field enables you and your users to create rich text content in a simple way via tools for creating, editing and formatting text, paragraphs, lists, images, tables, hyperlinks, and other HTML elements. The HTML field allows for flexible widget designer implementation that reflect various requirements of the UI of the widget designer, for example, having a long text field validation or adding image selectors.

The Content block widget uses the Kendo UI editor, which enables you to specify which tools are available in the editor toolbar. The Content block widget leverages this functionality and sets a predefined list of tools. The following article explains how to extend the default sf-html-field field and add extra logic that enables users to copy formatted text and paste it in the HTML field (editor) as plain text in the widget designer of a Content block widget. To do this, you override the following files:

  • The default view of the .sf-cshtml file
  • The JavaScript .js file, representing the HTML field controller

By overriding the default view and the JavaScript file, you modify the paste functionality of the Kendo UI rich-text editor. As a result, the Paste event of the Kendo UI editor is registered. For more information about the event, see the Kendo UI documentation.

Since you are extending the sf-html-field used in the widget designer, you ensure consistency between different packages and between pages, both hybrid and MVC-only – the rich text editor of this widget will look and behave identically and globally.

Override the default HTML field functionality

Depending on what types of templates you are using and whether you are working with resource packages, you can get the default HTML field files in different GitHub locations. The following table provides you with a summary of what default file to use and where to create the new custom designer view and JavaScript files:

Location of the default file Bootstrap 5 resource package Other MVC resource package Hybrid template Location of new file
Bootstrap 5 GitHub repository
    ~\ResourcePackages\Bootstrap5\client-components\fields\html-field\
Minimal GitHub repository
 
  ~\ResourcePackages\Minimal\client-components\fields\html-field\
Frontend GitHub repository


~\client-components\fields\html-field\

Override the sf-html-field

To override the default sf-html-field, do the following:

  1. Copy the default .cshtml file form the GitHub repository that suits your scenario, based on the table in the previous section.
  2. Create a new file in the proper location, based on the table in the previous section.
    Name the file sf-html-field.sf-cshtml.
  3. Paste the default file contents and add the k-options attribute to specify what you need the editor to do when users paste text. The following code sample demonstrates how your customized file should look like:
  4. Save your file.

Override the JavaScript functionality

To override the default JavaScript file, do the following:

  1. Copy the default .js file form the GitHub repository that suits your scenario, based on the table in the previous section.
  2. Create a new file in the proper location, based on the table in the previous section. Name the file sf-html-field.js.
  3. Paste the default file contents and configure the Kendo UI options for the paste cleanup event. The following code sample demonstrates how your customized file should look like:
  4. Save your file.

Increase your Sitefinity skills by signing up for our free trainings. Get Sitefinity-certified at Progress Education Community to boost your credentials.

Get started with Integration Hub | Sitefinity Cloud | Sitefinity SaaS

This free lesson teaches administrators, marketers, and other business professionals how to use the Integration hub service to create automated workflows between Sitefinity and other business systems.

Web Security for Sitefinity Administrators

This free lesson teaches administrators the basics about protecting yor Sitefinity instance and its sites from external threats. Configure HTTPS, SSL, allow lists for trusted sites, and cookie security, among others.

Foundations of Sitefinity ASP.NET Core Development

The free on-demand video course teaches developers how to use Sitefinity .NET Core and leverage its decoupled architecture and new way of coding against the platform.

Was this article helpful?