Ich versuche, tinymce vom Webpack zu erkennen. Es legt eine Eigenschaft mit dem Namen tinymce
für window
fest. Offensichtlich besteht eine Option darin, require()
mit folgender Syntax zu verwenden (siehe unten im Abschnitt EXPORTING der Webpack-Dokumente):
require("imports?window=>{}!exports?window.XModule!./file.js
Aber wie wird ./file.js
in diesem Beispiel gelöst? Ich habe tinymce über npm installiert und kann nicht den richtigen Pfad zur tinymce.js
-Datei angeben.
Unabhängig davon würde ich lieber in meiner Konfiguration damit umgehen und in der Lage sein, wenn möglich nur require('tinymce')
zu verwenden, also habe ich exports-loader
installiert und meiner Konfiguration Folgendes hinzugefügt (basierend auf dieser Diskussion ):
module: {
loaders: [
{
test: /[\/]tinymce\.js$/,
loader: 'exports?tinymce'
}
]
}
Leider funktioniert das nicht. Was ist los mit meiner Konfiguration?
Das tinymce-Modul auf npm kann nicht direkt benötigt werden, enthält jedoch 4 verschiedene Distributionen der Bibliothek. Nämlich:
tinymce/tinymce.js
tinymce/tinymce.min.js
tinymce/tinymce.jquery.js
tinymce/tinymce.jquery.min.js
Um require('tinymce')
in Ihrem Code ausführen zu können, können Sie einen Alias in Ihrer Webpack-Konfiguration sowie einen benutzerdefinierten Loader für Ihre gewünschte Distribution hinzufügen.
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',
},
],
},
Wo Sie tinymce/tinymce
durch Ihre gewünschte Distribution ersetzen können.
Genau wie bei @cchamberlain habe ich am Ende den Script Loader für Tinymce verwendet. Um Plugins und andere Ressourcen zu laden, die nicht standardmäßig erforderlich waren, habe ich CopyWebpackPlugin anstelle von ES6 als konfigurierbare Lösung verwendet.
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' }
])
]
};
Ich konnte tinyMCE in mein auf Angular 2/TypeScript basierendes Projekt integrieren, indem ich den Import-Loader und Export-Loader und das Copy-Webpack-Plugin verwendete.
Stellen Sie zunächst sicher, dass die erforderlichen Abhängigkeiten verfügbar sind und Teil der packages.json-Datei Ihres Projekts sind:
npm i tinymce --save
npm i exports-loader --save-dev
npm i imports-loader --save-dev
npm i copy-webpack-plugin --save-dev
Fügen Sie dann den erforderlichen Loader zum Loaders-Abschnitt Ihrer Webpack-Konfiguration hinzu:
loaders: [
{
test: require.resolve('tinymce/tinymce'),
loaders: [
'imports?this=>window',
'exports?window.tinymce'
]
},
{
test: /tinymce\/(themes|plugins)\//,
loaders: [
'imports?this=>window'
]
}]
Um das copyWebpackPlugin in Ihrer Webpack-Konfiguration verfügbar zu machen, importieren Sie es in den Header-Teil der Webpack-Konfigurationsdatei:
var copyWebpackPlugin = require('copy-webpack-plugin');
Fügen Sie, wie Petri Ryhänen kommentiert, den folgenden Eintrag zum Plugins-Abschnitt Ihrer Webpack-Konfiguration hinzu:
plugins: [
new copyWebpackPlugin([
{ from: './node_modules/tinymce/plugins', to: './plugins' },
{ from: './node_modules/tinymce/themes', to: './themes' },
{ from: './node_modules/tinymce/skins', to: './skins' }
])
]
Dieser Schritt stellt sicher, dass (erforderliche) Addons von tinyMCE auch in Ihrem Webpack verfügbar sind.
Fügen Sie anschließend tinyMCE in Ihre Angular 2-Komponentendatei ein
require('tinymce')
declare var tinymce: any;
im Importbereich ist tinyMCE einsatzbereit.
Ich verstand das so, als würde ich React bündeln, um sicherzustellen, dass ich nicht zwei separate Instanzen in DOM bekomme. Ich hatte einige Probleme mit Import/Export/Expose Loader, also habe ich stattdessen Script-Loader verwendet.
In meinem Setup habe ich ein Commons-Stück, das ich strikt für Anbieter verwende (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'
]
}
Dies funktioniert für mich auf die gleiche Weise, dass das Skript von CDN funktionieren würde, aber ich hatte jetzt Fehler, weil es meine Themes/Plugins/Skins-Pfade von meinem node_modules-Speicherort nicht finden konnte. Es wurde nach Pfaden /assets/plugins
, /assets/themes
, /assets/skins
(ich verwende den öffentlichen Pfad des Webpacks /assets/
) gesucht.
Ich habe das zweite Problem gelöst, indem wir express so abbilden, dass diese beiden Routen statisch verwendet werden (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))
Danach sind window.tinymce
/window.tinyMCE
definiert und funktionieren genauso wie das CDN.
Als Ergänzung zu dieser Antwort (Dank an Petri Ryhänen ) möchte ich meine copyWebpackPlugin
- und tinymce.init()
-Konfigurationseinstellungen hinzufügen.
new copyWebpackPlugin([{
context: './node_modules/tinymce/skins/lightgray',
from: './**/*',
to: './tinymce/skin',
}]),
Mit dieser Konfiguration erhalten Sie alle Skin-Dateien im Ordner {output}/tinymce/skin
.
Dann können Sie Tinymce folgendermaßen initialisieren:
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
});
Damit habe ich sowohl Entwicklungs- als auch Produktions-Builds normal.