如何将 Tinymce 与 Symfony encore 集成？答案

【问题标题】：How to integrate Tinymce with Symfony encore?如何将 Tinymce 与 Symfony encore 集成？
【发布时间】：2018-01-30 16:10:39
【问题描述】：

我有一个使用 flex 和 encore 的 Symfony4 项目。我想添加tinymce。

所以我添加了tinymce项目：

$ yarn add tinymce

我编辑了我的app.js 文件：

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']
});

我编译了：

$ yarn run encore dev

编译成功：

Running webpack ...

 DONE  Compiled successfully in 17600ms                                                                                                                                                                                                             

 I  8 files written to public\build
Done in 20.23s.

我的 textareas 被空白页替换。

我在documentation 中找到了解决方案，当我将node_modules/tinymce/skins 目录复制到/public/build/skins 时它工作正常。但是每次纱线编译后我还是要这样做

有没有办法自动将此node_modules/tinymce/skins 目录复制到/public/build/skins？ 是否可以更新webpack.config.js 来做到这一点？

PS：我读了一些recommandations 和webpack-loader，但我不明白我必须做什么。

【问题讨论】：

标签： symfony tinymce yarnpkg webpack-encore

【解决方案1】：

选项1：推荐：内置copyFiles函数

使用 Encore 的内置 copyFiles 函数。

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：复制 webpack 插件

我添加了copy webpack plugin

yarn add copy-webpack-plugin --dev

我编辑了我的 webpack.config.js 只添加了 4 行：

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();

【讨论】：

【解决方案2】：

感谢您的帖子...它解决了我的问题，但对我来说略有不同。我不得不把皮肤放进去

/public/build/js/skins

所以我从

更改了 hte webpack 配置

.addPlugin(new CopyWebpackPlugin([
    // Copy the skins from tinymce to the build/skins directory
    { from: 'node_modules/tinymce/skins', to: 'skins' },
]))

到

.addPlugin(new CopyWebpackPlugin([
    // Copy the skins from tinymce to the build/skins directory
    { from: 'node_modules/tinymce/skins', to: 'js/skins' },
]))

而且它有效！再次感谢！

【讨论】：

【解决方案3】：

请注意，自复制插件 v3.11 以来，语法发生了变化，以前的答案将不再有效。新语法需要 patterns 字段：

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' },
        ],
    }))

...

【讨论】：

【解决方案4】：

我建议使用 Encore 的内置 copyFiles 函数，而不是使用第三方插件 copy-webpack-plugin。

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 的 API reference。

【讨论】：