<p>First this video is very handy:
<a href="https://www.youtube.com/watch?v=etFletL0dYg&amp;ab_channel=CraftQuest" rel="nofollow noreferrer">https://www.youtube.com/watch?v=etFletL0dYg&amp;ab_channel=CraftQuest</a></p>
<p>Secondly: I have this code now and I had to make sure that <code>Styles</code> appear within my menu bar of the editor.</p>
<p><a href="https://i.sstatic.net/pNdveSfg.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/pNdveSfg.png" alt="ck editor settings" /></a>
<a href="https://i.sstatic.net/viSafSo7.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/viSafSo7.png" alt="ck editor in action" /></a></p>

CC BY-SA 4.0
2024-10-17T18:46:02.977Z
What I don't know though is, how I could install a plugin for ckeditor, like the Styles plugin: https://ckeditor.com/docs/ckeditor5/latest/features/style.html#demo
Merc
CC BY-SA 4.0
2024-10-17T18:45:35.230Z
2024-10-17T18:45:35.230Z
Merc
<p>I read this: <a href="https://github.com/craftcms/ckeditor?tab=readme-ov-file#registering-custom-styles" rel="nofollow noreferrer">https://github.com/craftcms/ckeditor?tab=readme-ov-file#registering-custom-styles</a>
but to me that is not clear where I should add this code.
Do I have to add this within the CK editor config page in craft?</p>
<p><a href="https://i.sstatic.net/fzoSOJp6.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/fzoSOJp6.png" alt="ck editor cp" /></a></p>
<p>In my example I tried to change the font family for the editor, but nothing happens.</p>
<p>What I finally want to achieve is a custom format like seen here: <a href="https://ckeditor.com/docs/ckeditor5/latest/features/style.html#demo" rel="nofollow noreferrer">https://ckeditor.com/docs/ckeditor5/latest/features/style.html#demo</a>
but showing a button.</p>
<p>Currently I have no idea how that is being done.
I knew my way around in redactor, but now ck editor seems to rule again...</p>
<p>I think I need to add the styles plugin as said on github but there is no explanation how I would install this within craft.</p>

<richtext><ckeditor5><button><ckeditor>
How to add a button or format style in Craft 5 CKEditor 5 (rich text field)
# How to add a button or format style in Craft 5 CKEditor 5 (rich text field)

(Asked by: username_0 on 2024-10-17)

I read this: <https://github.com/craftcms/ckeditor?tab=readme-ov-file#registering-custom-styles>
but to me that is not clear where I should add this code.
Do I have to add this within the CK editor config page in craft?

[![ck editor cp](https://i.sstatic.net/fzoSOJp6.png)](https://i.sstatic.net/fzoSOJp6.png)

In my example I tried to change the font family for the editor, but nothing happens.

What I finally want to achieve is a custom format like seen here: <https://ckeditor.com/docs/ckeditor5/latest/features/style.html#demo>
but showing a button.

Currently I have no idea how that is being done.
I knew my way around in redactor, but now ck editor seems to rule again...

I think I need to add the styles plugin as said on github but there is no explanation how I would install this within craft.

**Tags:** richtext, ckeditor5, button, ckeditor

---

## 1 answers

### Answer by username_0 on 2024-10-17. Score: 1

First this video is very handy:
<https://www.youtube.com/watch?v=etFletL0dYg&ab_channel=CraftQuest>

Secondly: I have this code now and I had to make sure that `Styles` appear within my menu bar of the editor.

[![ck editor settings](https://i.sstatic.net/pNdveSfg.png)](https://i.sstatic.net/pNdveSfg.png)
[![ck editor in action](https://i.sstatic.net/viSafSo7.png)](https://i.sstatic.net/viSafSo7.png)

> **Comments:**
> **username_0**: What I don't know though is, how I could install a plugin for ckeditor, like the Styles plugin: https://ckeditor.com/docs/ckeditor5/latest/features/style.html#demo  

---

