html - style - Angular 2 contenteditable

angular styleurls

Question

En Angular 2, ¿cómo puedo realizar un enlace de datos bidireccional con un div contenteditable?

<div class="editable" contenteditable="true">
    <h1>Text Field</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra felis in sem porta feugiat.</p>
 </div>

Answer 1

He adaptado la respuesta de Isetty para trabajar con la versión de lanzamiento de Angular 2.0, ahora está disponible. Además de trabajar con la versión de lanzamiento, también agregué un evento keyup y utilicé textContent en lugar de innerText, porque se adapta mejor a mi aplicación. Es posible que desee cambiar estas cosas.

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
    }
}

Answer 2

Para funcionar correctamente, es necesario implementar ControlValueAccessor para la directiva contenteditable . Ver mi solución: ng-contenteditable .

Answer 3

Por favor, consulte este código. Te funcionará, creo.

app.ts

@Component({
    selector: ''test-component''
})
@View({
    directives: [ContenteditableModel]
    template: `
        <h1 contenteditable="true" [(contenteditableModel)]="someObj.someProperty"></h1>
        {{someObj | json}}
    `
})
export class TestCmp {
    someObj = {someProperty: "startValue"}
}

contenteditableModel.ts:

import {Directive, ElementRef, Input, Output} from "angular2/core";
import {EventEmitter} from "angular2/src/facade/async";
import {OnChanges} from "angular2/core";
import {isPropertyUpdated} from "angular2/src/common/forms/directives/shared";

@Directive({
    selector: ''[contenteditableModel]'',
    host: {
        ''(blur)'': ''onBlur()''
    }
})
export class ContenteditableModel implements OnChanges {
    @Input(''contenteditableModel'') model: any;
    @Output(''contenteditableModelChange'') update = new EventEmitter();

    private lastViewModel: any;


    constructor(private elRef: ElementRef) {
    }

    ngOnChanges(changes) {
        if (isPropertyUpdated(changes, this.lastViewModel)) {
            this.lastViewModel = this.model
            this.refreshView()
        }
    }

    onBlur() {
        var value = this.elRef.nativeElement.innerText
        this.lastViewModel = value
        this.update.emit(value)
    }

    private refreshView() {
        this.elRef.nativeElement.innerText = this.model
    }
}

Para las entradas adicionales he encontrado un enlace para usted. https://www.namekdev.net/2016/01/two-way-binding-to-contenteditable-element-in-angular-2/

Answer 4

en angular 2 [(ngModel)] utilizado para enlace de datos bidireccional.

La respuesta de su pregunta ya está aquí. ¿Cómo usar [(ngModel)] en div''s contenteditable in angular2? Mira esto y hazme saber si está funcionando para ti o no.

Answer 5

Angular 4/2 (Typescript) con dinámica editable:

// Imports
import { Component} from ''@angular/core'';

@Component({
    selector: ''discussion'',
    template: `                                 
    <div class="details">
        <p class="time">Wednesday 14 Nov, 2016 10.13PM</p>
        <p class="text" name="discussion" 
            [contentEditable]="editable" 
            [ngClass]="{ ''editable'': editable }" 
            (blur)="uDiscussion()" 
            (click)="eDiscussion($event)" 
            (input)="discussion = $event.target.innerText" 
        >{{ discussion }}</p>
    </div>
    <div class="dropdown">
        <a href="#" data-toggle="dropdown" class="dropdown-toggle">
            <i class="fa fa-ellipsis-v"></i>
        </a>
        <ul class="dropdown-menu">
            <li><a  (click)="eDiscussion($event)" >Edit</a></li>
            <li><a  (click)="dDiscussion()" >Delete</a></li>
        </ul>
    </div>`,
    styles: [`.editable {
        white-space: pre-wrap;
        border: 1px solid coral;
        width: 200px;
        min-height: 20px;
    }`]
})

export class DiscussionComponent {

    constructor(){}

    public discussion: string = "Test string";
    public editable: boolean = false;

    dDiscussion(){
        console.log("delete");
    }

    eDiscussion(event: any){
        // on click this will set ''contentEditable'' to true 
        // and add ''editable'' class for styling.
        this.editable = true;
    }

    uDiscussion(event: any){
        // on blur set ''contentEditable'' to false 
        // and remove class ''editable'' and log new values
        this.editable = false;
        console.log("this.discussion");
        console.log(this.discussion);
    }

}