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 ponent 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?

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 ponent 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?

• javascript
• jquery
• html
• npm
• tinymce

Share Improve this question Follow asked Jun 22, 2016 at 8:02 RandyRandy 9,84955 gold badges4242 silver badges5858 bronze badges 5

• Hi randy, may be this can be useful stackoverflow./questions/37753364/… in the answer you have a project in github with a working example – Borja Tur Commented Jun 22, 2016 at 8:22
• I have everything set up and working, no need to transpile anything from es6 to es5 because that is already happening. The only problem here is that the import behaves different then when you use the <script> tag. – Randy Commented Jun 22, 2016 at 8:32
• @randy Got any fix on this issue. – Karthigeyan Vellasamy Commented Jul 25, 2016 at 10:16
• @Karthigeyan Nope still in the dark. I gave up to be honest. – Randy Commented Jul 25, 2016 at 10:19
• Try this link it works github./tinymce/tinymce/issues/2836 – Anand Commented Sep 1, 2016 at 15:29

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 1

You can follow the steps mentioned in the below link

https://github./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)$/ }

There's is a more up to date official documentantion describing how to use tinymce directly from npm , without bundling , and set up your paths, here: https://www.tiny.cloud/docs/configure/editor-appearance/#skin_url

In my case:

tinymce.init({
  selector: '.editor', 
  skin_url: '/node_modules/tinymce/skins/ui/oxide',
});

While this works, it doesn't seem they are prioritizing much over this since it still tryes to load some css from another path.

Additionally you can provide a language_url for the tinymce-i18n package

The official documentation points out that the skin files should be copied to the relative folder 'skins' in the public web folder:

In Linux you could solve this by doing

cp -r node_modules/tinymce/skins skins

But if you are using Webpack, add the following to the webpack.config.js to the Encore object:

.copyFiles({
    from: './node_modules/tinymce/skins',
    to: 'skins/[path][name].[ext]'
})

This will copy all files from the node_modules/tinymce/skins folder to the public folder 'skins', when building the resources.

With this I assume the folder node_modules/tinymce/skins exists relative to the webpack.config.js file.