內容可編輯<content>插入點

我正在尋找創建一個自定義元素，它的影子DOM包裝contenteditable內容，沒有它本身被分配contenteditable。內容可編輯<content>插入點

我第一次嘗試已經：

<template> 
    <div contenteditable="true"> 
    <content></content> 
    </div> 
</template>

和這個幾乎沒有希望嘗試：

<template> 
    <div> 
    <content contenteditable="true"></content> 
    </div> 
</template>

但在任何沒有成功。這甚至有可能嗎？我沒有在Shadow DOM中製作contenteditable元素的問題，但其目的是讓該內容也反映在Light DOM中。最後一個注意事項，我一直在Polymer內部進行所有的測試，我不認爲它會改變任何東西，因爲它在Chrome中使用原生的Shadow DOM，但也許會產生影響。

謝謝！

來源

2015-11-02 Bede

這是可能的。您只需在ready或attached回調中獲取輕微小孩的參考，並將其contentEditable屬性設置爲true。

下面是一個例子：

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>JS Bin</title> 
 
    <base href="http://polygit.org/polymer+:master/components/"> 
 
    <link rel="import" href="polymer/polymer.html"> 
 
</head> 
 

 
<body> 
 
    <dom-module id="my-element"> 
 
    <template> 
 
     <style> 
 
     :host { 
 
      display: block; 
 
      height: 100px; 
 
      background-color: #cacaca; 
 
     } 
 
     </style> 
 
     <content id="insertionPoint" select="*"></content> 
 
    </template> 
 
    </dom-module> 
 

 
    <my-element> 
 
    <div></div> 
 
    </my-element> 
 
    <script> 
 
    (function() { 
 
     Polymer({ 
 
     is: 'my-element', 
 
     ready: function() { 
 
      var el = Polymer.dom(this.$.insertionPoint).getDistributedNodes()[0]; 
 
      el.contentEditable = true; 
 
      el.style.height = "100%"; 
 
     } 
 
     }); 
 
    })(); 
 
    </script> 
 
</body> 
 

 
</html>

來源

2015-11-03 01:03:16

謝謝！但是這並不能完全解決我的問題，這意味着我無法編輯純文本節點，例如' foo bar'，這對我來說是一個非常大的用例。 – Bede

@Bede文本節點不是內容可編輯的。如果這是你的情況，那麼使自定義元素是內容可編輯的元素。 –

@Bede'<我的元素contenteditable>' –

內容可編輯<content>插入點

回答

相關問題