PHPackages                             sebkln/ckeditor-wordbreak - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility &amp; Helpers](/categories/utility)
4. /
5. sebkln/ckeditor-wordbreak

ActiveTypo3-cms-extension[Utility &amp; Helpers](/categories/utility)

sebkln/ckeditor-wordbreak
=========================

Adds the &lt;wbr&gt; HTML element to CKEditor 5 in TYPO3. If set in a long word, the browser may break a line (without adding a hyphen character). Useful e.g. for long URLs and file paths.

2.1.2(2mo ago)333.7k↓23.5%2GPL-2.0-or-laterJavaScript

Since Sep 12Pushed 2mo ago1 watchersCompare

[ Source](https://github.com/sebkln/ckeditor_wordbreak)[ Packagist](https://packagist.org/packages/sebkln/ckeditor-wordbreak)[ Docs](https://www.sebkln.de)[ RSS](/packages/sebkln-ckeditor-wordbreak/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (7)Dependencies (4)Versions (8)Used By (0)

[![Extension icon](Resources/Public/Icons/Extension.svg)](Resources/Public/Icons/Extension.svg)

CKEditor 5: wordbreak Plugin (TYPO3 Extension)
==============================================

[](#ckeditor-5-wordbreak-plugin-typo3-extension)

Compatibility
-------------

[](#compatibility)

TYPO3 12.4.0 - 13.4.99

What does this extension do?
----------------------------

[](#what-does-this-extension-do)

- This extension provides general support for the `` HTML element in CKEditor 5 and TYPO3
- Editors can insert the element by pressing a button at the current cursor position
- All `` elements are highlighted in the editor (similar to the softhyphen)

``: The Line Break Opportunity element
-------------------------------------------

[](#wbr-the-line-break-opportunity-element)

- Allows a line break **without** adding a hyphen to the wrapped string
- Useful e.g. for long URLs or file paths, displayed on mobile websites or inside narrow parent elements

Line breaks are **only** applied by browsers if the word is too long for the surrounding element or viewport.

Further information:

Screenshots
-----------

[](#screenshots)

### CKEditor in TYPO3 backend: Highlighted line breaks in editor UI

[](#ckeditor-in-typo3-backend-highlighted-line-breaks-in-editor-ui)

[![CKEditor in TYPO3 backend: Highlighted line breaks in editor UI](Documentation/Images/rte-wbr-editor.png)](Documentation/Images/rte-wbr-editor.png)

The `` elements are highlighted with an arrow on a colored background (similar to the soft-hyphen in TYPO3's editor).

### CKEditor in TYPO3 backend: HTML source view

[](#ckeditor-in-typo3-backend-html-source-view)

[![CKEditor in TYPO3 backend: HTML source view](Documentation/Images/rte-wbr-sourcemode.png)](Documentation/Images/rte-wbr-sourcemode.png)

In the source editing mode, `` elements are visible in the HTML.

### Frontend view (small viewport): Applied line breaks

[](#frontend-view-small-viewport-applied-line-breaks)

[![Applied line breaks in the frontend](Documentation/Images/frontend-wbr.png)](Documentation/Images/frontend-wbr.png)

In the frontend, the browser adds line breaks to the text where `` elements are set (but only where necessary).

Installation
------------

[](#installation)

`composer req sebkln/ckeditor-wordbreak`

The extension needs to be installed as any other extension of TYPO3 CMS.

Perform the following steps:

1. Load and install the extension
2. **If necessary,** include the static template *"CKEditor plugin: wordbreak"* into your TypoScript template, or load the hidden Site Set `sebkln/ckeditor-wordbreak` as a dependency (see note below about `lib.parseFunc` in TYPO3 v13+)
3. Extend your CKEditor configuration (see below)

### CKEditor configuration

[](#ckeditor-configuration)

```
editor:
  config:
    # 1. Import the plugin:
    importModules:
      - '@sebkln/ckeditor-wordbreak'

    toolbar:
      items:
        # 2. Add the button to your existing list of toolbar items:
        - WordBreak

# 3. Add  tag to list of tags that are allowed in the content:
processing:
  allowTags:
    - wbr

```

### Using `lib.parseFunc` in TYPO3 v13+

[](#using-libparsefunc-in-typo3-v13)

Beginning with TYPO3 v13, the properties `allowTags` and `denyTags` are now [optional](https://docs.typo3.org/c/typo3/cms-core/main/en-us/Changelog/13.2/Feature-104220-MakeParseFuncAllowTagsAndDenyTagsOptional.html).

This means you **must only** add this extension's TypoScript if you use a custom version of `lib.parseFunc_RTE`that already uses `allowTags` to restrict the HTML tags. Otherwise, all tags except `` would be encoded in the frontend.

Please note that this change only applies to TypoScript. `allowTags` is still needed in the CKEditor's YAML configuration for processing.

###  Health Score

48

—

FairBetter than 95% of packages

Maintenance87

Actively maintained with recent releases

Popularity33

Limited adoption so far

Community12

Small or concentrated contributor base

Maturity48

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 86.7% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~152 days

Recently: every ~229 days

Total

7

Last Release

63d ago

Major Versions

1.0.2 → 2.0.02024-01-11

### Community

Maintainers

![](https://www.gravatar.com/avatar/c833be3e60b885a3d022a6c28aea7f281d017664a67ca2da6990faca1dfd203a?d=identicon)[sebkln](/maintainers/sebkln)

---

Top Contributors

[![sebkln](https://avatars.githubusercontent.com/u/13318555?v=4)](https://github.com/sebkln "sebkln (13 commits)")[![bnf](https://avatars.githubusercontent.com/u/473155?v=4)](https://github.com/bnf "bnf (1 commits)")[![sypets](https://avatars.githubusercontent.com/u/13206455?v=4)](https://github.com/sypets "sypets (1 commits)")

---

Tags

ckeditor5typo3typo3-cms-extensionplugineditorCKEditortypo3linebreakwordbreakwbr

### Embed Badge

![Health badge](/badges/sebkln-ckeditor-wordbreak/health.svg)

```
[![Health](https://phpackages.com/badges/sebkln-ckeditor-wordbreak/health.svg)](https://phpackages.com/packages/sebkln-ckeditor-wordbreak)
```

###  Alternatives

[mihaildev/yii2-ckeditor

Yii2 CKEditor

118552.5k50](/packages/mihaildev-yii2-ckeditor)[quellenform/t3x-iconpack

Provides an iconpack-registry for custom iconpacks.

1542.7k25](/packages/quellenform-t3x-iconpack)[codingfreaks/cf-cookiemanager

Manage cookies, scripts, and GDPR compliance on your Typo3 website with CodingFreaks Typo3 Cookie Manager. Customize cookie banners, streamline workflow, and enhance user experience. Ensure GDPR compliance and take control of cookie management with our Typo3 cookie management extension. Visit the official Typo3 Documentation page to learn more.

1625.8k](/packages/codingfreaks-cf-cookiemanager)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)
