Ledzz / angular2-tinymce

Angular 2 component for TinyMCE MCE WYSIWYG editor
https://angular2-tinymce.surge.sh
66 stars 37 forks source link

--aot is not working in angular 6, I can compile it but when I enter the app I get Uncaught ReferenceError: tinymce is not defined, execution of TinymceModule.withConfig() function inside app.module.ts might be the problem #65

Closed juanlet closed 6 years ago

juanlet commented 6 years ago

Dependencies related to tinymce on my package.json:

    "angular2-tinymce": "^3.0.0",
    "tinymce": "^4.7.8"

Compiler is running but is not including tinymce and is failing silently since when I open the app on the browser in the console I can see the error tinymce is not defined, and the app doesn't start. The problem is that functions cannot be run in app.module.ts and we define config like this

  TinymceModule.withConfig({
      plugins: ['image', 'code'],
      min_height:400,
      file_picker_types: 'image',
      file_picker_callback: filePickerCallback
    })

export function filePickerCallback(cb, value, meta) {
  var input = document.createElement('input') as HTMLInputElement;
  input.setAttribute('type', 'file');
  input.setAttribute('accept', 'image/*');
  input.onchange = function() {
    var res = <HTMLInputElement>this;
    var file:File = res.files[0];
    var reader = new FileReader();
    reader.onload = function () {
      var base64 = reader.result.split(',')[1];
      // call the callback and populate the Title field with the file name
      cb('data:image/png;base64,'+base64, { title: file.name });
    };
    reader.readAsDataURL(file);
  };

  input.click();
}

But the problem is that you cannot longer use function executions in app.module.ts, how do we workaround this problem???

EDIT: I'm not sure if that's the problem , it may not include the tinymce file properly for some reason screenshot https://postimg.cc/image/ptevjy1fx/

maybe a problem with the image plugin??

In the app.module.ts I'm importing it like

import 'tinymce/plugins/image/plugin.js';

in imports array

TinymceModule.withConfig({ plugins: ['image', 'code'], min_height:400, file_picker_types: 'image', file_picker_callback: filePickerCallback }),

EDIT 2: Adding tinymce to the scripts object in angular.json(this file is new in angular 6 and it replaces the old .angular-cli.json) seems to fix the issue

   "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/popper.js/dist/umd/popper.min.js",
              "node_modules/bootstrap/dist/js/bootstrap.min.js",
              "node_modules/chart.js/dist/Chart.js",
              "node_modules/hammerjs/hammer.min.js",
              "node_modules/quill/dist/quill.js",
              "node_modules/tinymce/tinymce.min.js"
            ]

Alternatively adding it to the index.html(which is equivalent to the previous solution) fixes the issue as well

<script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.5.6/tinymce.min.js"></script>

The docs should be updated to reflect this since I couldn't find it there....

Ledzz commented 6 years ago

TY for submitting issue, will update docs soon