Question

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

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

Answer 1

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

Answer 2

我个人认为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" ]
            ]
            []
        ]

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

2 个答案: