我想在我的 Elm 网页中有一个代码编辑器小部件,例如CodeMirror或Ace 。不幸的是,CodeMirror 和 Ace 在修改 DOM 时不能与 Elm 一起使用(至少这是我的理解为什么它们不起作用)。
我需要至少比<textarea>
学生提交代码更好的东西。并为我们展示代码。现在只是自动缩进和语法高亮。
我想在我的 Elm 网页中有一个代码编辑器小部件,例如CodeMirror或Ace 。不幸的是,CodeMirror 和 Ace 在修改 DOM 时不能与 Elm 一起使用(至少这是我的理解为什么它们不起作用)。
我需要至少比<textarea>
学生提交代码更好的东西。并为我们展示代码。现在只是自动缩进和语法高亮。
我个人觉得elm-ace非常有用。
它需要一些本机代码,因此您将无法使用elm package install
. 而是将相关的源代码树复制到您的并更改您elm-package.json
的包含"native-modules": true
这样的。
使用此库时,请确保您已手动添加ace.js
到index.html
.
完成该设置后,您可以通过以下方式获得代码编辑器:
view : Model -> Html Msg
view model =
div []
[ Ace.toHtml
[ Ace.onSourceChange UpdateSource
, Ace.value model.source
, Ace.mode "lua"
, Ace.theme model.theme
, Ace.enableBasicAutocompletion True
, Ace.enableLiveAutocompletion True
, Ace.enableSnippets True
, Ace.tabSize 2
, Ace.useSoftTabs False
, Ace.extensions [ "language_tools" ]
]
[]
]
我不确定它是否可嵌入,但我听说过很多关于Ellie的好消息。另一个考虑因素可能是Monaco Editor,我认为它是 Microsoft VSCode 产品的基础,以及嵌入到 Microsoft Azure 某些部分的代码编辑器。