Incluir CKEditor 5 en proyecto de React y Typescript con Vite

Para el ejemplo utilizaremos CKEditor 5 dentro de un proyecto de ReactJS + Typescript generado con ViteJS.

CKEditor es un editor de texto HTML/ WYSIWYG de código abierto que proporciona funciones de procesador de texto en páginas web.

Nuevo proyecto

Creamos nuevo proyecto con Vite utilizando el siguiente comando.

				
					npm create vite
				
			

Framework y Template

Seleccionamos React y Typescript.

Instalación de dependencias

Entramos en el proyecto e instalamos paquete y sus dependencias iniciales.

				
					cd nombre-proyecto
npm install
				
			

Instalamos CKEditor.

				
					npm install --save --save-exact @ckeditor/ckeditor5-react @ckeditor/ckeditor5-build-classic
				
			

Como veremos más adelante también necesitaremos algunas dependencias específicas para el editor.

				
					@ckeditor/ckeditor5-editor-classic/src/classiceditor
@ckeditor/ckeditor5-basic-styles/src/bold
@ckeditor/ckeditor5-basic-styles/src/italic
@ckeditor/ckeditor5-essentials/src/essentials
@ckeditor/ckeditor5-paragraph/src/paragraph
@ckeditor/ckeditor5-block-quote/src/blockquote
@ckeditor/ckeditor5-link/src/link
@ckeditor/ckeditor5-image/src/imageinsert
@ckeditor/ckeditor5-image/src/image
@ckeditor/ckeditor5-image/src/imagetoolbar
@ckeditor/ckeditor5-image/src/imagecaption
@ckeditor/ckeditor5-image/src/imagestyle
@ckeditor/ckeditor5-image/src/imageresize
@ckeditor/ckeditor5-link/src/linkimage
@ckeditor/ckeditor5-media-embed/src/mediaembed
				
			

Configuración

Modificamos el fichero de configuración de Vite  vite.config.ts 

				
					import { createRequire } from 'node:module';
const require = createRequire( import.meta.url );

import { defineConfig } from 'vite';
import ckeditor5 from '@ckeditor/vite-plugin-ckeditor5';

export default defineConfig( {
    plugins: [
        ckeditor5( { theme: require.resolve( '@ckeditor/ckeditor5-theme-lark' ) } )
    ]
} );
				
			

Incluimos el componente <CKEditor> en el proyecto.

Ejemplo

Código completo dentro de App.tsx

				
					import React, { Component } from 'react';
import { CKEditor } from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
import BlockQuotePlugin from '@ckeditor/ckeditor5-block-quote/src/blockquote';
import LinkPlugin from '@ckeditor/ckeditor5-link/src/link';
import ImageInsert from '@ckeditor/ckeditor5-image/src/imageinsert';
import Image from '@ckeditor/ckeditor5-image/src/image';
import ImageToolbar from '@ckeditor/ckeditor5-image/src/imagetoolbar';
import ImageCaption from '@ckeditor/ckeditor5-image/src/imagecaption';
import ImageStyle from '@ckeditor/ckeditor5-image/src/imagestyle';
import ImageResize from '@ckeditor/ckeditor5-image/src/imageresize';
import LinkImage from '@ckeditor/ckeditor5-link/src/linkimage';
import MediaEmbed from '@ckeditor/ckeditor5-media-embed/src/mediaembed';


class App extends Component {
    render() {
        return (
            <div className="App">
                <CKEditor
                    editor={ ClassicEditor }
                    config={ {
                        plugins: [ Paragraph, Bold, Italic, Essentials, BlockQuotePlugin, LinkPlugin, ImageInsert, Image, ImageToolbar, ImageCaption, ImageStyle, ImageResize, LinkImage, MediaEmbed  ],
                        toolbar: {
                            items: [
                                'bold',
                                'italic',
                                'link',
                                'blockQuote',
                                'insertImage',
                                'mediaEmbed',
                                'undo',
                                'redo',
                            ]
                        }
                    } }
                    data="<p>Hello from the first CKEditor working with React!</p>"
                    onReady={ (editor: any) => {
                        console.log( 'Editor1 is ready to use!', editor );
                    } }
                    onChange={ ( event, editor ) => {
                        const data = editor.getData();
                        console.log( { event, editor, data } );
                    } }
                />
            </div>
        );
    }
}

export default App;
				
			

CKEditorError

Es posible que en este punto la consola devuelva el siguiente error: 

				
					ckeditor.js:5 Uncaught CKEditorError: ckeditor-duplicated-modules: Some CKEditor 5 modules are duplicated. Read more: https://ckeditor.com/docs/ckeditor5/latest/framework/guides/support/error-codes.html#error-ckeditor-duplicated-modules ...
				
			

Para solucionarlo creamos un nuevo fichero con nombre vite-env.d.ts dentro del directorio src.

				
					declare module '@ckeditor/ckeditor5-react';
declare module '@ckeditor/ckeditor5-build-classic';
declare module '@ckeditor/*' {
    const classes: any;
    export default classes;
  }
				
			

Resultado

Facebook
Twitter
LinkedIn

Nuevas/ publicaciones

Nuevas/ publicaciones