web-dev-qa-db-fra.com

Comment utiliser CKEditor en tant que module NPM construit avec webpack ou similaire

Comment utiliser CKEditor de npm avec webpack?

Idéalement, je veux npm install ckeditor --save puis var CK = require('ckeditor'); sans aucune pollution globale des espaces de noms.

ckeditor
17
Chris

Le problème

Autant que je sache, il n’est actuellement pas possible de charger CKEDITOR directement dans un pack Web en tant que chunck sans générer d’erreurs, en particulier lors du démarrage du chargement de plugins supplémentaires. Une des raisons de ceci semble être que ckeditor fait ses propres requêtes asynchrones au moment de l’exécution, ce qui provoque diverses choses dans presque toutes les implémentations que j’ai essayées.

La solution

Utilisez scriptjs pour le charger en tant que bibliothèque externe.

npm install scriptjs --save

Maintenant, dans votre code, vous pouvez l'appeler comme suit:

var $s = require('scriptjs');
$s('./vendor/ckeditor/ckeditor.js', function(){
    CKEDITOR.replace('editor1');
});

S'il vous plaît noter.

Cela ne fonctionnera pas sur la source non compressée car les fonctions de ckeditor ne se trouvent pas directement dans le fichier ckeditor.js. Cela entraînera le reste de votre logique à s'exécuter avant que l'objet CKEDITOR ne soit entièrement construit en raison de requêtes réseau inachevées.

Si vous souhaitez modifier le code source de CKEDITOR clone https://github.com/ckeditor/ckeditor-dev et exécuter son script de construction pour obtenir une version personnalisée fonctionnelle.

Il semble que CKEditor adopte ES6 dans la version 5 et je suppose qu’ils auront le support Webpack dans cette version, mais qui sait combien de temps il sera en développement avant sa sortie.

S'il y a une meilleure façon de le faire, s'il vous plaît faites le moi savoir.

11
Dieter Gribnitz

Il est possible d’utiliser CKEditor avec Webpack, vous devez donc regrouper avec Webpack les fichiers CKEditor qui seront chargés à partir du navigateur, tels que les plugins et les fichiers de langue.

Ceci est fait avec la require.context() api.

Créez votre propre module Webpack et nommez-le ckeditor_loader avec les fichiers suivants:

/* index.js */

import './loader.js'
import 'ckeditor/ckeditor'

// You can replace this with you own init script, e.g.:
// - jQuery(document).ready()
window.onload = function () {
  window.CKEDITOR.replaceAll()
}

-

/* loader.js */

window.CKEDITOR_BASEPATH = `/node_modules/ckeditor/` # This should beging with your `output.publicPath` Webpack option. 

// Load your custom config.js file for CKEditor.
require(`!file-loader?context=${__dirname}&outputPath=node_modules/ckeditor/&name=[path][name].[ext]!./config.js`)

// Load files from ckeditor.
require.context(
  '!file-loader?name=[path][name].[ext]!ckeditor/',
  true,
  /.*/
)

-

/* config.js */

window.CKEDITOR.editorConfig = function (config) {
  // Define changes to default configuration here.
  // For complete reference see:
  // http://docs.ckeditor.com/#!/api/CKEDITOR.config
}

Maintenant, assurez-vous que votre module est chargé:

// Include somewhere in your webpack loader file:
import 'ckeditor_loader'

Ceci est une implémentation très basique. J'ai écrit un didacticiel plus complet qui permet des temps de compilation plus rapides et davantage d'options de personnalisation: Comment utiliser CKEditor 4 avec Webpack

5
Federico JM

Installer

npm install ckeditor --save-dev

Charge

require('ckeditor');

Après le chargement, chkeditor devient disponible en tant que variable globale CKEDITOR

Remplacer

CKEDITOR.replace('elementId');

Problèmes

CKeditor ne prend pas correctement en charge Webpack. Puisque l'éditeur charge ses propres fichiers css/js, vous serez probablement confronté à ce problème. Vous pouvez essayer de vous référer à la version CDN pour ces ressources. Ou vous pouvez essayer de copier le répertoire CKeditor avec Webpack dans le dossier public accessible. Définissez le chemin des fichiers avec CKEDITOR_BASEPATH.

window.CKEDITOR_BASEPATH    = '//cdn.ckeditor.com/4.6.2/full-all/';
3
Joepie

CK Editor 5 peut être facilement utilisé avec webpack: https://docs.ckeditor.com/ckeditor5/latest/framework/guides/quick-start.html

Bien qu'il faille noter qu'en février 2018, il est toujours en alpha2: https://github.com/ckeditor/ckeditor5#packages

J'ai été capable de démarrer avec Rails et Webpacker en utilisant les éléments suivants:

yarn add \
    css-loader  \
    node-sass \
    raw-loader \
    sass-loader \
    style-loader

yarn add \
    @ckeditor/ckeditor5-editor-classic \
    @ckeditor/ckeditor5-essentials \
    @ckeditor/ckeditor5-paragraph \
    @ckeditor/ckeditor5-basic-styles

Dans le code que j'ai copié directement à partir du guide de démarrage rapide:

import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor'
import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials'
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph'
import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold'
import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic'

const element = document.getElementById('editor')

ClassicEditor.create(element, {
  plugins: [Essentials, Paragraph, Bold, Italic],
  toolbar: ['bold', 'italic']
})
.then(editor => {
  console.log('Editor was initialized', editor)
})
.catch(error => {
  console.error(error.stack)
})

Enfin, j'ai dû ajouter un chargeur pour les icônes de ckeditor svg, conformément au guide de démarrage rapide. J'ai utilisé la référence webpacker ici pour cela https://github.com/Rails/webpacker/blob/master/docs/webpack.md#react-svg-loader

// config/webpacker/environment.js
const { environment } = require('@Rails/webpacker')

environment.loaders.insert('svg', {
  test: /ckeditor5-[^/]+\/theme\/icons\/[^/]+\.svg$/,
  use: 'raw-loader'
}, { after: 'file' })

const fileLoader = environment.loaders.get('file')
fileLoader.exclude = /ckeditor5-[^/]+\/theme\/icons\/[^/]+\.(svg)$/i

module.exports = environment
1
Paul Odeon