如何在webpack中填充tinymce?

我试图让webpack认可tinymce 。 它在window上设置了一个名为tinymce的属性,所以显然有一个select是使用这样的语法来require()它(在webpack文档的EXPORTING 部分的底部描述):

require("imports?window=>{}!exports?window.XModule!./file.js

但在这个例子中,./ ./file.js./file.js解决的? 我通过npm安装了tinymce,我不知道如何指定tinymce.js文件的正确path。

无论如何,我宁愿在我的configuration中处理这个,只要可能就require('tinymce') ,所以我已经安装了exports-loader并在configuration中添加了以下内容(基于这个讨论 ):

 module: { loaders: [ { test: /[\/]tinymce\.js$/, loader: 'exports?tinymce' } ] } 

不幸的是,这是行不通的。 我的configuration有什么问题?

       

网上收集的解决方案 "如何在webpack中填充tinymce?"

npm上的tinymce模块不能直接使用,但是包含4个不同的库。 即:

  • tinymce/tinymce.js
  • tinymce/tinymce.min.js
  • tinymce/tinymce.jquery.js
  • tinymce/tinymce.jquery.min.js

为了能够在你的代码中执行require('tinymce') ,你可以在你的webpackconfiguration文件中添加一个别名 ,以及一个自定义的加载器。

 resolve: { alias: { // require('tinymce') will do require('tinymce/tinymce') tinymce: 'tinymce/tinymce', }, }, module: { loaders: [ { // Only apply on tinymce/tinymce include: require.resolve('tinymce/tinymce'), // Export window.tinymce loader: 'exports?window.tinymce', }, ], }, 

在哪里可以用您select的分配来代替tinymce/tinymce

就像@cchamberlain我最终使用脚本加载器tinymce,但加载插件和默认情况下不需要的其他资源,我使用CopyWebpackPlugin而不是ES6更可configuration的解决scheme。

 var copyWebpackPlugin = require('copy-webpack-plugin'); module.exports = { //... plugins: [ new copyWebpackPlugin([ { from: './node_modules/tinymce/plugins', to: './plugins' }, { from: './node_modules/tinymce/themes', to: './themes' }, { from: './node_modules/tinymce/skins', to: './skins' } ]) ] }; 

我得到这个工作类似于我捆绑React,以确保我没有在DOM中获得两个单独的实例。 我有一些导入/导出/暴露装载机的问题,所以我使用脚本加载器。

在我的设置中,我有一个公共块,我严格使用供应商(反应/ tinymce)。

  entry: { 'loading': '../src/app/entry/loading' , 'app': '../src/app/entry/app' , 'timeout': '../src/app/entry/timeout' , 'commons': [ 'expose?React!react' , 'expose?ReactDOM!react-dom' , 'script!tinymce/tinymce.min.js' ] } 

这对我来说就像包括CDN脚本一样工作,但我现在有错误,因为它无法从我的node_modules位置find我的主题/插件/皮肤path。 它正在path/assets/plugins/assets/themes/assets/skins (我使用webpack public path /assets/ )寻找它们。

我解决了第二个问题,通过映射expression式来静态地服务这两条路线(es6):

  const NODE_MODULES_ROOT = path.resolve(__dirname, 'node_modules') const TINYMCE_PLUGINS_ROOT = path.join(NODE_MODULES_ROOT, 'tinymce/plugins') const TINYMCE_THEMES_ROOT = path.join(NODE_MODULES_ROOT, 'tinymce/themes') const TINYMCE_SKINS_ROOT = path.join(NODE_MODULES_ROOT, 'tinymce/skins') router.use('/assets/plugins', express.static(TINYMCE_PLUGINS_ROOT)) router.use('/assets/themes', express.static(TINYMCE_THEMES_ROOT)) router.use('/assets/skins', express.static(TINYMCE_SKINS_ROOT)) 

做完这个之后, window.tinymce / window.tinyMCE都被定义并且function与CDN相同。

我能够通过使用imports-loader和exports-loader以及copy-webpack-plugin将tinyMCE集成到基于Angular 2 / TypeScript的项目中。

首先确保必要的依赖关系是可用的,以及项目的一部分packages.json文件:

 npm i tinymce --save npm i exports-loader --save-dev npm i imports-loader --save-dev npm i copy-webpack-plugin --save-dev 

然后将所需的加载器添加到webpackconfiguration的加载器部分:

  loaders: [ { test: require.resolve('tinymce/tinymce'), loaders: [ 'imports?this=>window', 'exports?window.tinymce' ] }, { test: /tinymce\/(themes|plugins)\//, loaders: [ 'imports?this=>window' ] }] 

要在您的webpackconfiguration中使用copyWebpackPlugin,请将其导入到webpackconfiguration文件的标题部分:

 var copyWebpackPlugin = require('copy-webpack-plugin'); 

而且,正如PetriRyhänen评论的那样,将以下条目添加到webpackconfiguration的插件部分:

 plugins: [ new copyWebpackPlugin([ { from: './node_modules/tinymce/plugins', to: './plugins' }, { from: './node_modules/tinymce/themes', to: './themes' }, { from: './node_modules/tinymce/skins', to: './skins' } ]) ] 

这一步确保(需要)的tinyMCE插件也可以在你的webpack。

最后在你的Angular 2组件文件中导入tinyMCE,添加

 require('tinymce') declare var tinymce: any; 

到导入部分,并且tinyMCE已准备好使用。

除了这个答案 (感谢PetriRyhänen ),我想添加我的copyWebpackPlugintinymce.init()configuration调整。

 new copyWebpackPlugin([{ context: './node_modules/tinymce/skins/lightgray', from: './**/*', to: './tinymce/skin', }]), 

使用此configuration,您将获得{output}/tinymce/skin文件夹中的所有外观文件。

那么你可以像这样初始化tinymce:

 import tinymce from 'tinymce/tinymce'; // A theme is also required import 'tinymce/themes/modern/theme'; // you may change to 'inlite' theme // Any plugins you want to use has to be imported import 'tinymce/plugins/advlist/plugin'; // ... possibly other plugins // Then anywhere in this file you can: tinymce.init({ // ... possibly other options skin_url: '/tinymce/skin', // <-- !!! here we tell tinymce where // to load skin files from // ... possibly other options }); 

有了这个我有开发和生产build设正常工作。

我们使用TinyMCE jQuery 4.1.6,并且接受的答案不适用于我们,因为window似乎被TinyMCE(例如window.setTimeout)用于其他位置。 另外, document没有被删除似乎会导致问题。

这对我们有效:

 alias: { 'tinymce': 'tinymce/tinymce.jquery.js' } module: { loaders: [ { test: /tinymce\/tinymce\.jquery\.js/, loader: 'imports?document=>window.document,this=>window!exports?window.tinymce' } ] } 

像这样加载你的插件:

 { test: /tinymce\/plugins/, loader: 'imports?tinymce,this=>{tinymce:tinymce}' }