Web组件（聚合物 - 羽毛笔）与Elm集成

Question

我正在尝试将WYSIWYG合并到我的榆树应用程序中。我已将polymer-quill web component添加到我的应用程序中。

index.html

<script src="/bower_components/webcomponentsjs/webcomponents.js"></script>
<script>
  window.Polymer = {
    dom: 'shady',
    lazyRegister: true
  };
</script>
<link rel="import" href="/bower_components/polymer/polymer.html">
<link rel="import" href="/bower_components/polymer-quill/polymer-quill.html">

SRC / Templates.elm

div [ ] [
    [ node "polymer-quill" [] []
    ]

是的，我在我的应用程序中看到了WYSIWYG。它的工作原理和行为类似于所见即所得。

现在我希望它与榆树交谈。如果这是一个文本输入，我会做这样的事情：

myInput =
    input
        [ class "form-control"
        , Html.Attributes.type_ "text"
        , placeholder "My Input"
        , value model.myInputValue
        , onInput SetMyInputValue
        ]
        []

这是与model.myInputValue的双向绑定。然而，node "polymer-quill" [value model.myInputValue] []似乎没有让我到任何地方。

node "polymer-quill" [ content "This is some content" ] []也不起作用。

魔鬼怎么做到这一点？

Answer 1

使用on事件将数据发送回Elm

recordTextContentOnTextChanged =
on "change" <|
    Json.Decode.map QuillSetProblemContent
        textChangeDecoder

Answer 2

我遇到了同样的问题。对于绑定的前半部分（将文本从Elm放入编辑器），似乎问题是content字段期待一个Json对象，即使在他们的文档中他们说它可能只是一个字符串。

我发现如果我设置store-as="html"，它会期望内容为html而且会正常工作。

Html.node "polymer-quill"
    [ Html.Attributes.attribute "store-as" "html"
    , Html.Attributes.attribute "content" "Hello world"
    ]
    []

我仍然没有想到听取改变事件，但如果@ Jonathan的回答有效，我将编辑它

---

另外，我添加到我的HTML中的唯一一行是

<link rel="import" href="/bower_components/polymer-quill/polymer-quill.html">

我不确定你的其他进口产品是否正在做什么或是否有必要