"CKEDITOR" is not defined in the ng2-ckeditor script

After completing the following steps:

  1. ng2-ckeditor Installation - JSPM : jspm install ng2-ckeditor=github:chymz/ng2-ckeditor - NPM : npm install ng2-ckeditor

  2. Creation of ts file:

    import {Component} from 'angular2/core';
import {CKEditor} from 'ng2-ckeditor';

@Component({
  selector: 'sample',
  directives: [CKEditor],
  template: `
    <ckeditor [(ngModel)]="ckeditorContent" [config]="{uiColor: '#99000'}"></ckeditor>`
})
export class Sample{
  constructor(){
    this.ckeditorContent = `<p>My HTML</p>`;
  }
}

However, during runtime I encountered an exception stating "CKEDITOR is not defined".

I attempted to import "ckeditor" itself, but this resulted in another runtime exception "ckeditor uncaught typeerror cannot set property 'dir' of undefined"

Appreciate any assistance.

typescriptangularckeditor

Answer №1

One crucial step is missing in your process. To properly integrate CKEditor into your HTML, you must include a link to an actual CKEditor source file. Visit the CKEditor website here and choose a version. Then, add it to your HTML like this:

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

The following steps should align with what you have already outlined.

Edit

If SystemJS setup wasn't done correctly, it should resemble something similar to this configuration:

System.config({
        packages: {
            "app": {
                "format": 'register',
                "defaultExtension": 'js'
            },
            "ng2-ckeditor": {
                "defaultExtension": "js"
            }
        },
        map: {
            "ng2-ckeditor": "node_modules/ng2-ckeditor/lib/CKEditor.js"
        }
    });

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Combining two objects by aligning their keys in JavaScript

I have two simple objects that look like this. var obj1 = { "data": { "Category": "OUTFLOWS", "Opening": 3213.11, "Mar16": 3213.12, "Apr16": 3148.13, "May16": 3148.14, "Jun16" ...

javascriptangular

The process of subscribing to a service in Angular

I currently have 3 objects: - The initial component - A connection service - The secondary component When the initial component is folded/expanded, it should trigger the expansion/folding of the secondary component through the service. Within the service ...

angulartypescriptservicerxjsobservable

Ways to statically type a function that produces an array from 1 to n

I am working on creating a function that can generate an array of numbers ranging from 0 to n, while ensuring that the returned type matches a known array structure at compile time. const makeFoo = (n: number) => [...Array(n).keys()]; const foo1 = [0, 1 ...

typescriptstatic-typing

Issue with Vue @Watch not properly recognizing changes in a boolean value

I'm currently experimenting with watch functions in vue-ts. I have configured a watch function that is supposed to trigger whenever a Boolean variable's value changes, but for some reason, it's not triggering at all and I'm unable to de ...

typescriptvue.jsvue-property-decorator

Injecting data into mat-dialog-actions in Angular - how can it be done?

I have a question regarding passing data to a method in Angular. Below is the code snippet: Is there a way to pass data into addNpi() similar to how editNpi(data) is done below? Your help is appreciated. Thank you! <mat-dialog-content> <ip-dat ...

angularinjectmat-dialog

Obtain the string value for the template variable

Trying to display a string literal if element.elementId is null or undefined. <div>{{String(element.elementId)}}</div> Encountering an error: TableBasicExample.html:6 ERROR TypeError: _co.String is not a function at Object.eval [as updat ...

javascriptangular

An unexpected error occurs when attempting to invoke the arrow function of a child class within an abstract parent class in Typescript

Here is a snippet of code that I'm working on. In my child class, I need to use an arrow function called hello(). When I try calling the.greeting() in the parent class constructor, I encounter an error: index.ts:29 Uncaught TypeError: this.hello is ...

javascripttypescript

Instructions for authenticating with Google silently in the background

I implemented a Google authentication system based on the tutorial provided in this blog post. Link to Tutorial However, I am facing an issue where a popup always appears for users to login. I would prefer the login process to occur in the background, wh ...

angularauthenticationgoogle-oauthweb-deploymentgoogle-api-js-client

Failed to install @ngrx/store due to unforeseen issues

Having issues with the installation of @ngrx/store My current setup includes: Node 8.9.3, NPM 5.5.1, Angular CLI 1.7.4, Angular 5.2.0 I am using Angular CLI to create a new Angular application and attempting to add @ngrx/store by running the following c ...

angularngrxngrx-store

Converting a React Typescript project to Javascript ES5: A step-by-step guide

I have a react typescript project and I need to convert the source code (NOT THE BUILD) to ES3 or ES5 JavaScript. This is because I want to use this code as a component in another React app. Can you suggest which preset and plugins I should use for this t ...

typescriptbabeljscreate-react-appreact-typescript

Is there a way to update the Angular component tag after it has been rendered?

Imagine we have a component in Angular with the selector "grid". @Component({ selector: 'grid', template: '<div>This is a grid.</div>', styleUrls: ['./grid.component.scss'] }) Now, when we include this gri ...

javascripthtmlangular

Transitioning from asp net mvc to asp core + angular: Elevating your web development game

I am currently in the process of upgrading an older ASP.NET MVC application to a newer version using ASP Core + Angular 7. In the previous app, we had an external service that called our API and sent the auth token in the URL because it was unable to do ot ...

asp.netasp.net-mvcangularasp.net-coreauth-token

Troubleshooting: Issues with APIGateway's Default Integration

I'm currently utilizing the AWS CDK to construct my API Gateway REST API My objective is to have my RestApi configured to automatically return an HTTP 404 error, so I set it up as follows: this.gateway = new apigw.RestApi(this, "Gateway", { ...

typescriptamazon-web-servicesaws-api-gatewayaws-cdk

Rearranging the export order in a barrel file for Angular 2 services can have a significant impact on dependency

After spending some time puzzling over this issue, I'm reaching out for some assistance. In my development workflow, I store all of my core service files in a shared folder that I then combine into a single file named common.ts. These services are i ...

angulardependency-injectionangular2-services

Activation event in Angular does not trigger when navigating between two separate modules

Greetings! I have been working on my Angular application, where I have created two modules - AdminModule and HomeModule. Within the AdminModule, there is a Login component with the following TypeScript code: import { Component, OnInit } from '@angular ...

angular

How can a fixed type value be assigned to a portion of a type that is constrained by generics?

Experience a new aspect of Ids with my basic interface: interface Identifiable { id?: number; } Behold, a universal function that transforms record objects into entities with ids: function transformRowToObject<T extends Identifiable>(row: { id: ...

typescript

The Angular component seems to be lacking a template

During the upgrade process of my Angular 8 app to Angular 9, I encountered an error message while trying to build: ERROR in component is missing a template The issue is that it doesn't specify which specific component is missing a template. Is there ...

angularangular9

Combining JavaScript files into a single JavaScript file with Angular

For my Angular 8 project, I have successfully imported Bootstrap CSS files into my styles.css file using the following code: /* You can add global styles to this file, and also import other style files */ @import "~bootstrap/dist/css/bootstrap.min.css"; @ ...

javascriptangular

Can you explain the mechanics behind the functionalities of @angular and @type dependencies?

This inquiry may have been raised before, but I couldn't uncover all the solutions. If that's the case, my apologies. I have a good grasp on how package.json and dependencies / dev-dependencies function in Node applications. Currently delving i ...

node.jsangulartypescriptnpm

The selected data was inserted as a foreign key, leading to an Integrity constraint violation with SQLSTATE[23000]: 1048

Hello and thank you for joining us! I am currently working on a task that involves selecting the acc_id from the account_info table and inserting it as a Foreign Key into the patient_info table. Unfortunately, I have encountered an error: While testing ...

phpmysqljsontypescriptionic-framework