

PropertyFieldCodeEditor control

This control generates a code editor which can be used to add custom styling or content to your web part.

PropertyFieldCodeEditor

PropertyFieldCodeEditor editing experience

How to use this control in your solutions

1. Check that you installed the @pnp/spfx-property-controls dependency. Check out The getting started page for more information about installing the dependency.
2. Import the following modules to your component:

import { PropertyFieldCodeEditor, PropertyFieldCodeEditorLanguages } from '@pnp/spfx-property-controls/lib/PropertyFieldCodeEditor';

1. Create a new property for your web part, for example:

export interface IPropertyControlsTestWebPartProps {
  htmlCode: string;
}

1. Add the custom property control to the groupFields of the web part property pane configuration:

PropertyFieldCodeEditor('htmlCode', {
  label: 'Edit HTML Code',
  panelTitle: 'Edit HTML Code',
  initialValue: this.properties.htmlCode,
  onPropertyChange: this.onPropertyPaneFieldChanged,
  properties: this.properties,
  disabled: false,
  key: 'codeEditorFieldId',
  language: PropertyFieldCodeEditorLanguages.HTML,
  options: {
    wrap: true,
    fontSize: 20,
    // more options
  }
})

Implementation

The PropertyFieldCodeEditor control can be configured with the following properties:

Property	Type	Required	Description
label	string	yes	Property field label displayed on top.
disabled	boolean	no	Specify if the control needs to be disabled.
panelTitle	string	yes	Title of the code editor panel.
initialValue	string	no	Defines the initial code.
language	PropertyFieldCodeEditorLanguages	no	Sets the language on the code editor.
properties	any	yes	Parent web part properties, this object is use to update the property value.
onPropertyChange	function	yes	Defines a onPropertyChange function to raise when the date gets changed.
key	string	yes	An unique key that indicates the identity of this control.
options	AceOptions	no	Additional properties available to the Ace editor.
panelWidth	string	no	Width of the panel that contains the Ace editor

Enum PropertyFieldCodeEditorLanguages

Name
css
JavaScript
JSON
Handlebars
HTML
Plain Text
Sass
TypeScript
XML