Select a site

IMPORTANT: This version of Sitefinity CMS is out of support and the respective product documentation is no longer maintained and can be outdated. Use the version selector to view a supported product version.

Code area directive | MVC

The 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 Embed code widget.

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

Back To Top