Содержимое Редактируется на <content> Точка вставки

Я ищу для создания пользовательского элемента, который является Shadow DOM обертывает содержимое contenteditable без его назначения contenteditable.Содержимое Редактируется на <content> Точка вставки

Мои первые попытки не было:

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

и это немного меньше надежды попытка:

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

Но никакого успеха на любом. Возможно ли это? У меня не было проблемы с созданием contenteditable элементов внутри Shadow DOM, но цель состоит в том, чтобы этот контент отражался и в Light DOM.

Последнее замечание, я делал все мои тесты внутри Polymer, я не думаю, что он что-то меняет, поскольку он использует встроенную Shadow DOM в Chrome, но, возможно, это имеет эффект.

Спасибо!

источник

2015-11-02 Bede

Это возможно. Вам просто нужно получить ссылку на дочернего элемента light dom внутри вашего обратного вызова 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 '' –

Содержимое Редактируется на <content> Точка вставки

ответ

Смежные вопросы