Code Editor

Schema Alias: Umbraco.CodeEditor

UI Alias: Umb.PropertyEditorUi.CodeEditor

Returns: String

The Code Editor property editor provides an interface for entering and editing code snippets. It offers features like syntax highlighting, line numbering, wrapping code and so on.

Data Type Definition Example

Code Editor definition example

Configuration

The Code Editor can be configured with the following settings:

  • Language: A dropdown to select the syntax highlighting and validation rules for the editor. Supported languages include C#, CSS, HTML, JavaScript, JSON, Markdown, Razor (CSHTML), and TypeScript.

  • Height: Allows you to specify the height of the editor in pixels (for example., 400px). This ensures the editor fits well within your content entry forms.

  • Line Numbers: A toggle to enable or disable the line number on the left side of the editor.

  • Minimap: A toggle to enable a high-level, zoomed-out visual overview of the code on the right side of the editor for faster navigation in long files.

  • Word Wrap: A toggle that determines if long lines of code should wrap to the next line or require horizontal scrolling.

Content Example

Content Example

MVC View Example

Without Models Builder

With Modelsbuilder

Add values programmatically

See the example below to see how a value can be added or changed programmatically. To update a value of a property editor you need the Content Servicearrow-up-right.

circle-info

The example below demonstrates how to add values programmatically using a Razor view. However, this is used for illustrative purposes only and is not the recommended method for production environments.

Although the use of a GUID is preferable, you can also use the numeric ID to get the page:

Last updated

Was this helpful?