Javascript 如何在 webpack 中填充 tinymce？

Question

提问by Rob Johansen

I'm trying to get tinymcerecognized by webpack. It sets a property named tinymceon window, so evidently one option is to require()it using syntax like this (described at the bottom of the EXPORTING sectionof the webpack docs):

我试图让webpack 识别tinymce。它设置了一个名为tinymceon的属性window，因此显然一种选择是require()使用这样的语法（在webpack 文档的 EXPORTING部分的底部描述）：

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

But in this example, how is ./file.jsresolved? I installed tinymce via npm, and I can't figure out how to specify the right path to the tinymce.jsfile.

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

Regardless, I'd rather handle this in my configuration and be able to just require('tinymce')if possible, so I've installed exports-loaderand added the following to my configuration (based on this discussion):

无论如何，我宁愿在我的配置中处理这个问题，require('tinymce')如果可能的话，我已经安装exports-loader并添加了以下内容到我的配置中（基于这个讨论）：

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

Unfortunately this isn't working. What's wrong with my configuration?

不幸的是，这不起作用。我的配置有什么问题？

Answer 1

采纳答案by Alexandre Kirszenberg

The tinymce module on npm can't be required directly, but contains 4 different distributions of the library. Namely:

npm 上的 tinymce 模块不能直接使用，但包含 4 个不同的库发行版。即：

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

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

To be able to do require('tinymce')in your code, you can add an aliasin your webpack config, as well as a custom loader for your distribution of choice.

为了能够require('tinymce')在您的代码中执行此操作，您可以在 webpack 配置中添加别名，以及为您选择的发行版添加自定义加载器。

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

Where you can replace tinymce/tinymcewith your distribution of choice.

您可以tinymce/tinymce用您选择的发行版替换的地方。

Answer 2

回答by Petri Ryh?nen

Just like @cchamberlain I ended up using script loader for tinymce, but to load the plugins and other resources that were not required by default I used CopyWebpackPlugin instead of ES6 for more configurable solution.

就像@cchamberlain 一样，我最终为 tinymce 使用了脚本加载器，但是为了加载默认情况下不需要的插件和其他资源，我使用 CopyWebpackPlugin 而不是 ES6 来获得更多可配置的解决方案。

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

Answer 3

回答by Florian Cremer

I was able to integrate tinyMCE in my Angular 2/TypeScript based project by using the imports-loader and exports-loader and the copy-webpack-plugin.

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

First ensure that the necessary dependencies are available and part of the packages.json file of your project:

首先确保必要的依赖项可用并且是项目的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

Then add the required loader to the loaders-section of your webpack configuration:

然后将所需的加载器添加到 webpack 配置的加载器部分：

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

To make the copyWebpackPlugin available in your webpack configuration, import it in the header part of the webpack configuration file:

要使 copyWebpackPlugin 在您的 webpack 配置中可用，请将其导入 webpack 配置文件的标头部分：

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

And, as Petri Ryh?nen commented, add the following entry to the plugins-section of your webpack configuration:

并且，正如 Petri Ryh?nen 评论的那样，将以下条目添加到 webpack 配置的插件部分：

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

This step ensures that (required) addons of tinyMCE are also available in your webpack.

此步骤可确保您的 webpack 中也可以使用（必需的）tinyMCE 插件。

Finally to import tinyMCE in your Angular 2 component file, add

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

require('tinymce')

declare var tinymce: any;

to the import section and tinyMCE is ready to use.

到导入部分，tinyMCE 就可以使用了。

Answer 4

回答by cchamberlain

I got this to work similar to how I bundle React to ensure I don't get two separate instances in DOM. I had some issues with imports / exports / expose loaders so instead I used script-loader.

我让这个工作类似于我如何捆绑 React 以确保我不会在 DOM 中获得两个单独的实例。我在导入/导出/公开加载器方面遇到了一些问题，所以我使用了脚本加载器。

In my setup I have a commons chunk that I use strictly for vendors (React / tinymce).

在我的设置中，我有一个公用块，我严格用于供应商（React / 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'
                        ]
          }

This is working for me the same way that including the script from CDN would work however I now had errors because it could not find my themes / plugins / skins paths from my node_modules location. It was looking for them at paths /assets/plugins, /assets/themes, /assets/skins(I use webpack public path /assets/).

这对我来说就像包含来自 CDN 的脚本一样有效，但是我现在遇到了错误，因为它无法从我的 node_modules 位置找到我的主题/插件/皮肤路径。它正在 path /assets/plugins, /assets/themes, /assets/skins(我使用 webpack public path /assets/)寻找它们。

I resolved the second issue by mapping express to serve these two routes statically like so (es6):

我通过映射 express 来静态地为这两条路由提供服务来解决第二个问题，就像这样（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))

After doing this window.tinymce/ window.tinyMCEare both defined and functions same as CDN.

执行此操作后，window.tinymce/window.tinyMCE都已定义且功能与 CDN 相同。

Answer 5

回答by Ruslan Zhomir

As an addition to this answer(thanks to Petri Ryh?nen), I want to add my copyWebpackPluginand tinymce.init()configuration adjustments.

作为这个答案的补充（感谢Petri Ryh?nen），我想添加我的copyWebpackPlugin和tinymce.init()配置调整。

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

With this configuration you will get all skin files in {output}/tinymce/skinfolder.

使用此配置，您将获得文件{output}/tinymce/skin夹中的所有皮肤文件。

Then you can initialize tinymce like this:

然后你可以像这样初始化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
});

With this I have both development and production builds working normally.

有了这个，我的开发和生产版本都可以正常工作。

Answer 6

回答by Joscha

We use TinyMCE jQuery 4.1.6 and the accepted answer did not work for us because windowseems to be used in other locations by TinyMCE (e.g. window.setTimeout). Also, documentnot being shimmed seemed to cause problems.

我们使用 TinyMCE jQuery 4.1.6 并且接受的答案对我们不起作用，因为windowTinyMCE 似乎在其他位置使用（例如 window.setTimeout）。此外，document没有被填充似乎会引起问题。

This works for us:

这对我们有用：

alias: {
    'tinymce': 'tinymce/tinymce.jquery.js'
}

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

Load your plugins like this:

像这样加载你的插件：

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

Javascript 如何在 webpack 中填充 tinymce？

提问by Rob Johansen

采纳答案by Alexandre Kirszenberg

回答by Petri Ryh?nen

回答by Florian Cremer

回答by cchamberlain

回答by Ruslan Zhomir

回答by Joscha

相关推荐

最近更新

标签

Javascript 如何在 webpack 中填充 tinymce？

提问by Rob Johansen

采纳答案by Alexandre Kirszenberg

回答by Petri Ryh?nen

回答by Florian Cremer

回答by cchamberlain

回答by Ruslan Zhomir

回答by Joscha

相关推荐

使用 JavaScript 进行服务器轮询

Javascript Angular 8 - 延迟加载模块：错误 TS1323：仅当“--module”标志为“commonjs”或“esNext”时才支持动态导入

如何在 JavaScript 循环中添加延迟？

Javascript 单击外部时隐藏 Angular UI Bootstrap 弹出框

相关推荐

最近更新

标签