How to integrate Tinymce with Symfony encore?

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 !