Elm 是否有可嵌入的代码编辑器?

Question

我想在我的Elm网页中有一个代码编辑器小部件，如CodeMirror或Ace。不幸的是，CodeMirror和Ace不能与Elm一起工作，因为它们修改了DOM(至少这是我理解为什么它们不起作用)。

我需要至少比<textarea>更好的东西让学生提交代码。并为我们显示代码。目前只是自动缩进和语法突出显示。

Answer 1

我个人觉得榆树王牌非常有用。

它需要一些本机代码，因此您将无法使用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" ]
]
[]
]

Answer 2

我不确定它是否可以嵌入，但我听说过很多关于艾莉的好话。另一个考虑因素可能是Monaco Editor，我相信它是Microsoft的VSCode产品的基础，以及嵌入到Microsoft Azure某些部分的代码编辑器。