PHPackages techdivision/ckstyles - 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 & Helpers](/categories/utility) 4. / 5. techdivision/ckstyles ActiveNeos-plugin[Utility & Helpers](/categories/utility) techdivision/ckstyles ===================== Neos package which enables you adding your custom style classes for the CkEditor with a simple Yaml configuration v2.2.0(7mo ago)21166.3k↓12.3%20[3 issues](https://github.com/techdivision/ckstyles/issues)[3 PRs](https://github.com/techdivision/ckstyles/pulls)GPL-3.0+JavaScriptCI failing Since Aug 27Pushed 7mo ago17 watchersCompare [ Source](https://github.com/techdivision/ckstyles)[ Packagist](https://packagist.org/packages/techdivision/ckstyles)[ Docs](https://www.techdivision.com)[ RSS](/packages/techdivision-ckstyles/feed)WikiDiscussions master Synced 1mo ago READMEChangelog (10)Dependencies (2)Versions (25)Used By (0) TechDivision.CkStyles ===================== [](#techdivisionckstyles) This package allows you to add different styles based on your css-classes for the CkEditor in Neos. You can define the classes in you yaml configuration. Styles can be applied both on block- and element level. It is also possible to set a different attribute (for usage with placeholders for example). **Demo:** [![Applying inline style](Documentation/assets/InlineStyleDemo.gif "Inline style")](Documentation/assets/InlineStyleDemo.gif) **Example output:** [![Example output](Documentation/assets/ExampleOutput.png "Example output")](Documentation/assets/ExampleOutput.png) ``` This is an awesome inline editable text with some custom styling :) ``` Benefits/Purpose ---------------- [](#benefitspurpose) In most projects there are requirements that you cannot achieve with tags alone, and you need classes under editorial control - e.g. if you want to highlight some text with font size but don't use a headline for SEO reasons or want to add an icon, adjust the font color, ... Or you want to add data-attributes to an element for use in combination with js ... Getting started --------------- [](#getting-started) ### 1. Default composer installation [](#1-default-composer-installation) ``` composer require techdivision/ckstyles ``` ### 2. Define some global presets for usage in different NodeTypes [](#2-define-some-global-presets-for-usage-in-different-nodetypes) ``` TechDivision: CkStyles: InlineStyles: presets: 'fontColor': label: 'Font color' options: 'primary': label: 'Red' cssClass: 'my-class-red' 'secondary': label: 'Green' cssClass: 'my-class-green' 'fontSize': label: 'Font size' options: 'small': label: 'Small' cssClass: 'my-class-size-small' 'big': label: 'Large' cssClass: 'my-class-size-large' 'dataAttribute': label: 'Inline data attribute' options: 'data': label: 'Inline data' attribute: 'data-attribute' attributeValue: 'my-custom-attribute-value' BlockStyles: presets: 'indent': label: 'Indentation' options: 'primary': label: '2 rem' cssClass: 'my-class-indent-2' 'secondary': label: '4 rem' cssClass: 'my-class-indent-4' 'dataAttribute': label: 'Block data attribute' options: 'data': label: 'Block data' attribute: 'data-attribute' attributeValue: 'my-custom-attribute-value' ``` Example: [Configuration/Settings.yaml](Configuration/Settings.yaml) **What values are allowed for `cssClass` and/or `attributeValue`?** - **Not null** Using an empty class (cssClass: null) to unset the value might cause errors during rendering in the backend. The select boxes of this package contain an "x" button for resetting the value. - Although you can add **multiple classes** by separating them with a whitespace. e.g. `btn btn-primary`, it is **highly recommended** to use only **one and unique** class across all Inline- or BlockStyles. See [known issues](#konwn-issues) for more details. ### 3. Activate the preset for your inline editable NodeType property: [](#3-activate-the-preset-for-your-inline-editable-nodetype-property) ``` 'Neos.NodeTypes.BaseMixins:TextMixin': abstract: true properties: text: ui: inline: editorOptions: inlineStyling: dataAttribute: true fontColor: true fontSize: true blockStyling: indent: true dataAttribute: true ``` Example: [Configuration/NodeTypes.Override.BaseMixins.yaml](Configuration/NodeTypes.Override.BaseMixins.yaml) ### 4. Add the styling for your presets in your scss, less or css: [](#4-add-the-styling-for-your-presets-in-your-scss-less-or-css) ``` .my-class-red { color: red; } .my-class-green { color: green; } .my-class-size-small { font-size: 10px; } .my-class-size-large { font-size: 25px; } .my-class-indent-2 { text-indent: 2rem; } .my-class-indent-4 { text-indent: 4rem; } ``` Development ----------- [](#development) This project works with yarn. The build process given by the Neos developers is not very configurable, only the target dir for the build process is adjustable by package.json. ``` nvm install ``` If you don't have [yarn](https://yarnpkg.com/lang/en/docs/install/) already installed: ``` brew install yarn ``` Build the app: ``` ./build.sh ``` Start a watcher: ``` ./watch.sh ``` Known issues ------------ [](#known-issues) - **cssClass** - If you have multiple Inline- or BlockStyles configurations who contain the same class will result in the loss of one of the selected styles (e.g. if you have a InlineStyle which sets the classes `btn btn-primary` and a different InlineStyle which sets the classes `btn btn-rounded`, one of the set styles will be lost if you reopen the backend). **Note:** this doesn't apply to **one InlineStyle** with multiple duplicate classes. - If you have one or multiple Inline- or BlockStyles where one cssClass contains the other, e.g. `btn btn-primary` and `btn` one of them may be lost/not applied - *The above are caused by a bug/the behavior of CkEditor and can't easily be fixed. If you have ideas how to fix this, we would sincerely appreciate your [contribution](#contribute) to this project* - **autoparagraph** If the autoparagraph editorOption is inactive (as e.g. for the Headline content element of the Neos demo project) inline styles are not displayed correctly in the Neos backend. Contribute ---------- [](#contribute) You are very welcome to contribute by merge requests, adding issues etc. **Thank you** 🤝 [Sebastian Kurfürst](https://twitter.com/skurfuerst) for the great workshop which helped us to implement this. ### Health Score 53 — FairBetter than 97% of packages Maintenance60 Regular maintenance activity Popularity45 Moderate usage in the ecosystem Community26 Small or concentrated contributor base Maturity68 Established project with proven stability Bus Factor2 2 contributors hold 50%+ of commits 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 ~148 days Recently: every ~316 days Total 16 Last Release 233d ago Major Versions v1.5.1 → v2.0.02023-01-18 ### Community Maintainers ![](https://www.gravatar.com/avatar/343dcb03a86553b7ba1c14aa008fe22edf0d960048cf97eb9ea1351e03e29f48?d=identicon)[mwitte](/maintainers/mwitte) ![](https://www.gravatar.com/avatar/e2402ac081fc0dc57b15f8cfcc16a1c1b37adfa3211a7fe30eb80d622b6586f3?d=identicon)[regniets](/maintainers/regniets) --- Top Contributors [![MVogge](https://avatars.githubusercontent.com/u/34127888?v=4)](https://github.com/MVogge "MVogge (21 commits)")[![regniets](https://avatars.githubusercontent.com/u/4123716?v=4)](https://github.com/regniets "regniets (12 commits)")[![anianweber](https://avatars.githubusercontent.com/u/18150589?v=4)](https://github.com/anianweber "anianweber (5 commits)")[![mwitte](https://avatars.githubusercontent.com/u/1611200?v=4)](https://github.com/mwitte "mwitte (4 commits)")[![SimonPaidla](https://avatars.githubusercontent.com/u/28459705?v=4)](https://github.com/SimonPaidla "SimonPaidla (3 commits)")[![mbiberger](https://avatars.githubusercontent.com/u/8565550?v=4)](https://github.com/mbiberger "mbiberger (3 commits)")[![msteffinger](https://avatars.githubusercontent.com/u/31537445?v=4)](https://github.com/msteffinger "msteffinger (3 commits)")[![samsauter](https://avatars.githubusercontent.com/u/8954166?v=4)](https://github.com/samsauter "samsauter (2 commits)")[![Benjamin-K](https://avatars.githubusercontent.com/u/3098031?v=4)](https://github.com/Benjamin-K "Benjamin-K (1 commits)")[![dboeck](https://avatars.githubusercontent.com/u/6573641?v=4)](https://github.com/dboeck "dboeck (1 commits)")[![daniellienert](https://avatars.githubusercontent.com/u/642226?v=4)](https://github.com/daniellienert "daniellienert (1 commits)")[![calcalid](https://avatars.githubusercontent.com/u/32358005?v=4)](https://github.com/calcalid "calcalid (1 commits)")[![mhsdesign](https://avatars.githubusercontent.com/u/85400359?v=4)](https://github.com/mhsdesign "mhsdesign (1 commits)") --- Tags neoseditingwysiwygCKEditorclassesflowNeosinlinestyling ### Embed Badge ![Health badge](/badges/techdivision-ckstyles/health.svg) ``` [![Health](https://phpackages.com/badges/techdivision-ckstyles/health.svg)](https://phpackages.com/packages/techdivision-ckstyles) ``` ### Alternatives [shel/neos-hyphens A plugin for Neos CMS which provides hyphens for the inline editor 20200.7k1](/packages/shel-neos-hyphens)[shel/neos-colorpicker A plugin for Neos CMS which provides a colorpicker editor 1494.4k6](/packages/shel-neos-colorpicker)[moc/notfound Neos CMS package that loads a normal editable page for displaying a 404 error 18167.5k](/packages/moc-notfound)[carbon/includeassets Include your assets (css, js) in an easy way into Neos 14228.6k10](/packages/carbon-includeassets)[moc/synchronizeurl Neos CMS package that keep page titles and URLs in sync by updating the URL every time the title changes 106.3k](/packages/moc-synchronizeurl) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)