codeEditor 源码编辑器

在线示例

codeEditor 是一个用于展示或输入源代码的组件。

codeEditor 是一个多行文本域，提供代码高亮显示、打印边距以及带有行号的侧边栏。

XML 元素

codeEditor

Java 类

CodeEditor

XML 属性

id - alignSelf - classNames - colspan - css - dataContainer - enabled - errorMessage - focusShortcut - fontSize - height - helperText - highlightActiveLine - highlightGutterLine - label - maxHeight - maxWidth - minHeight - minWidth - mode - printMarginColumn - property - readOnly - required - requiredMessage - showGutter - showLineNumbers - showPrintMargin - tabIndex - textWrap - theme - title - useSoftTabs - visible - width

事件和处理器

AttachEvent - BlurEvent - ClientValidatedEvent - ComponentValueChangeEvent - CompositionEndEvent - CompositionStartEvent - CompositionUpdateEvent - DetachEvent - FocusEvent - InputEvent - KeyDownEvent - KeyPressEvent - KeyUpEvent - statusChangeHandler - validator

XML 内部元素

tooltip - validator

基本用法

codeEditor 的示例：

<codeEditor id="codeEditor"
            mode="XML"
            width="50%"/>
code editor basics

数据绑定

数据绑定是指将组件与 数据容器 进行关联。可视化组件或相应数据容器中的更改可以触发彼此的更新。有关详细信息，请参阅 使用数据组件。

下面的示例生成了一个数据感知的 codeEditor。

<data>
    <instance id="orderReportDc"
              class="com.company.onboarding.entity.OrderReport"> (1)
        <loader id="orderReportDl"/>
        <fetchPlan extends="_base"/> (2)
    </instance>
</data>
    <codeEditor mode="XML"
                dataContainer="orderReportDc"
                property="code"/> (3)
1 OrderReport 实体的 InstanceContainer 容器。
2 容器内实体的内联 fetch plan。
3 将组件与数据容器和属性进行关联。dataContainer 属性使用 orderReportDc 数据容器，property 引用 code 实体属性。

模式

在线示例

mode 属性设置编辑器需要支持的编程语言或标记语言。该设置可以启用所选语言的语法高亮。

默认语法高亮模式是 CodeEditorMode.PLAIN_TEXT。

示例：

<codeEditor id="myCodeEditor"
            mode="JAVASCRIPT"/>

示例中设置 mode 属性为 JAVASCRIPT，即配置编辑器用于编辑 JavaScript 代码。

主题

在线示例

theme 属性用于定义编辑器的视觉外观和样式。选择预定义的主题，可以更改代码编辑器的配色方案、字体和其他外观元素。

支持的主题列表通过 CodeEditorTheme 枚举定义。

验证

如需检查 codeEditor 组件输入的值，可以在内部元素 validators 中添加一个 validator元素。

codeEditor 可以使用下列预定义的验证器：

XML 元素

validators

预定义验证器

custom - email - notBlank - notEmpty - notNull - regexp - size

XML 属性

在 Jmix 中，所有组件都有一些作用一致的 通用属性。

下面是 codeEditor 的特殊属性：

名称

描述

默认值

fontSize

设置编辑器内源代码的字体大小

1rem

highlightActiveLine

设置是否高亮当前行。

true

highlightGutterLine

设置是否高亮侧边栏。如果启用，则当前行的侧边栏将高亮显示。

true

mode

设置特定模式的语法高亮。支持的模式通过 CodeEditorMode 枚举定义。参阅 模式。

CodeEditorMode.PLAIN_TEXT

printMarginColumn

设置代码宽度垂直线的位置。主要是控制代码显示和打印的宽度。

80

showGutter

设置侧边栏的可见性。侧边栏中一般显示代码的行号。

true

showLineNumbers

设置行号的可见性。

true

showPrintMargin

设置代码宽度垂直线的可见性。

true

textWrap

设置长代码行是否自动换行。

false

theme

设置 codeEditor 的可视化主题。参阅 主题。

CodeEditorTheme.TEXTMATE

useSoftTabs

设置 tab 字符（制表符）的显示模式。在软制表符模式中，制表符显示为多个空格；在硬制表符模式中显示为 \t 字符。

true