Rich Text WYSIWYG Editor for Ionic

demo
1

Hi All,

Here’s my effort at building a rich text editor for Ionic 2/3.

Enjoy :slight_smile:

6 Likes
2

Apologies all I added this to the wrong forum - needs to be in ‘demo’ not ‘Ionic’.

3

Wonderfull job!

I will definitely integrate it to my app!

Next step integrating colors :slight_smile:

4

Thank you very much.

As always with this WONDERFUL community, please share the knowledge when you do :slight_smile:

5

I have used in my project. Work well. Thanks

6

Hi ya, I still use this!
However, have you been able to get it to work from a DeepLinked page with IonicPage?

In your example you use a home page that is not.

7

your text editor is a life saver everything i tried before this kept fakin up.
is there a way to implement an ngmodel without altering too much of your code, when i try to implement it it gives me this error: No value accessor for form control with unspecified name attribute

8

Hi,

You’re quite welcome. In terms of using [(ngModel)] it’s not something I’ve ever really wanted to wire up, finding it just easier to use a formControl as it allows you to subscribe. If you however want to use it to update a variable something like this could be done…

home.html excerpt…

<ion-content>
    <rich-text [formControlItem]="item" placeholderText="A sample of placeholder text"></rich-text>
    <div padding [innerHTML]="item.value"></div>
    <div padding>{{someCustomValue}}</div> <!-- DYNAMICALLY UPDATED VIA THE FORM CONTROL -->
</ion-content>

home.ts excerpt…

export class HomePage {

  item: FormControl;

  someCustomValue = '';

  constructor(public navCtrl: NavController, private formBuilder: FormBuilder) {  }

  ionViewWillLoad() {
    this.item = this.formBuilder.control('');
    this.item.valueChanges.subscribe(newValue => {
      this.someCustomValue = newValue; //This will update the someCustomValue variable
    });
  }
}

image
image.png408×806 24.7 KB

1 Like
9

I am looking for a rich text editor for Ionic and tried Quill but ran into an issue on iOS (that I have just posted about in this thread How to get native Rich Text Editor on Ionic app?).

The issue is that on iOS devices (and iOS simulator) clicking outside of the text editor does not close the keyboard due to a problem with “contenteditable” and “blur”, does your text editor also suffer from this problem?

10

I don’t think so. Haven’t noticed that being a problem.

11

I have just integrated it into my App and it seems that the issue does exist when testing on an iOS emulator (unless there is something in my project that is causing it) so it looks like it is back to the drawing board to find a text editor I can use.

12

Did you found the right text editor that solves your issue?

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
14

This is awesome! Thank you for a detailed reply. I’ll try to use this on my project.