pl-file-editor元件¶
提供与其他文件元素兼容的浏览器内文件编辑器 和外部评分系统。
样品元素¶
<pl-file-editor
file-name="fib.py"
ace-mode="ace/mode/python"
ace-theme="ace/theme/monokai"
>
def fib(n):
pass
</pl-file-editor>
定制¶
| 属性 | 类型 | 默认 | 描述 |
|---|---|---|---|
ace-mode |
字符串 | — | 指定 Ace 编辑器模式以启用智能代码缩进和语法突出显示等功能。可以设置为默认 Ace 模式或课程定义模式。 |
ace-theme |
字符串 | "ace/theme/chrome" |
指定 Ace 编辑器主题；请参阅 Ace GitHub 存储库 中的主题的完整列表。 |
allow-blank |
布尔 | 假 | 是否允许空提交。 |
auto-resize |
布尔 | 真实 | 自动展开编辑器面板以确保所有行都存在。覆盖 "max-lines" 设置的任何值，并为 "min-lines" 设置默认值 18 行（如果未提供）。请参阅下面的详细信息以获取注释。 |
directory |
字符串 | 查看描述 | 包含现有代码的源文件所在的目录。仅当使用 source-file-name 时才有用。如果它包含特殊名称 "clientFilesCourse" 或 "serverFilesCourse" 之一，则从课程的特殊目录中读取源文件名，否则该目录应位于问题自己的目录中。如果未提供，则应在问题的主目录中找到源文件名。 |
file-name |
字符串 | — | 该文件的名称；将用于将此文件存储在 "_files" 提交的答案中。 |
focus |
布尔 | 假 | 指定编辑器应从捕获光标并聚焦编辑窗格开始。请参阅下面的详细信息以获取注释。 |
font-size |
字符串 | "12px" |
设置 Ace 编辑器的字体大小。指定为 CSS 样式大小（例如，"1rem"、"110%"、"16pt" 或 "20px"）。 |
max-lines |
整数 | — | 编辑器一次应显示的最大行数。必须大于 min-lines。 |
min-lines |
整数 | — | 编辑器最初应显示的最小行数。 |
normalize-to-ascii |
布尔 | 假 | 在提交文件进行评分之前，是否应将非英语字符（重音、非拉丁字母、花哨的引号）标准化为等效的英语字符。 |
preview |
字符串 | — | 如果设置，则提供用于编辑标记语言的实时预览模式。目前，"html"、"markdown" 或 "dot" 可用，但 通过扩展支持其他语言。 |
source-file-name |
字符串 | — | 具有要在浏览器文本编辑器中显示的现有代码的源文件的名称（而不是如上面的代码片段所示在元素标记之间编写现有代码）。 |
细节¶
使用 auto-resize 时，请考虑指定自定义 min-lines 或使用代码示例预填充代码编辑器窗口。
这将使用足够数量的行来初始化编辑器区域，以同时显示所有代码，而无需滚动。
focus 属性默认为 false。将其设置为 true 将导致文件编辑器元素在加载问题页面时自动捕获光标焦点，这也可能导致页面向下滚动，以便文件编辑器处于视图中，从而绕过任何书面介绍。这可能会对屏幕阅读器的可访问性产生负面影响，因此请谨慎使用。如果同一问题页面上有多个文件编辑器，则只有一个元素应将 focus 设置为 true，否则行为可能无法预测。
文件编辑器的内容仅默认显示在问题面板中。如果希望在提交面板中列出内容，则应使用其他元素（例如 pl-file-preview 或 pl-xss-safe）显式添加内容。
编辑器模式¶
ace-mode 属性通常设置为 ace/mode/<language_name>，其中 <language_name> 是 Ace 编辑器支持的语言名称（例如，ace/mode/python、ace/mode/c_cpp、ace/mode/java 等）。 Ace 支持 Ace GitHub 存储库 中模式列表中的多种内置模式。
或者，教师可以定义自定义模式，该模式可以作为 Ace 本身不支持的语言、课程创建的语言或教师可能希望将对语言的支持限制为一组预先确定的功能的情况的替代方案。 Ace 文档 提供了有关如何创建自定义模式的更多信息。创建自定义模式后，将其保存为clientFilesQuestion或clientFilesCourse内的ace/mode/mode-<language_name>.js。当 ace-mode 属性设置正确时，pl-file-editor 元素将自动识别自定义模式存在并加载自定义模式文件。
自定义预览选项¶
该元素通过元素扩展 支持附加预览选项。要提供此功能，扩展必须向 window.PLFileEditor.prototype.preview.PREVIEW_TYPE（其中 PREVIEW_TYPE 是 preview 属性的值）分配一个函数，该函数将表示编辑器内容的字符串转换为合适的 HTML 内容。
示例实现¶
- [元素/文件编辑器]
- [演示/自动评分器/代码编辑器]
参见¶
pl-file-upload接收文件作为提交pl-file-preview显示以前提交的文件pl-external-grader-results包括自动评分代码的输出pl-code显示带有语法突出显示的代码块pl-string-input用于接收单个字符串值