example - ckeditor5 custom plugin

Cómo usar CKEditor como un módulo NPM construido con webpack o similar

Question

¿Cómo puedo usar CKEditor desde npm con webpack?

Idealmente, quiero que npm install ckeditor --save luego var CK = require(''ckeditor''); sin ningún tipo de contaminación del espacio de nombres global.

Answer 1

Instalar

npm install ckeditor --save-dev

Carga

require(''ckeditor'');

Después de cargar chkeditor estará disponible como variable global CKEDITOR

Reemplazar

CKEDITOR.replace(''elementId'');

Cuestiones

CKeditor no tiene soporte adecuado para webpack. Dado que el editor carga sus propios archivos css / js, lo más probable es que encuentre este problema. Puede intentar consultar la versión de CDN para esos recursos. O puede intentar copiar el directorio CKeditor con el paquete web en la carpeta accesible al público. Defina la ruta de los archivos con CKEDITOR_BASEPATH .

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

Answer 2

CK Editor 5 se puede usar fácilmente con el paquete web: https://docs.ckeditor.com/ckeditor5/latest/framework/guides/quick-start.html

Aunque debe tenerse en cuenta que a partir de febrero de 2018 todavía está en alpha2: https://github.com/ckeditor/ckeditor5#packages

Pude comenzar con Rails y webpacker usando lo siguiente:

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

En el código que copié directamente de la guía de inicio rápido:

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

Finalmente, tuve que agregar un cargador para los iconos de ckeditor svg según la guía de inicio rápido. Usé la referencia de webpacker aquí para eso 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

Answer 3

CKEditor fue publicado en NPM .

Ahora puedes usar exactamente los comandos que quieras.

Instalar

npm install ckeditor --save-dev

Inyectar

var CK = require(''ckeditor'');

Answer 4

Es posible usar CKEditor con Webpack, requiere que se incluya en el paquete Web que los archivos de CKEditor se cargarán desde el navegador, como complementos y archivos de idioma.

Se hace con la api require.context() .

Cree su propio módulo de Webpack y asígnele el nombre ckeditor_loader con los siguientes archivos:

/* 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
}

Ahora asegúrese de que su módulo está cargado:

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

Esta es una implementación muy básica. Escribí un tutorial más extenso, que permite tiempos de compilación más rápidos y más opciones de personalización: Cómo usar CKEditor 4 con Webpack

Answer 5

El problema

Por lo que puedo decir, actualmente no es posible cargar CKEDITOR directamente en el paquete web como un chunck sin obtener algunos errores, especialmente al comenzar a cargar complementos adicionales. Una de las razones para esto parece ser que ckeditor hace sus propias solicitudes asíncronas en el tiempo de ejecución, lo que provoca que se interrumpan varias cosas en casi todas las implementaciones que he intentado.

La solución

Use scriptjs para cargarlo como una biblioteca externa.

npm install scriptjs --save

Ahora en tu código puedes llamarlo así:

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

Tenga en cuenta.

Esto no funcionará en la fuente no comprimida porque las funciones de ckeditor no están directamente en el archivo ckeditor.js. Esto hará que el resto de su lógica se ejecute antes de que el objeto CKEDITOR esté completamente construido debido a las solicitudes de red no finalizadas.

Si desea modificar el código fuente de CKEDITOR clone https://github.com/ckeditor/ckeditor-dev y ejecute su script de compilación para obtener una versión personalizada que funcione.

Parece que CKEditor está adoptando ES6 en la versión 5 y sospecho que tendrán compatibilidad con paquetes web en esta versión, pero quién sabe cuánto tiempo estará en desarrollo antes de su lanzamiento.

Si hay una mejor manera de hacerlo, hágamelo saber.