4

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?

Randy
  • 9,419
  • 5
  • 39
  • 56
  • Hi randy, may be this can be useful http://stackoverflow.com/questions/37753364/use-import-command-in-node-js/37753854#37753854 in the answer you have a project in github with a working example – Borja Tur Jun 22 '16 at 08: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 ` – Randy Jun 22 '16 at 08:32
  • @randy Got any fix on this issue. – Karthigeyan Vellasamy Jul 25 '16 at 10:16
  • @Karthigeyan Nope still in the dark. I gave up to be honest. – Randy Jul 25 '16 at 10:19
  • Try this link it works https://github.com/tinymce/tinymce/issues/2836 – Anand Sep 01 '16 at 15:29

3 Answers3

2

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)$/ }

Anand
  • 438
  • 3
  • 5
1

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

Jonathan DS
  • 2,050
  • 5
  • 25
  • 48
1

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.

Bitpatroon
  • 19
  • 2