Ionic2 + Ng2-CKEditor - No value accessor error

I am having issues getting the CKEditor into my app. I hope someone could help me. I am using the Tab tutorial app for testing. Beta 11. To install the editor, I ran:

npm install ng2-ckeditor --save

Then, I put it in the About.ts file:

import {Component,OnInit} from '@angular/core';
import {NavController} from 'ionic-angular';
import {CKEditorModule} from 'ng2-ckeditor';

@Component({
  templateUrl: 'build/pages/about/about.html'
})
export class AboutPage implements OnInit {
  description:string="My test description";
  constructor(private navCtrl: NavController) {
  }

  ngOnInit(){
    this.description="Initialized Test Description";
  }
}

…and About.html ion-content:

<ion-content padding class="about">
  <ckeditor name="desc"
    [(ngModel)]="description"
    debounce="500">
  </ckeditor>
</ion-content>

When it runs, it throws the error "No value accessor for ‘’ ". If I remove [(ngModel)], there is no error, but also no editor displayed. Has anyone used this text editor successfully? I am following what is given here: https://github.com/chymz/ng2-ckeditor

I am not sure about the @NgModule section. Is that what is missing? I haven’t been able to figure out where that would go in the Tabs tutorial.

Did you ever get CKEditor working with Ionic 2? I’m trying now with the RC with no luck…

I haven’t gotten it working yet. I haven’t tried it in RC so if you get it working, please post and I will do the same.

Thanks for the help. I made these changes and now I’m getting this error on bundle: ‘CKEditorModule’ is not exported by node_modules\ng2-ckeditor\lib\index.js (imported by src\app\app.module.ts)

Here is what is in node_modules\ng2-ckeditor\lib\index.js:

"use strict";
function __export(m) {
    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
}
__export(require('./ckeditor.module'));
__export(require('./ckeditor.component'));
//# sourceMappingURL=index.js.map

Is this related to using Typescript vs Javascript? Am I missing some config settings?

Try to comment all of that and replace with this,

export * from ‘./ckeditor.module’;
export * from ‘./ckeditor.component’;

I finally got CKEditor working with Ionic 2. The new build process seemed to fix it:

http://blog.ionic.io/ionic-build-process-updates/

I’m using the following:

https://www.npmjs.com/package/ckeditor


https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/ckeditor

No imports required outside of the CKEditorModule component in app.module.ts. The template object does it all.

EDIT: Correction, I don’t have it working completely yet, I was relying on this in my index.html:

<script src="http://cdn.ckeditor.com/4.5.8/full/ckeditor.js"></script>

I can’t seem to load all the required files from the npm library ‘ckeditor’.

import "ckeditor"; seems to miss all the dependencies…

2 Likes

did you get working without the import?