Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2024-10-17T18:46:02.977Z
Answers.Text: 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
Answers.UserDisplayName: Merc
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2024-10-17T18:45:35.230Z
Answers.LastActivityDate: 2024-10-17T18:45:35.230Z
Answers.UserDisplayName: Merc
Body: <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>
  
Tags: <richtext><ckeditor5><button><ckeditor>
Title: How to add a button or format style in Craft 5 CKEditor 5 (rich text field)
ThreadText: # 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  
  
  ---
  
  