使用 ES6，将 tinymce 作为 npm 包导入

Question

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?

Answer 1

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

Answer 2

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

Answer 3

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.