---
title: "CKEditor Plugin Development"
manual: "RTE CKEditor Image"
version: "13.1"
permalink: "https://docs.typo3.org/permalink/netresearch/rte-ckeditor-image:ckeditor-plugin-development@13.1"
source: "CKEditor/Index.rst"
rendered: "2026-09-30T07:04:17+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@13.1)

**📐 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@13.1)

**🎨 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@13.1)

**↔️ Conversions**

HTML ↔ Model conversion patterns for upcast and downcast transformations

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

**🎚️ 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@13.1)

## 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@13.1) for overall structure
1.  Understand [CKEditor Model Element Reference](https://docs.typo3.org/permalink/netresearch/rte-ckeditor-image:ckeditor-model-element@13.1) for data handling
1.  Study [CKEditor Conversion System](https://docs.typo3.org/permalink/netresearch/rte-ckeditor-image:ckeditor-conversions@13.1) 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@13.1)
-   **Implement custom styles** → See [CKEditor Style Integration](https://docs.typo3.org/permalink/netresearch/rte-ckeditor-image:ckeditor-style-integration@13.1)
-   **Debug conversion issues** → See [CKEditor Conversion System](https://docs.typo3.org/permalink/netresearch/rte-ckeditor-image:ckeditor-conversions@13.1)
-   **Extend plugin features** → See [CKEditor Plugin Development](https://docs.typo3.org/permalink/netresearch/rte-ckeditor-image:ckeditor-plugin-development-guide@13.1)

## 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@13.1) for details.

## Related Documentation {#related-documentation}

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