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

Nuevas/ publicaciones

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.

seguir leyendo

Proyecto Vanilla JS + Sass con Vite

Crearemos un proyecto para trabajar con vanilla sin el uso de ningún framework e incluiremos el módulo de sass para trabajar con los estilos.

seguir leyendo

Convertir página web a diseño con Figma

Figma es una herramienta de trabajo colaborativo que sirve para diseñar interfaces de usuario. La aplicación ofrece la posibilidad de instalar extensiones para agilizar algunas tareas.

seguir leyendo