Rich Text WYSIWYG Editor for Ionic


#1

Hi All,

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

Enjoy :slight_smile:


Ionic2 text editors
Rich Text editor in ionic
#2

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


How to get/set HTML content from ion-textarea
#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
    });
  }
}


#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.