Select a site

Feather: Code area directive

Feather's sf-code-area directive marks a text area as a code section and sets its attributes. You use the directive on top of your widget or designer view, so that custom widget code is displayed and styled in a specific way, for example, in the widget designer.

The sf-code-area directive is based on the CodeMirror text editor for code, version 2.18. For more information, see the official website of CodeMirror.

IMPORTANT: When using this directive, make sure you add the the following on top of your view:
  • @using Telerik.Sitefinity.Frontend.Mvc.Helpers;
  • @Html.CodeMirrorScriptReferences()

Attributes

You use the sf-area-code directive on top of the <textarea> element. The sf-area-code directive exposes the following attributes:

Attribute Description
sf-model

Specific property, to which to bind the code section contents. It is a property of the widget model, which is serialized in the widget designer JavaScript code.
For example:

  • Widget model property when using the attribute in a frontend view
  • Widget designer controller scope property when using the attribute in a widget designer
placeholder  The text placeholder displayed before you start typing text inside the code area, for example, Enter code… 
sf-type  The programming language, for example, JavaScript.
sf-tab-mode  Configures the behavior of the tabulation.
sf-line-numbers Configures whether to display line numbers on the left.
sf-match-brackets  Configures whether to autocomplete closing bracket when typing an opening bracket.

Add a code area directive

Following is an example how to add the sf-area-code directive in the JavaScript code of the widget designer view of an Embed code widget. For more information, see Feather: Embed code widget.

Add the directive and its attributes in the widget designer view of the Embed code widget:

Back To Top