Question

如何将文字 - 我知道'安全' - 直接插入到Elm页面中。

即。以下是text'。

let str = "<h1>Hello World</h1>"
in div [] [ text' str ]

在实践中，我可以获得任何有效的HTML，所以我不想构建一个解析器，而且我宁愿避免一个端口，因为DOM可以打破虚拟dom diffing

Answer 1

此post中讨论了一些解决方案。似乎海报在使用Markdown.toHtml时取得了成功。

Answer 2

详细说明accepted answer，这对我有用：

安装降价库

elm-package install evancz/elm-markdown

在div

中呈现您的HTML

import Markdown

div [] [ Markdown.toHtml [] str ]

Answer 3

或者只是这个as per：

import Html exposing (div)
import Html.Attributes exposing (property)
import Json.Encode exposing (string)

main = 
  div [ property  "innerHTML" <| string "<div>hello</div>"  ] []

Answer 4

从Elm 0.19开始，似乎elm-markdown中的孔已被堵塞，可以正确地转义HTML。

与Elm 0.19配合使用的解决方案是使用hecrj/html-parser解析HTML：

import Html.Parser
import Html.Parser.Util

let
    rawHtml = "<h1>Hello World</h1>"
    innerHtml = case Html.Parser.run rawHtml of
        Ok nodes -> Html.Parser.Util.toVirtualDom nodes
        Err _    -> []
in
    div [] innerHtml

将原始HTML插入Elm组件

4 个答案: