How to integrate Tinymce with Symfony encore?
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 !
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();