CODEWITHSUNDEEP
javascriptangularckeditorangular-formsckeditor5
Apurv Chaudhary
Apurv Chaudhary

Reputation: 1795

How to use CKEditor in Angular 4?

  1. I install CKEditor using npm install ng2-ckeditor this command.
  2. Then add ckeditor.js in my index.html
  3. Then import import { CKEditorModule } from 'ng2-ckeditor'; in app.module.ts

  4. And then use CKEditor in my HTML page

     <ckeditor ngModel="{{ckeditorContent}}" formControlName="circular_contents" [config]="{uiColor: '#99000'}" [readonly]="false" debounce="500" debounce="500">
 </ckeditor>

  5. At that time i get the error ERROR TypeError: Cannot set property 'dir' of undefined

Now how can i use CKEditor in my HTML page.

Upvotes: 2

Views: 2036

Answers (2)

Deva
Deva

Reputation: 2121

As you are using angular 4, so please change syntax of ngModel to [(ngModel)].

like this:

<ckeditor [(ngModel)]="templateConversionDTO.htmlContent"
                name="myckeditor" required debounce="500"> </ckeditor>

and don't forget to add CDN of Ckeditor in your Index.html file, this is important.

<script src="https://cdn.ckeditor.com/4.6.1/full/ckeditor.js"></script>

Upvotes: 1

Apurv Chaudhary
Apurv Chaudhary

Reputation: 1795

everything is ok just include ckeditor cdn link in your index.html page, don't download ckeditor.js.

<script src="https://cdn.ckeditor.com/4.5.11/full/ckeditor.js"></script>

Upvotes: 4

Related Questions