wake-up-neo.com

Wie kann man Tinymce im Webpack einplanen?

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?

javascriptnode.jstinymcewebpackshim
12
Rob Johansen

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.

9
Alexandre Kirszenberg

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' }
    ])
  ]
};
7
Petri Ryhänen

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.

4
Florian Cremer

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.

3
cchamberlain

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.

1
Ruslan Zhomir