---
title: "CKEditor Plugin Development"
manual: "RTE CKEditor Image"
version: "main"
permalink: "https://docs.typo3.org/permalink/netresearch/rte-ckeditor-image:ckeditor-plugin-development@main"
source: "CKEditor/Index.rst"
rendered: "2026-10-01T01:27:51+00:00"
---

# CKEditor Plugin Development {#ckeditor-plugin-development}

Complete documentation for the CKEditor 5 plugin implementation.

The typo3image plugin is a custom CKEditor 5 plugin that integrates TYPO3's File Abstraction Layer (FAL) with the rich text editor, enabling seamless image management within the CKEditor interface.

## Plugin Components {#plugin-components}

**🔌 Plugin Development**

Plugin architecture, UI components, commands, and event handling

[Read more](https://docs.typo3.org/permalink/netresearch/rte-ckeditor-image:ckeditor-plugin-development-guide@main)

**📐 Model Element**

The typo3image custom element schema, attributes, and model integration

[Read more](https://docs.typo3.org/permalink/netresearch/rte-ckeditor-image:ckeditor-model-element@main)

**🎨 Style Integration**

Style system integration with StyleUtils and GeneralHtmlSupport (critical for v13.0.0+)

[Read more](https://docs.typo3.org/permalink/netresearch/rte-ckeditor-image:ckeditor-style-integration@main)

**↔️ Conversions**

HTML ↔ Model conversion patterns for upcast and downcast transformations

[Read more](https://docs.typo3.org/permalink/netresearch/rte-ckeditor-image:ckeditor-conversions@main)

**🎚️ Image Quality Selector**

Quality multipliers, SVG support, and dimension handling

[Read more](https://docs.typo3.org/permalink/netresearch/rte-ckeditor-image:ckeditor-image-quality-selector@main)

## Quick Links {#quick-links}

### Getting Started {#getting-started}

1.  Read [CKEditor Plugin Development](https://docs.typo3.org/permalink/netresearch/rte-ckeditor-image:ckeditor-plugin-development-guide@main) for overall structure
1.  Understand [CKEditor Model Element Reference](https://docs.typo3.org/permalink/netresearch/rte-ckeditor-image:ckeditor-model-element@main) for data handling
1.  Study [CKEditor Conversion System](https://docs.typo3.org/permalink/netresearch/rte-ckeditor-image:ckeditor-conversions@main) for HTML transformation

### Common Tasks {#common-tasks}

-   **Add custom attributes** → See [CKEditor Model Element Reference](https://docs.typo3.org/permalink/netresearch/rte-ckeditor-image:ckeditor-model-element@main)
-   **Implement custom styles** → See [CKEditor Style Integration](https://docs.typo3.org/permalink/netresearch/rte-ckeditor-image:ckeditor-style-integration@main)
-   **Debug conversion issues** → See [CKEditor Conversion System](https://docs.typo3.org/permalink/netresearch/rte-ckeditor-image:ckeditor-conversions@main)
-   **Extend plugin features** → See [CKEditor Plugin Development](https://docs.typo3.org/permalink/netresearch/rte-ckeditor-image:ckeditor-plugin-development-guide@main)

## Critical Information {#critical-information}

### Version 13.0.0+ Requirements {#version-13-0-0-requirements}

The plugin **requires** these CKEditor dependencies:

```javascript
static get requires() {
    return ['StyleUtils', 'GeneralHtmlSupport'];
}
```

> [!WARNING]
> Missing either dependency will disable style functionality. See [CKEditor Style Integration](https://docs.typo3.org/permalink/netresearch/rte-ckeditor-image:ckeditor-style-integration@main) for details.

## Related Documentation {#related-documentation}

-   [API Documentation](https://docs.typo3.org/permalink/netresearch/rte-ckeditor-image:api-documentation@main) \- PHP backend integration
-   [Integration & Configuration](https://docs.typo3.org/permalink/netresearch/rte-ckeditor-image:integration@main) \- Plugin configuration
-   [Examples & Use Cases](https://docs.typo3.org/permalink/netresearch/rte-ckeditor-image:examples-common-use-cases@main) \- Practical implementation examples