Search code examples
javascriptjqueryhtmlnpmtinymce

using ES6, import tinymce as npm package

I have installed tinymce as package in my project using this tutorial.

I'm trying to import tinymce into my project. It does something (hides my textarea, expected behaviour) when I call init(), but it does not show me the wysiwyg editor.

If I include the url in my html file it works, but that's not what I want, because I don't include my custom component every time the page gets loaded. The script tag would be overkill for some users.

I want to import tinymce like this (or simular):

import 'tinymce';

and use it like this:

constructor(){
  tinymce.init({
    selector: "#mytextarea"
  })
}

This does not give me any error, and it hides the textarea, but it does not build a wysiwyg editor.

The only thing working so far:

<script src="/path/to/tinymce.min.js"></script>

I prefer not to edit the JavaScript file, because that would break on updates. If it is the only way though, I'll simply have to.

How can I import the library into my ES6 module?

Solution

  • You can follow the steps mentioned in the below link

    https://github.com/tinymce/tinymce/issues/2836

    But still you may need to do some css changes because skins were not loaded.

    Run npm i url-loader --save

    In webpack config file add this { loader: 'url-loader?limit=100000', test: /.(png|woff|woff2|eot|ttf|svg|gif)$/ }