Come spremere tinymce nel webpack?

Question

Sto cercando di ottenere tinymce riconosciuto da webpack. Imposta una proprietà denominata tinymce su window, così evidentemente una possibilità è quella require() utilizzando la sintassi simile a questo (descritto in fondo la EXPORTING section dei documenti WebPack):

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

Ma in questo esempio, come è ./file.js risolto? Ho installato tinymce via npm e non riesco a capire come specificare il percorso corretto per il file tinymce.js.

Indipendentemente da ciò, preferirei gestire questo nella mia configurazione ed essere in grado di appena require('tinymce'), se possibile, in modo da ho installato exports-loader e aggiunto il testo seguente la mia configurazione (Basato su this discussion):

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

Sfortunatamente questo non funziona. Cosa c'è di sbagliato nella mia configurazione?

Answer 1

Il modulo stagno su npm non può essere richiesto direttamente, ma contiene 4 diverse distribuzioni della libreria. Vale a dire:

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

Per essere in grado di fare require('tinymce') nel codice, è possibile aggiungere an alias nella propria configurazione webpack, così come un caricatore personalizzato per la tua distribuzione di scelta.

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

Dove è possibile sostituire tinymce/tinymce con la vostra distribuzione di scelta.

Answer 2

Usiamo TinyMCE jQuery 4.1.6 e la risposta accettata non ha funzionato per noi, perché window sembra essere utilizzati in altre posizioni di TinyMCE (ad esempio window.setTimeout). Inoltre, document non viene visualizzato potrebbe causare problemi.

questo funziona per noi:

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

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

Caricare i plugin in questo modo:

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

Answer 3

ho ottenuto questo al lavoro simile a come mi raggrupparli in fasci reagire a garantire non ho ricevuto due istanze separate nel DOM. Ho avuto alcuni problemi con import/export/expose loader quindi ho usato script-loader.

Nella mia installazione ho un pezzo comune che uso strettamente per i fornitori (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' 
         ] 
      } 

Questo sta lavorando per me allo stesso modo che compreso lo script da CDN funzionerebbe comunque ora avevo errori, perché non riusciva a trovare i miei percorsi temi/plugins/pelli dalla mia posizione node_modules. Li cercavo nei percorsi /assets/plugins, /assets/themes, /assets/skins (utilizzo il percorso pubblico webpack /assets/).

ho risolto il secondo problema mappatura esprimere per servire questi due percorsi staticamente in questo modo (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)) 

Dopo aver fatto questo window.tinymce/window.tinyMCE sono entrambi definiti e funzioni stesse CDN.

Answer 4

Proprio come @cchamberlain ho finito per usare lo script loader per TinyMCE, ma per caricare i plugin e altre risorse che non sono state richieste di default ho usato CopyWebpackPlugin invece di ES6 per soluzione più configurabile.

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 5

sono stato in grado di integrare TinyMCE nel mio angolare progetto basato 2/dattiloscritto utilizzando l'importazioni e le esportazioni-loader-loader e la copia-webpack-plugin.

prima assicurarsi che le dipendenze necessarie sono disponibili e parte del file packages.json del progetto:

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

quindi aggiungere il caricatore di richiesta per l'caricatori sezione della configurazione webpack:

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

per rendere il copyWebpackPlugin disponibili nella configurazione webpack, importare nella parte di intestazione del file di configurazione webpack:

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

E, come ha commentato Petri Ryhänen, aggiungere la seguente voce al plug-sezione di configurazione del 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' } 
    ]) 
] 

Questo passaggio garantisce che (obbligatorio) Il mondo di TinyMCE sono disponibili nella vostra webpack anche.

Infine per importare TinyMCE nel file 2 componente angolare, aggiungere

require('tinymce') 

declare var tinymce: any; 

alla sezione importazione e TinyMCE è pronto per l'uso.

Answer 6

In aggiunta a this answer (grazie a Petri Ryhänen), voglio aggiungere le mie regolazioni di configurazione copyWebpackPlugin e tinymce.init().

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

Con questa configurazione si ottengono tutti i file nella cartella di pelle {output}/tinymce/skin.

Quindi è possibile inizializzare TinyMCE come questo:

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

Con questo ho sia sviluppo e la produzione costruisce a lavorare normalmente.