Incluir CKEditor 5 en proyecto 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 5

Puedes instalar CKEditor 5 con NPM usando el siguiente comando en tu terminal:

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

Este comando instalará la última versión de CKEditor 5 y una versión preconfigurada de Classic Editor.

Configurar CKEditor en aplicación de React

En el archivo de configuración de Vite, debemos importar y configurar CKEditor 5 para que se pueda usar en la aplicación de React. 

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

Importamos los módulos necesarios.

				
					import React, { useState } from 'react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import { CKEditor } from '@ckeditor/ckeditor5-react';

Incluimos el componente <CKEditor> en el proyecto.

				
					function App() {
  const [editorData, setEditorData] = useState('');

  const handleEditorDataChange = (event: any, editor: any) => {
    const data = editor.getData();
    setEditorData(data);
  };

  return (
    <div>
      <h2>Editor de texto</h2>
      <CKEditor
        editor={ClassicEditor}
        data={editorData}
        onChange={handleEditorDataChange}
      />
    </div>
  );
}

En el código anterior, estamos importando los módulos necesarios de CKEditor y luego configurando el componente CKEditor en nuestra aplicación. El componente CKEditor necesita tres propiedades:

  • editor: Esta propiedad es la instancia del editor de CKEditor 5 que quieres utilizar. En nuestro caso, estamos utilizando ClassicEditor.

  • data: Esta propiedad es la información inicial del editor. En nuestro caso, estamos inicializando el editor con una cadena vacía.

  • onChange: Esta propiedad es una función que se ejecuta cada vez que cambia el contenido del editor. En nuestro caso, estamos actualizando el estado del editor con la nueva información.

Para el ejemplo también veremos cómo incluir algunos plugins en el editor por lo que necesitaremos algunas dependencias específicas.

				
					npm i @ckeditor/ckeditor5-editor-classic
npm i @ckeditor/ckeditor5-basic-styles
npm i @ckeditor/ckeditor5-essentials
npm i @ckeditor/ckeditor5-paragraph
npm i @ckeditor/ckeditor5-block-quote
npm i @ckeditor/ckeditor5-link
npm i @ckeditor/ckeditor5-image
npm i @ckeditor/ckeditor5-link
npm i @ckeditor/ckeditor5-media-embed

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

Para finalizar, ejecutamos la aplicación de React con el comando de Vite.

				
					npm run dev

Resultado

Facebook
Twitter
LinkedIn

Nuevas/ publicaciones

ir al blog

Nuevas/ publicaciones