ng2-ckeditor Add Placeholder plugin using typescript and angular 2.0

问题

I am trying to get placeholder plugin in the CKEditor toolbar but getting following error when adding extraPlugins:'placeholder' to CKEditor config -

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

Here is console log screenshot -

I have also created a plunker.

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

Can i get some help ?

回答1:

you should use that:

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

and you should use in your CKEdior tag:

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

and you can use :

(change)="onChange($event)"

but you must define in your Component:

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

回答2:

You have to do the following If you want to use placeholder or other plugins

1- go to this page (https://ckeditor.com/cke4/addons/plugins/all) and download your plugin(like 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, it's time to use it

in the app.component :

export class AppComponent implements OnInit {
  ckeditorContent = 'angualrckeditor';
  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>

来源：https://stackoverflow.com/questions/39208766/ng2-ckeditor-add-placeholder-plugin-using-typescript-and-angular-2-0

标签

javascript

angularjs

angular

typescript

ckeditor