2

我正在尝试制作一个定制的聚合物元素contenteditable。我是聚合物新手，所以我可能在做一些愚蠢的事情。我可以创建元素，它会呈现并对事件做出反应，但单击时它不会进入可编辑模式。有任何想法吗？

<polymer-element name="editable-h1">
  <template>
    <h1 contenteditable="true">
      <content></content>
    </h1>
  </template>
</polymer-element>

codepen.io 上的示例

4

1 回答 1

3

在自定义标签中声明的元素被认为是 light DOM 的一部分，我猜想，由于阴影边界，contenteditable在它们上使用会出现问题。您需要将内容节点重新插入到您的自定义元素的影子根中才能使其正常工作。

这是一个如何实现这一目标的示例：

密码笔

http://codepen.io/anon/pen/WbNWdw

资源

<html>
<head> 
<link rel="import" href="http://www.polymer-project.org/components/platform/platform.js">
<link rel="import" href="http://www.polymer-project.org/components/core-tooltip/core-tooltip.html">

<polymer-element name="editable-h1">
  <script>
  Polymer('editable-h1', {
    ready: function() {
        var sroot = this.$;
        var nodes = sroot.mycontent.getDistributedNodes();
        [].forEach.call(nodes, function(node) {
            sroot.editableportion.appendChild(node);
        });
    },
    blur: function () {
      console.log('blur');
    },
    click: function () {
      console.log('click');
    },
    focus: function () {
      console.log('focus');
    }
  });
  </script>
  <template>
    <h1 contenteditable="true" on-click="{{click}}" on-blur="{{blur}}" on-focus={{focus}} id="editableportion">
    </h1>
    <content id="mycontent"></content>
  </template>
</polymer-element>

</head>
  <body>
    <h1 contenteditable="true">I´m a regular heading</h1>    
    <editable-h1>
      I'm an polymer enhanced heading
      <span>With a span for good measure</span>
    </editable-h1> 
  </body> 
</html>
于 2014-11-17T14:39:35.360 回答