CodeEditor

A Panel subclass which encapsulates a Monaco editor to provide rich editing of text.

This requires the Monaco editor to be installed as a Node module, and simply requires a path to a local node_modules directory.

Editing text is as simple as setting the text and language properties.

const
    editorPanel = new CodeEditor({
        codePath : 'node_modules/monaco-editor',
        width    : 1000,
        height   : 600,
        title    : 'This is just a Panel',
        text     : 'This is the text to edit',
        language : 'markdown',
        appendTo : document.body
    }),
    // Direct access to the Monaco Editor API
    monaco = await editorPanel.editorReady;

The CodeEditor loads the required modules dynamically from the codePath and fulfills the editorReady Promise, yielding the Monaco editor when it is ready for interaction.

Status bar

The bottom toolbar of this Panel is used as a status bar. You may reconfigure it or its items in the usual way. There are three items provided by default.

These may all be accessed using this Panel's widgetMap.

These may all be styled using the selector [ref="widgetName"] where "widgetName" is one of the names listed below:

readOnly A read-only indicator which by default uses the Font-Awesome fa-lock glyph to indicate that the editor is read-only.
status A widget which may be used to display textual status messages.
cursorPos A widget which displays the current cursor position.

Code editor

//<code-header>
fiddle.title = 'Code editor';
//</code-header>
const panel = new CodeEditor({
    codePath : window.bryntum.editorPath,
    appendTo : targetElement,
    height   : '30em',
    width    : '55em',
    header   : 'Editing this example\'s code. No, it does not reload on change'
});

fetch('../docs/data/Core/examples/widget/CodeEditor.js').then(response => {
    response.text().then(t => panel.text = t);
});

Configs

114

Common

listenersEvents

Other

codePath: String

The path from which to load the Monaco editor.

For example:

{
  codePath : 'node_modules/monaco-editor'
}

editor: ObjectAlso a property

An editor configuration object to be passed to https://microsoft.github.io/monaco-editor/docs.html#functions/editor.create.html

language: StringAlso a property

The language being edited may be set and read using this property.

readOnly: BooleanAlso a property

The read-only state of the editor may be set and read. This state is by default reflected by an icon in the bottom toolbar.

status: StringAlso a property

The status message displayed un the bottom toolbar may be set and read using this property.

text: StringAlso a property

The text being edited may be set and read using this property.

theme: vs | vs-dark | hc-black | hc-lightAlso a property

The Monaco theme to use. If not specified, it defaults to 'vs';

callOnFunctionsWidget

catchEventHandlerExceptionsEvents

columnWidget

defaultFocusContainer

detectCSSCompatibilityIssuesWidget

drawerPanel

inputFieldAlignContainer

labelPositionContainer

renditionContainer

rtlRTL

spanWidget

Accessibility

ariaDescriptionWidget

ariaLabelWidget

keyMapKeyMap

Content

bbarPanel

defaultsContainer

footerPanel

headerPanel

itemsContainer

lazyItemsContainer

namedItemsContainer

stripsPanel

tbarPanel

textContentContainer

toolsPanel

trapFocusPanel

CSS

bodyClsPanel

borderContainer

clsWidget

colorWidget

contentElementClsWidget

htmlClsWidget

itemClsContainer

styleWidget

uiPanel

DOM

adoptWidget

appendToWidget

contentWidget

datasetWidget

htmlWidget

idWidget

insertBeforeWidget

insertFirstWidget

tagWidget

Float & align

alignWidget

anchorWidget

centeredWidget

constrainToWidget

draggableWidget

floatingWidget

hideAnimationWidget

maximizeOnMobileWidget

positionedWidget

scrollActionWidget

showAnimationWidget

xWidget

yWidget

Layout

alignSelfWidget

collapsedPanel

collapsiblePanel

dockWidget

flexWidget

heightWidget

hiddenWidget

hideWhenEmptyContainer

layoutContainer

layoutStyleContainer

marginWidget

maxHeightWidget

maxWidthWidget

minHeightWidget

minWidthWidget

textAlignWidget

weightWidget

widthWidget

misc

tabBarItemsContainer

Misc

bubbleEventsEvents

dataFieldWidget

defaultBindPropertyWidget

disabledWidget

elementAttributesWidget

iconPanel

ignoreParentReadOnlyWidget

localeClassLocalizable

localizableLocalizable

localizablePropertiesLocalizable

maskDefaultsWidget

maskedWidget

monitorResizeWidget

ownerWidget

preventTooltipOnTouchWidget

refWidget

rippleWidget

rootElementWidget

showTooltipWhenDisabledWidget

tabWidget

titlePanel

tooltipWidget

Record

autoUpdateRecordContainer

recordContainer

strictRecordMappingContainer

Scrolling

scrollableWidget

State

statefulState

statefulEventsState

stateIdState

stateProviderState

Properties

101

Class hierarchy

isCodeEditor: Boolean= truereadonly

Identifies an object as an instance of CodeEditor class, or subclass thereof.

isCodeEditor: Boolean= truereadonlystatic

Identifies an object as an instance of CodeEditor class, or subclass thereof.

isContainerContainer

isDelayableDelayable

isEventsEvents

isKeyMapKeyMap

isLocalizableLocalizable

isPanelPanel

isRTLRTL

isStateState

isToolableToolable

isWidgetWidget

Other

codeModel: Objectreadonly

An instance of https://microsoft.github.io/monaco-editor/docs.html#interfaces/editor.ITextModel.html which is handling the editing of the current text.

This is created every time text is set.

editor: ObjectreadonlyAlso a config

The Monaco editor instance. Use this property to manipulate the editor according to https://microsoft.github.io/monaco-editor/typedoc/index.html

Note that this will only exist when the editor has been loaded from the codePath.

This will be indicated by the editorReady property which yields the monaco editor as its value.

editorReady: Promisereadonly

A promise which resolves when the Monaco editor is loaded from the codePath and ready for use which yields the Monaco editor instance.

language: StringAlso a config

The language being edited may be set and read using this property.

readOnly: BooleanAlso a config

The read-only state of the editor may be set and read. This state is by default reflected by an icon in the bottom toolbar.

status: StringAlso a config