Implement Placeholder feature in ng2-ckeditor with the combination of Typescript and Angular 2.0

Question

Implement Placeholder feature in ng2-ckeditor with the combination of Typescript and Angular 2.0

I am encountering an issue while trying to add the placeholder plugin to the CKEditor toolbar. When I include extraPlugins:'placeholder' in the CKEditor configuration, I receive the following error -

Error: [CKEDITOR.resourceManager.load] Resource name "placeholder" was not found at "//cdn.ckeditor.com/4.5.9/standard/plugins/placeholder/plugin.js?t=G6DD".

Below is a screenshot of the console log - https://i.sstatic.net/Ajb7M.png

I have also set up a plunker.

I have installed version "ng2-ckeditor": "^1.0.4" using npm.

Any assistance on this matter would be greatly appreciated.

javascript angularjs angular typescript ckeditor

Answer 1

Answer №1

It is recommended to utilize the following:

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

When incorporating CKEditor into your tag, remember to include:

<ckeditor
  [(ngModel)]="sampleContent"
  [config]="{uiColor: '#a0a0a0',extraPlugins:'placeholder'}"
  debounce="500">
</ckeditor>

Additionally, you can implement:

(change)="onChange($event)"

Ensure to define the following in your Component:

onChange(body:any) {
 //your Code
}

Answer 2

It is recommended to utilize the following:

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

When incorporating CKEditor into your tag, remember to include:

<ckeditor
  [(ngModel)]="sampleContent"
  [config]="{uiColor: '#a0a0a0',extraPlugins:'placeholder'}"
  debounce="500">
</ckeditor>

Additionally, you can implement:

(change)="onChange($event)"

Ensure to define the following in your Component:

onChange(body:any) {
 //your Code
}

Answer 3

Answer №2

To make use of placeholder or other plugins, follow these steps:

1- Visit this page (), download the plugin (e.g., placeholder), and place it in the assets folder of your project.

2- Include ckeditor from a CDN (in the index.html)

  <script src="https://cdn.ckeditor.com/4.12.1/full-all/ckeditor.js"></script>

3- Reference the placeholder plugin (in the index.html)

  <script src="./assets/ckediotr/plugins/placeholder/plugin.js"></script>

Now, you're ready to use it.

In the app.component:

export class AppComponent implements OnInit {
  ckeditorContent = 'angularckeditor';
  ngOnInit(): void {
    CKEDITOR.on('instanceCreated', function (event, data) {
      var editor = event.editor,
        element = editor.element;
      editor.name = "content";
    });
  }
}

In the app.component.html:

<form #form="ngForm">
 <ckeditor #myEditor [(ngModel)]="ckeditorContent" name="ckeditorContent"
  [config]="{uiColor: '#a4a4a4' , allowedContent: false,forcePasteAsPlainText: false , extraPlugins: 'placeholder'}"
  debounce="500"> </ckeditor>
</form>

Answer 4

To make use of placeholder or other plugins, follow these steps:

1- Visit this page (), download the plugin (e.g., placeholder), and place it in the assets folder of your project.

2- Include ckeditor from a CDN (in the index.html)

  <script src="https://cdn.ckeditor.com/4.12.1/full-all/ckeditor.js"></script>

3- Reference the placeholder plugin (in the index.html)

  <script src="./assets/ckediotr/plugins/placeholder/plugin.js"></script>

Now, you're ready to use it.

In the app.component:

export class AppComponent implements OnInit {
  ckeditorContent = 'angularckeditor';
  ngOnInit(): void {
    CKEDITOR.on('instanceCreated', function (event, data) {
      var editor = event.editor,
        element = editor.element;
      editor.name = "content";
    });
  }
}

In the app.component.html:

<form #form="ngForm">
 <ckeditor #myEditor [(ngModel)]="ckeditorContent" name="ckeditorContent"
  [config]="{uiColor: '#a4a4a4' , allowedContent: false,forcePasteAsPlainText: false , extraPlugins: 'placeholder'}"
  debounce="500"> </ckeditor>
</form>

Implement Placeholder feature in ng2-ckeditor with the combination of Typescript and Angular 2.0

Answer №1

Answer №2

Similar questions

The id attribute is missing in ionic 2's innerHTML

Finding the Number of Days Between Two Dates in AngularJS Using JavaScript

Exploring Click Events in Angular with OpenLayers Features

Exploring the wonders of accessing POST request body in an Express server using TypeScript and Webpack

What are the reasons for PDF files not displaying in an Angular application?

Encountering an issue of receiving "Undefined" while attempting to access constant data from a ReactJS file within my NodeJS

Asynchronous Function Implementation of Cookies in JavaScript

The deletion of property '1' from the [object Array] is not possible

Different width, same height - images arranged side by side in a responsive layout

I'm constantly encountering the error message saying "Type void does not contain property subscribe."

Failure to start selection process on narrowed down list

Unexpected JSON response from jQuery AJAX call

What is the proper way to incorporate quotation marks within other quotation marks?

How to retrieve a DOM element using Aurelia framework

Utilizing LoopBack Storage Service: Leveraging upload/download functions within JavaScript code

Tips for creating a click event for a ViewChild element reference in Angular 8

Issue: It seems like there is an error with using functions as a React child. Uncertain about the exact location

What is the best way to keep the textfield value at 0? If you clear the textfield, it will result in another value being

When Jquery JSON DOM fails to load data

Inconsistency in date serialization using JSON.stringify across various web browsers