Angular2：Contenteditable div不能按预期工作

服务器存储的html文本绑定到contenteditable div时。该html不会被处理和渲染，而是呈现为原样。Angular2：Contenteditable div不能按预期工作

例如，来自服务器的html文本以下的文本呈现为文本而不是html。

<br>---------- Forwarded message ----------<br>From: Someone &lt;<a href="mailto:[email protected]" target="_blank">[email protected]</a>&gt;

下面是当前的代码：

HTML代码：

<div class="description-input" 
      placeholder="Enter Description" 
      ion-content 
      contenteditable="true" 
      [(contenteditableModel)]="description"> 
     </div>

的Javascript：

import {Directive, ElementRef, Input, Output, EventEmitter, OnChanges} from "@angular/core"; 

@Directive({ 
    selector: '[contenteditableModel]', 
    host: { 
     '(blur)': 'onEdit()', 
     '(keyup)': 'onEdit()' 
    } 
}) 

export class ContentEditableDirective implements OnChanges { 
    @Input('contenteditableModel') model: any; 
    @Output('contenteditableModelChange') update = new EventEmitter(); 

    constructor(
     private elementRef: ElementRef 
    ) { 
     //console.log('ContentEditableDirective.constructor'); 
    } 

    ngOnChanges(changes) { 
     //console.log('ContentEditableDirective.ngOnChanges'); 
     //console.log(changes); 
     if (changes.model.isFirstChange()) 
      this.refreshView(); 
    } 

    onEdit() { 
     //console.log('ContentEditableDirective.onEdit'); 
     var value = this.elementRef.nativeElement.innerText 
     this.update.emit(value) 
    } 

    private refreshView() { 
     //console.log('ContentEditableDirective.refreshView'); 
     this.elementRef.nativeElement.textContent = this.model 
    } 
}

来源

2017-03-20 Shyamal Parikh

可能的[angular 2 html binding]重复（http://stackoverflow.com/questions/31548311/angular-2-html-binding） – Abdel

如果你想获得的HTML，然后使用innerHTML代替012在refreshView

this.elementRef.nativeElement.innerHTML = this.model

同样在onEdit：

var value = this.elementRef.nativeElement.innerHtml

参见

https://developer.mozilla.org/en/docs/Web/API/Element/innerHTML

来源

2017-03-20 14:47:31 yurzui

尽管这个工程很好，但您直接访问DOM并不好：/ – Abdel

@Abdel如果你不打算使用服务器端渲染和利用Angulars WebWorkers，那么我不会看到这个问题https://angular.io/docs/ts/latest/guide/ngmodule.html#！＃declare-directives-and-components – yurzui

这很好用，但'onEdit'再次将html转换为文本。 –

请避免DOM的直接操纵，因为它违背了日e角2心态。

您是否尝试过使用innerHTML指令？ see

来源

2017-03-20 14:52:25 Abdel

Angular2：Contenteditable div不能按预期工作

回答

相关问题