Configurazione gulp TinyMCE

Question

Sto costruendo un'applicazione Web e desidero utilizzare TinyMCE. Sto usando gulp e browserify. Ho scaricato TinyMCE tramite npm e ne ho richiesto il file app.js e ho eseguito il comando gulp ma ho ricevuto questo errore Failed to load: root/js/themes/modern/theme.js. Penso che questo sia dovuto al fatto che TinyMCE ha bisogno di file aggiuntivi dalla sua cartella. La mia domanda è come configurare TinyMCE per cercare quei file nella cartella node_modules/tinymce.

Answer 1

La risposta qui dipende completamente da come si impacchettano i file nel build Gulp. Sto ancora lavorando allo stesso problema in questo momento, ma ecco un suggerimento che potrebbe aiutarti.

Nel mio caso, sto utilizzando il plug-in main-bower-files per leggere la mia configurazione di Bower e quindi restituire un flusso di tutti i file JS principali da tutte le mie dipendenze che ho installato con Bower. Ecco come si presenta:

var mainBowerFiles = require('main-bower-files'); 

gulp.task('vendor-src', function() { 
    return gulp.src(mainBowerFiles('**/*.js') 
    .pipe(uglify()) 
    .pipe(concat('main.min.js')) 
    .pipe(gulp.dest('dist/')) 
}); 

Purtroppo, questo non prendere uno qualsiasi dei file TinyMCE, che sono installati nella mia directory bower_components, perché il 'TinyMCE' installato tramite Bower non viene fornito con un file package.json . Penso che questo sia dovuto alla possibilità di scegliere tra le versioni regolari e jQuery di TinyMCE, che sono entrambe nel pacchetto.

Ho dovuto cambiare il mio compito Gulp da sopra per farlo prendere il codice sorgente TinyMCE che voglio (la versione jQuery). Tale versione è simile al seguente:

var mainBowerFiles = require('main-bower-files'); 

gulp.task('vendor-src', function() { 
    return gulp.src(
    mainBowerFiles('**/*.js', { 
     "overrides": { 
      "tinymce": { 
      "main": ["tinymce.jquery.js", "plugins/**/*.js", "themes/**/*.js"] 
      } 
     }) 
    .pipe(uglify()) 
    .pipe(concat('main.min.js')) 
    .pipe(gulp.dest('dist/')) 
});  

che includerà tutti i file JS associati TinyMCE e aggiungerli alla lista "file principali Bower".

Questa è solo una soluzione parziale, anche perché devi anche prendere i file CSS e font TinyMCE. E se la compilazione è completamente diversa o se non utilizzi il plug-in del file principale, ciò potrebbe non essere d'aiuto.

Answer 2

Avevo un problema aperto con l'autore main-bower-files che si scoraggiava l'uso di esso insieme a TinyMCE, probabilmente a causa del gran numero di file aggiuntivi che devono essere inclusi (?). Vedi il seguente issue su Github.

Ho finito per copiare la cartella tinymce sul mio dist/ attraverso un semplice compito. Io uso Bower e percorsi diversi probabilmente, ma si ottiene l'idea

gulp.task('bower-tinymce', function() { 

    //Copy resources from tinymce-dist that didn't make it in the bower-files 
    return gulp.src('src/main/resources/static/bower_components/tinymce-dist/**/*').pipe(gulp.dest('src/main/resources/static/dist/tinymce')); 

});