Angular 2 contenteditable div, bewegen caret zur Endlage

Question

Ich habe folgende Angular-2-Code:

write.component.ts:

import { CommentHeaderComponent }       from './comment.header.component'; 
import { StyleService }          from './../../services/services/style.service'; 
import { Parameters }          from './../../services/services/parameters'; 
import { Component, Input, ViewChild,ElementRef,HostBinding} from "@angular/core"; 
import { ContenteditableModel }        from './../directives/contenteditable.directive'; 

@Component({ 
      selector:'write', 
      templateUrl:'app/templates/write.component.html', 
      styleUrls:['app/templates/css/write.component.css'] 
      }) 

export class WriteComponent 
{ 
    @HostBinding('class.hbox') 
    parameters:Parameters; 
    private writeText:string=""; 
    private rows:number=1; 
    private maxRows:number=4; 
    private comment:boolean=false; 
    private lineHeight:string="1.7em"; 

    @ViewChild('writeBox') writeBox:ElementRef; 

    constructor(private stService:StyleService){} 

    ngOnInit() 
    { 
     this.writeBox.nativeElement.innerText=""; 
     this.stService.setProperty(this.writeBox,[{rows:this.rows}]); 
     this.stService.setStyle(this.writeBox,[{lineHeight:this.lineHeight}]); 
     if (this.parameters.Iskey("comment")) 
     { 
     this.comment=true; 
     } 
    } 

    write(data:any) 
    { 
    this.parameters.cfunc({event:"comment",message : this.writeText}); 
    this.writeText=""; 
    }  

    getWriteText():String 
    { 
    return this.writeText; 
    } 
} 

write.component.html:

<div contenteditable="true" #writeBox [ceModel]="writeText" (ceChange)="writeText=$event" [innerHTML]="writeText"> 
</div> 
<ng-template [ngIf]="this.comment"> 
    <button type="button" (click)="files($event)" class="btn fa fa-paperclip"> </button> 
</ng-template> 
<button type="button" (click)="write($event)" class="btn fa fa-chevron-right"> </button> 

contenteditable.directive.ts:

Import {ValidatorService} von './../../services/service/validator.service'; Import {Directive, HostListener, Input, ElementRef, OnInit, SimpleChanges, EventEmitter, Output} aus '@ angular/core';

@Directive({selector: '[ceModel]'}) 

export class ContenteditableModel 
{ 
    @Input('ceModel') ceModel: any=""; 
    @Output('ceChange') ceChange = new EventEmitter(); 


    constructor(private elRef: ElementRef,private v:ValidatorService) {} 

    @HostListener('keyup', ['$event']) 
    onChange($event: any) 
    { 

    if ($event.keyCode==32) 
    { 
     console.log(this.ceModel); 
     this.ceModel="<a>"+this.ceModel+"<\a>"; 
     this.ceChange.emit(this.ceModel); 
     return; 
    } 


    this.ceModel=this.elRef.nativeElement.innerText; 
    this.ceChange.emit(this.ceModel); 
    } 

    @HostListener('paste', ['$event']) 
    onPaste($event: any) 
    { 
    console.log($event); 
    } 
} 

Ich mag dynamisch einen contenteditable div aktualisieren, siehe write.component.html, dass zu einem Modell verknüpft ist, die durch eine Richtlinie, contenteditable.directive.ts verwaltet wird. Die Klassenvariable writeText wird an die Direktive gesendet, um zu überprüfen, ob ein Benutzer eine URL geschrieben hat. Wenn dies der Fall ist, sollte der URL-Inhalt in URL transformiert werden. Dies ist in der div als HTML gerendert:

Das Problem ist, dass, wenn ich einen Text eingeben, die Cursor/Cursor springt immer in die Startposition:

Ist es möglich, den Cursor manuell zum Ende des Div-Inhalts zu bewegen? Der Inhalt kann Text und HTML sein. Ich habe die Lösungen versucht, hier ohne Glück vorgeschlagen:

Set the caret position always to end in contenteditable div

Dank für Ihre Hilfe danken.

Answer 1

Ich hoffe, Sie sind immer noch daran interessiert, eine Antwort darauf zu bekommen. Der einfachste Ansatz, den ich mir vorstellen kann, ist, einen Verweis auf den Knoten <a> zu speichern und ihn zum Platzieren des Caret zu verwenden.

Innen ContenteditableModel Sie einfach erstellen können, die folgenden:

private moveCaret(): void { 

    let range = document.createRange(), 
     pos = this.elRef.lastChild.innerText.length - 1, 
     sel = window.getSelection(); 

    range.setStart(this.elRef, pos); 
    range.collapse(true); 
    sel.removeAllRanges(); 
    sel.addRange(range); 
} 

Auf diese Weise können Sie Ihre elRef verwenden, um die caret beim letzten Zeichen ihres letzten Kindes zu stellen, das <a> Element.

Answer 2

in meinem Problem, ich auslösen Fokus, wenn ein (es automatisch auf neue Linie gehen) und neu auszurichten (bis zum letzten Zeichen des letzten todo), wenn ich auf „el.lastChild

.... 
// somewhere you trigger that focus event: 
(div:HTMLElement) => { 
    // div.focus(); 
    if (div.lastChild) this.setSelectionRange(div) 
    else div.focus(); 
    this.changeDetector.detectChanges(); 
} 
.... 

setSelectionRange(el:HTMLElement) { 
    let range = document.createRange(); 
    let pos = el.lastChild.textContent.length; 
    let sel = window.getSelection(); 
    console.log('el last child',el.lastChild.textContent.length,typeof(el.lastChild.textContent.length)); 
    range.setStart(el.lastChild, pos); 
    range.collapse(true); 
    sel.removeAllRanges(); 
    sel.addRange(range); 
    } 

Mitteilung lösche ", Ihre contenteditable mit (textContent oder innerHTML?)