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
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
Override the sf-html-field
To override the default sf-html-field, do the following:
- Copy the default .cshtml file form the GitHub repository that suits your scenario, based on the table in the previous section.
- Create a new file in the proper location, based on the table in the previous section.
Name the file sf-html-field.sf-cshtml.
- 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:
- Save your file.
- Copy the default .js file form the GitHub repository that suits your scenario, based on the table in the previous section.
- Create a new file in the proper location, based on the table in the previous section. Name the file sf-html-field.js.
- 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:
- Save your file.