Search code examples
angularckeditorckeditor4.x

How to integrate CKEditor 4 easy image into Angular 6?


Recently I have tried to work with CKEditor 4 to upload image for my website. However, I cannot find any solutions on the Internet that are about adding Easy Image add-on to my project because I have installed CKEditor4 via terminal. What I have found is that we need to change config.js inside the root folder of CKEditor but I cannot find any config.js files installed by terminal. Can someone help me solve this problem ? I would really appreciate.

I cannot find config.js in my project

But I can find it if I download directly from CKEditor


Solution

  • The best way to use CKEditor with angular is by placing this tag in index.html

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

    And use ng2-ckeditor

    Example app here

    To add EasyImage modify the config

      ngOnInit() {
        this.ckeConfig = {
          allowedContent: false,
          extraPlugins: 'divarea,easyimage',
          forcePasteAsPlainText: true,
          cloudServices_tokenUrl:'YOUR_TOKEN_URL'
        };
      }
    

    available config options here