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: