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.

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.