如何将 Tinymce 与 Symfony encore 集成?
How to integrate Tinymce with Symfony encore?
我有一个使用 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.
我的文本区域被替换为空白页。
我在 documentation 中找到了解决方案,当我将 node_modules/tinymce/skins
目录复制到 /public/build/skins
时它工作正常。但是每次yarn编译后还是得做
有没有办法自动将此 node_modules/tinymce/skins
目录复制到 /public/build/skins
? 是否可以更新 webpack.config.js
来执行此操作?
PS:我用 webpack-loader
读了一些 recommandations,但我不明白我必须做什么。
选项 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]'
})
OPTION2 : 复制webpack插件
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();
感谢您 post... 它解决了我的问题,但对我来说略有不同。我不得不把皮肤放在
/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' },
]))
而且有效!再次感谢!
请注意,自复制插件 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' },
],
}))
...
我建议使用 Encore 的 built-in 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]'
})
请参阅安可 API reference。
我有一个使用 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.
我的文本区域被替换为空白页。
我在 documentation 中找到了解决方案,当我将 node_modules/tinymce/skins
目录复制到 /public/build/skins
时它工作正常。但是每次yarn编译后还是得做
有没有办法自动将此 node_modules/tinymce/skins
目录复制到 /public/build/skins
? 是否可以更新 webpack.config.js
来执行此操作?
PS:我用 webpack-loader
读了一些 recommandations,但我不明白我必须做什么。
选项 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]'
})
OPTION2 : 复制webpack插件
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();
感谢您 post... 它解决了我的问题,但对我来说略有不同。我不得不把皮肤放在
/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' },
]))
而且有效!再次感谢!
请注意,自复制插件 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' },
],
}))
...
我建议使用 Encore 的 built-in 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]'
})
请参阅安可 API reference。