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 (
{
console.log( 'Editor1 is ready to use!', editor );
} }
onChange={ ( event, editor ) => {
const data = editor.getData();
console.log( { event, editor, data } );
} }
/>
);
}
}
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
