Редактор WYSIWYG не регистрирует обновление - PullRequest
Новая
       62

Редактор WYSIWYG не регистрирует обновление

0 голосов
/ 27 мая 2020

Я создаю свой собственный текстовый редактор WYSIWYG в Angular, используя div с редактируемым содержимым. Я извлекаю его как компонент. Я хочу иметь возможность набрать текст и отформатировать его, а затем, когда я нажимаю кнопку в родительском компоненте, он должен либо изменить текст в редакторе, либо обновить его.

Мой родительский компонент выглядит следующим образом: 

<code>@Component({
  selector: 'app-parent',
  templateUrl: `
    <form [formGroup]="form">
        <app-default-editor
        formControlName="body" >
        </app-default-editor>
    </form>

    <button (click)="changeValue()">Change Value</button>
    <p *ngIf="!form.valid">Counter is invalid!</p>

    <pre>{{ form.value | json }}
`}) экспортный класс ParentComponent {initialText = '

Это заголовок

'; form = this.fb.group ({body: '

Это заголовок

'}); changeValue () {this.form.patchValue ({body: 'Это мой новый текст'}); }}

Мой компонент редактора выглядит следующим образом: 

@Component({
  selector: 'app-parent',
  templateUrl: `
    <button (click)="executeCommand('bold')" ><i class="fas fa-bold"></i></button>
    <button (click)="executeCommand('italic')" ><i class="fas fa-italic"></i></button>
    <button (click)="executeCommand('underline')" ><i class="fas fa-underline"></i></button>

    <div 
        #htmlEditor 
        id="htmlEditor" 
        contenteditable="true" 
        (input)="onTextChanged()" 
        [innerHTML]="initialText">
    </div>
  `
})
export class EditorComponent implements ControlValueAccessor, OnChanges {

    @Input()
    initialText = "";
    @Input()
    _textValue = "";
    @Input()
    minValue = 0;


    @ViewChild('htmlEditor') htmlEditor;


    ngAfterViewInit() {
        this.htmlEditor.nativeElement.innerHTML = this.initialText;
    }

    get textValue() {
        return this._textValue;
    }

    set textValue(val) {
        this._textValue = val;
        this.propagateChange(this._textValue);
    }

    writeValue(value: any) {
        if (value !== undefined) {
            this.textValue = value;
        }
    }

    propagateChange = (_: any) => { };

    registerOnChange(fn) {
        this.propagateChange = fn;
    }

    registerOnTouched() { }

    validateFn: Function;

    ngOnChanges(changes) {
        this.validateFn = createEditorRequiredValidator();
    }

    onTextChanged() {
        this.textValue = this.htmlEditor.nativeElement.innerHTML;
    }

    executeCommand(cmd) {
        document.execCommand(cmd, false, this.htmlEditor.nativeElement);
    }

}


export function createEditorRequiredValidator() {
    return function validateEditor(c: FormControl) {
        let err = {
            requiredError: {
                given: c.value,
                required: true
            }
        };

        return (c.value.length == 0) ? err : null;
    }
}

С текущим кодом я могу отформатировать текст, чтобы он был полужирным, itali c et c и форма в родительском компоненте может отображать значение в тегах. Когда я нажимаю кнопку, чтобы изменить текст на предопределенное значение, форма обновляется, но редактор не показывает никаких изменений.

1 Ответ

0 голосов
/ 27 мая 2020

В итоге я изменил метод changeValue в родительском компоненте на: 

changeValue(){
    this.form.patchValue({ body: [WHATEVER THE TEXT MUST BE] });
    this.initialText = [WHATEVER THE TEXT MUST BE]
}

Кажется, это работает, но я не думаю, что это лучший ответ.

...