codeEditor 源码编辑器
codeEditor 是一个用于展示或输入源代码的组件。是一个多行的文本域,具有代码高亮、打印边距和带行号的侧边栏。
codeEditor 基于 JavaScript 编写的 Ace 可嵌入的代码编辑器。
XML 元素  | 
  | 
|---|---|
Java 类  | 
  | 
XML 属性  | 
id - alignSelf - classNames - colspan - css - dataContainer - defaultSuggestionsEnabled - enabled - errorMessage - focusShortcut - fontSize - height - helperText - highlightActiveLine - highlightGutterLine - label - liveSuggestionsEnabled - maxHeight - maxWidth - minHeight - minWidth - mode - printMarginColumn - property - readOnly - required - requiredMessage - showGutter - showLineNumbers - showPrintMargin - tabIndex - suggestOn - textWrap - theme - title - useSoftTabs - visible - width  | 
事件和处理器  | 
AttachEvent - BlurEvent - ClientValidatedEvent - ComponentValueChangeEvent - CompositionEndEvent - CompositionStartEvent - CompositionUpdateEvent - DetachEvent - FocusEvent - InputEvent - KeyDownEvent - KeyPressEvent - KeyUpEvent - statusChangeHandler - validator  | 
XML 内部元素  | 
数据绑定
下面的示例生成了一个数据感知的 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 代码。
自动完成
codeEditor 组件支持自动完成功能。
如果设置 defaultSuggestionsEnabled 属性为 true,自动完成功能可以根据语言 模式 建议默认的选项:
<codeEditor mode="GROOVY" defaultSuggestionsEnabled="true"/>
可以用 suggester 提供自定义的选项,示例:
<codeEditor id="codeEditorWithCustomSuggestions"/>
@Install(to = "codeEditorWithCustomSuggestions", subject = "suggester")
private List<Suggestion> codeEditorWithCustomSuggestionsSuggester(Suggester.SuggestionContext context) {
    String text = context.getText();
    int cursorPosition = context.getCursorPosition();
    // If autocompletion is requested after "user."
    if (cursorPosition == text.indexOf("user.") + 5) {
        // Return a list of suggestions for properties of the User entity
        return metadata.getClass(User.class).getProperties().stream()
                .map(property -> new Suggestion(property.getName(), property.getName()))
                .toList();
    } else {
        return List.of();
    }
}
默认情况下,自动完成的弹窗会在用户按下快捷键时打开:
- 
Windows 和 Linux:Ctrl-Space
 - 
macOS:⌥-Space 或 ⌃-Space,根据系统设置不同。
 
如果 suggestOn 设置为一个正则表达式,则自动完成的弹窗会在用户输入匹配字符串时打开。例如,当 suggestOn="\." 时,用户输入 "." 就会打开自动完成弹窗。
如果 liveSuggestionsEnabled 属性设置为 true,提示窗会根据用户的输入自动显示,而不需要手动触发或设置 suggestOn 属性。一旦用户输入单词字符时,会请求所有的建议选项。请注意,实时自动完成在内容比较多或者有复杂的建议时会非常耗资源,因此 liveSuggestionsEnabled 默认为 false。
XML 属性
在 Jmix 中,所有组件都有一些作用一致的 通用属性。
下面是 codeEditor 的特殊属性:
名称  | 
描述  | 
默认值  | 
|---|---|---|
  | 
||
设置编辑器内源代码的字体大小  | 
  | 
|
设置是否高亮当前行。  | 
  | 
|
设置是否高亮侧边栏。如果启用,则当前行的侧边栏将高亮显示。  | 
  | 
|
用户输入时,自动打开 建议选项 弹窗。  | 
  | 
|
设置特定模式的语法高亮。支持的模式通过   | 
  | 
|
设置代码宽度垂直线的位置。主要是控制代码显示和打印的宽度。  | 
  | 
|
设置侧边栏的可见性。侧边栏中一般显示代码的行号。  | 
  | 
|
设置行号的可见性。  | 
  | 
|
设置代码宽度垂直线的可见性。  | 
  | 
|
触发 自动完成 的正则表达式,用于匹配用户输入。  | 
||
设置长代码行是否自动换行。  | 
  | 
|
设置   | 
  | 
|
设置 tab 字符(制表符)的显示模式。在软制表符模式中,制表符显示为多个空格;在硬制表符模式中显示为   | 
  |