Угловой: привязка к детям родителей с contenteditable - PullRequest
Новая
       7

Угловой: привязка к детям родителей с contenteditable

0 голосов
/ 05 мая 2018

Я пытался создать абзац с парой span с моим контентом. Причина использования span заключается в том, что пользователь может настроить любую часть абзаца со своим собственным стилем.

Но если я установлю contenteditable для родителя, все дочерние элементы прекратят отвечать на события, такие как input, onkey и т. Д.

Если я задаю contenteditable для каждого span, но удаляю его из родительского элемента, привязки к span работают как талисман, но не позволяют пользователю выбирать и редактировать перекрестные интервалы.

Так, как я могу установить contenteditable для родителя и сохранить мои привязки в промежутках? Или, если это невозможно, как я могу получить ребенка span, который пользователь щелкнул и отредактировал прямо сейчас?

Надеюсь, мой вопрос понятен :) Ниже вы можете увидеть мой код, который работает не так, как я ожидал.

Шаблон: 

<p contenteditable>
    <span *ngFor="let text of text_blocks" [innerText]="text.content" (input)="text.content=$event.target.innerText"></span>
</p>

Мок: 

{
    "text_blocks" : [
        {
            "id" : 1,
            "content" : "Lorem Ipsum"
        },
        {
            "id" : 2,
            "content" : " is simply dummy text of the printing and typesetting industry. "
        },
        {
            "id" : 3,
            "content" : "Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to "
        },
        {
            "id" : 4,
            "content" : "a type specimen book. "
        },
        {
            "id" : 5,
            "content" : "It has survived not only five centuries, but also the leap into electronic typesetting, "
        },
        {
            "id" : 6,
            "content" : "remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing "
        },
        {
            "id" : 7,
            "content" : "Lorem Ipsum"
        },
        {
            "id" : 8,
            "content" : " passages, and more recently with desktop publishing software like"
        },
        {
            "id" : 9,
            "content" : " Aldus PageMaker "
        },
        {
            "id" : 10,
            "content" : "including versions of Lorem Ipsum."
        }
    ]
}
...