是否有榆树的可嵌入代码编辑器？

Question

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

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

Answer 1

我个人发现elm-ace非常有用。

它需要一些本机代码，因此您将无法使用elm package install安装它。而是将相关的源树复制到您的身上，并将您的elm-package.json更改为包含"native-modules": true，如this。

使用此库时，请确保已手动将ace.js添加到index.html。

完成设置后，您可以获得代码编辑器this way：

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，我认为它是微软VSCode产品的基础，以及嵌入到Microsoft Azure某些部分的代码编辑器。