Rich Text WYSIWYG Editor for Ionic

demo
13

I didn’t find a text editor that solves the issue by itself so I had to add additional code to get this working how I wanted, I used Quill as a text editor in the end then added a click event on ion-content and ion-header to hide the keyboard, I also needed to add a click event on the text editor that would stop propagation otherwise when clicking in the text editor the click would propagate to ion-content and cause the keyboard to close. Some examples of the code are below:

<ion-content class="ion-padding" (click)="contentClicked();">
***
<quill-editor (click)="textEditorClicked($event)">
****
</quill-editor>
***
</ion-content>

contentClicked() {
    // Hide keyboard
    this.keyboard.hide();
}

  textEditorClicked(event) {

    // Stop click propagation (this is so that contentClicked method does not get called which would close the keyboard)
    event.stopPropagation();
}
1 Like