Instalación de plugins en Ckeditor 5

Los complementos de CKEditor 5 se distribuyen a través de paquetes npm y se implementan de forma modular, lo que significa que un solo complemento puede constar de varios archivos JavaScript.

Requisitos

Para comenzar a desarrollar CKEditor 5, necesitará:

• Node.js 14.0.0+
• npm 5.7.1+ ( nota: se sabía que algunas versiones de npm 5+ causaban problemas , especialmente con la deduplicación de paquetes; actualice npm en caso de duda)

Agregar un complemento a una compilación

La adición de plugins a las construcciones predefinidas existentes se realiza mediante su personalización. Las compilaciones predefinidas del editor se mantienen en sus respectivos repositorios de GitHub. Por lo tanto, suponiendo que desea personalizar la compilación del editor clásico , debe:

1. Clonar el repositorio de compilación.
2. Instalar el paquete de complementos.
3. Agrégalo a la configuración de compilación.
4. Empaquetar la compilación.

git clone -b stable https://github.com/ckeditor/ckeditor5

cd ckeditor5/packages/ckeditor5-build-classic
npm install

Ahora, instale el paquete del plugin que desea instalar (Para este ejemplo vamos a instalar el plugin ckeditor5-alignment):

npm install --save-dev @ckeditor/ckeditor5-alignment

Edite el src/ckeditor.js archivo para agregar su plugin a la lista de plugins que se incluirán en la compilación y para agregar el botón de su función a la barra de herramientas:

// The editor creator to use.
import ClassicEditorBase from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';

import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
import UploadAdapter from '@ckeditor/ckeditor5-adapter-ckfinder/src/uploadadapter';
import Autoformat from '@ckeditor/ckeditor5-autoformat/src/autoformat';
import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
import BlockQuote from '@ckeditor/ckeditor5-block-quote/src/blockquote';
import EasyImage from '@ckeditor/ckeditor5-easy-image/src/easyimage';
import Heading from '@ckeditor/ckeditor5-heading/src/heading';
import Image from '@ckeditor/ckeditor5-image/src/image';
import ImageCaption from '@ckeditor/ckeditor5-image/src/imagecaption';
import ImageStyle from '@ckeditor/ckeditor5-image/src/imagestyle';
import ImageToolbar from '@ckeditor/ckeditor5-image/src/imagetoolbar';
import ImageUpload from '@ckeditor/ckeditor5-image/src/imageupload';
import Link from '@ckeditor/ckeditor5-link/src/link';
import List from '@ckeditor/ckeditor5-list/src/list';
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';

import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment';     // <--- ADDED

export default class ClassicEditor extends ClassicEditorBase {}

// Plugins to include in the build.
ClassicEditor.builtinPlugins = [
    Essentials,
    UploadAdapter,
    Autoformat,
    Bold,
    Italic,
    BlockQuote,
    EasyImage,
    Heading,
    Image,
    ImageCaption,
    ImageStyle,
    ImageToolbar,
    ImageUpload,
    Link,
    List,
    Paragraph,
    Alignment                                                            // <--- ADDED
];

// Editor configuration.
ClassicEditor.defaultConfig = {
    toolbar: {
        items: [
            'heading',
            '|',
            'alignment',                                                 // <--- ADDED
            'bold',
            'italic',
            'link',
            'bulletedList',
            'numberedList',
            'uploadImage',
            'blockQuote',
            'undo',
            'redo'
        ]
    },
    image: {
        toolbar: [
            'imageStyle:inline',
            'imageStyle:block',
            'imageStyle:side',
            '|',
            'toggleImageCaption',
            'imageTextAlternative'
        ]
    },
    // This value must be kept in sync with the language defined in webpack.config.js.
    language: 'en'
};

Finalmente, agrupa la compilación:

npm run build

Si todo funcionó, la compilación del editor (que está disponible en el build/directorio) debe actualizarse.

Puede abrir el sample/index.htmlarchivo en su navegador para ver si el complemento se instaló correctamente.

Esta fue una versión rápida de cómo se puede personalizar una compilación. Obtenga más información sobre cómo personalizar compilaciones de editores existentes en una guía aparte.