Saturday, June 9, 2018

Rich text editor for ionic 2 | ionic 3 | ionic 4

An example of a rich text editor within an Ionic application

Use below sample project and follow below instructions :-

Step 1) git clone https://github.com/judgewest2000/Ionic3RichText.git
Step 2) cd Ionic3Richtext
Step 3) npm install
Step 4) ionic serve

Git url : https://github.com/judgewest2000/Ionic3RichText

7 comments:

  1. am using ionic4 V4.10.3 and it doesn't have @ionic/app-scripts...installed via
    npm install @ionic/app-scripts@latest --save-dev
    and it works fine...good shell for a wysiwyg editor

    ReplyDelete
    Replies
    1. Sorry, Not getting what you are trying to say... Can you clear this? you are not able to install "ionic/app-scripts" correct?

      Delete
    2. you have to remove the node module and reinstall it (npm install -save)
      that works for me, i hope it works for you too

      Delete
  2. Hiiii....
    Iam getting thhis error


    Uncaught Error: Template parse errors:
    Can't bind to 'formControlItem' since it isn't a known property of 'rich-text'.
    1. If 'rich-text' is an Angular component and it has 'formControlItem' input, then verify that it is part of this module.
    2. If 'rich-text' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
    3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

    : ng:///AppModule/CreateNoticePage.html@56:15
    'rich-text' is not a known element:
    1. If 'rich-text' is an Angular component, then verify that it is part of this module.
    2. If 'rich-text' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

    ReplyDelete
    Replies
    1. If you are using web component then using formControl, you have to import ReactiveFormsModule in to imports section. Check below eg -

      import {FormsModule, ReactiveFormsModule} from '@angular/forms';

      @NgModule({
      imports: [
      BrowserModule,
      FormsModule,
      ReactiveFormsModule,
      ],
      ...
      })
      export class AppModule {}

      Delete
  3. Thanks for the awesome post on RTF Editor Component. Keep sharing more.

    ReplyDelete
  4. Build failed with error code: 1
    npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\chokidar\node_modules\fsevents):
    npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

    npm ERR! code ELIFECYCLE
    npm ERR! errno 1
    npm ERR! node-sass@4.5.3 postinstall: `node scripts/build.js`
    npm ERR! Exit status 1
    npm ERR!
    npm ERR! Failed at the node-sass@4.5.3 postinstall script.
    npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

    npm ERR! A complete log of this run can be found in:

    ReplyDelete