How to integrate Tinymce with Symfony encore? - symfony

Question

I have a Symfony4 project using flex and encore. I would like to add tinymce.
So I add tinymce project:
$ yarn add tinymce
I edited my app.js file:
require('../css/app.scss');
// Import TinyMCE
import tinymce from 'tinymce/tinymce';
// A theme is also required
import 'tinymce/themes/modern/theme';
// Any plugins you want to use has to be imported
import 'tinymce/plugins/paste';
import 'tinymce/plugins/link';
// Initialize the app
tinymce.init({
selector: 'textarea',
plugins: ['paste', 'link']
});
I compiled:
$ yarn run encore dev
Compilation is successfull:
Running webpack ...
DONE Compiled successfully in 17600ms
I 8 files written to public\build
Done in 20.23s.
My textareas are replaced by a blank page.
I found the solution in documentation and it works fine when I copy the node_modules/tinymce/skins directory to /public/build/skins. But I still have to do it after each yarn compilation
Is there a way to automatically copy this node_modules/tinymce/skins directory to /public/build/skins? IS it possible to update the webpack.config.js to do it?
PS: I read some recommandations with the webpack-loader, but I don't understand what I have to do.

Answer 1

OPTION1: RECOMMENDED: the buit-in copyFiles function
Use Encore's built-in copyFiles function.
var Encore = require('#symfony/webpack-encore');
//...
Encore
// directory where compiled assets will be stored
.setOutputPath('public/build/')
// public path used by the web server to access the output path
.setPublicPath('/build')
// copy tinymce's skin files
.copyFiles({
from: 'node_modules/tinymce/skins',
to: 'skins/[path]/[name].[ext]'
})
Encore's API reference.
OPTION2 : The copy webpack plugin
I added the copy webpack plugin
yarn add copy-webpack-plugin --dev
I edited my webpack.config.js to only add 4 lines:
var Encore = require('#symfony/webpack-encore');
//DECLARATION OF THE NEW PLUGIN
var CopyWebpackPlugin = require('copy-webpack-plugin');
Encore
// the project directory where all compiled assets will be stored
.setOutputPath('public/build/')
// the public path used by the web server to access the previous directory
.setPublicPath('/build')
// will create public/build/admin/app.js and public/build/admin/app.css
.addEntry('admin', './assets/js/app.js')
//Some project lines
//...
//...
//I call the plugin with its new syntax (since 3.11)
.addPlugin(new CopyWebpackPlugin({
patterns: [
// Copy the skins from tinymce to the build/skins directory
{ from: 'node_modules/tinymce/skins', to: 'skins' },
],
}))
//Some project lines
//...
//...
;
// export the final configuration
module.exports = Encore.getWebpackConfig();

Answer 2

Thanks for your post... It solved my issue with a slight difference for me. I had to put the skins in
/public/build/js/skins
So I changed hte webpack config from
.addPlugin(new CopyWebpackPlugin([
// Copy the skins from tinymce to the build/skins directory
{ from: 'node_modules/tinymce/skins', to: 'skins' },
]))
to
.addPlugin(new CopyWebpackPlugin([
// Copy the skins from tinymce to the build/skins directory
{ from: 'node_modules/tinymce/skins', to: 'js/skins' },
]))
And it works ! thanks again !

Answer 3

Note that since v3.11 of the copy plugin, the syntax changed and previous answers won't work anymore. The new syntax requires the patterns field:
var Encore = require('#symfony/webpack-encore');
// Plugins
var CopyWebpackPlugin = require('copy-webpack-plugin');
...
Encore
.setOutputPath('public/build/')
.setPublicPath('/build')
.addEntry('app', './assets/js/app.js')
.addPlugin(new CopyWebpackPlugin({
patterns: [
// Copy the skins from tinymce to the build/skins directory
{ from: 'node_modules/tinymce/skins', to: 'skins' },
],
}))
...

Answer 4

Instead of using the third party plugin copy-webpack-plugin I'd recommend using Encore's built-in copyFiles function.
var Encore = require('#symfony/webpack-encore');
//...
Encore
// directory where compiled assets will be stored
.setOutputPath('public/build/')
// public path used by the web server to access the output path
.setPublicPath('/build')
// copy tinymce's skin files
.copyFiles({
from: 'node_modules/tinymce/skins',
to: 'skins/[path]/[name].[ext]'
})
See Encore's API reference.