codemirror - Elm 是否有可嵌入的代码编辑器？

Question

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

我需要至少比<textarea>学生提交代码更好的东西。并为我们展示代码。现在只是自动缩进和语法高亮。

Answer 1

我个人觉得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" ]
            ]
            []
        ]

Answer 2

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