Customizing ckeditor bar #6450
Replies: 2 comments
-
Hi Romain, I hope this helps you to get started on your first question: /* assets/admin/app.js */
// Add project specific javascript code and import of additional bundles here:
import {ckeditorConfigRegistry} from 'sulu-admin-bundle/containers';
ckeditorConfigRegistry.add((config) => ({
heading : {
options: [
...config.heading.options, //keep all other headlines
{
model: 'custom_div', //unique name in editor, the xml-element that is stored
view: {
name: 'div', //html element on website
classes: 'text-blue-500' //css class on website
},
title: 'Custom DIV', //Title in ckeditor
class: 'ck-heading_paragraph' //css class in editor, this class must be available in admin css code
}
]
}
}))
; I've got the first pointers from demo project sulu/sulu-demo#77 And you'll need to build the admin frontend application following the chapter in the cookbook: https://docs.sulu.io/en/2.4/cookbook/build-admin-frontend.html Then I've read how to configure the heading feature in ckeditor5 here https://ckeditor.com/docs/ckeditor5/latest/features/headings.html#configuring-custom-heading-elements Unfortunately the editor will display those customs format only as block level elements. As an addition how to remove items from the toolbar, because I've just found out: /* assets/admin/app.js */
// Add project specific javascript code and import of additional bundles here:
import {ckeditorPluginRegistry, ckeditorConfigRegistry} from 'sulu-admin-bundle/containers';
ckeditorConfigRegistry.add((config) => ({
toolbar: {
removeItems: [
/**
I've uncommented the elements I want to keep, so you can see the names of all toolbar items.
So this removes 'strikethrough', 'subscript', 'superscript' and 'code'
*/
// 'heading', 'bold', 'italic', 'underline',
'strikethrough', 'subscript', 'superscript',
// 'bulletedlist', 'numberedlist', 'alignment', 'externalLink', 'internalLink', 'insertTable',
'code',
]
}
}))
; See also https://ckeditor.com/docs/ckeditor5/latest/features/toolbar/toolbar.html#basic-toolbar-configuration I'm secretly planning to extend the sulu demo pull request sulu/sulu-demo#77 and also add to the documentation sulu/sulu-docs#320 once I've managed to create a copy of the ckeditor5 heading plugin for custom inline elements. But it will take a few more weeks. Regards, |
Beta Was this translation helpful? Give feedback.
-
As already mention by @CVogel the way to extend the CKEditor is shown in: sulu/sulu-demo#77. And you can add at the end all you see in the ckeditor documentation https://ckeditor.com/docs/ckeditor5/latest/features/headings.html#configuring-custom-heading-elements. Sulu is following the way of "Separation of content and presentation", read about it here: https://sulu.io/guides/templating-and-structured-content-in-sulu. So the recommended way to embed images the media selection of sulu. To combine text and images the way you normally known from other CMS having such one big texteditor is recommended in sulu using Blocks Have a look at the sulu demo for a typical text-image block: https://github.com/sulu/sulu-demo/blob/master/config/templates/includes/blocks/text.xml This way you combine multiple blocks and use the image displayOption to tell where the image should be display. Why this seperating content from presentation?It have several advantages: 1. Using content data in any way (website, app, ...) As not all things are just a big HTML Editor. Text, images, other content types can be provided as JSON in other formats for other application. 2. Content should be design independent Only some fields indicate how the content should display. This make it easier to migrate create a new design for your website and not have to migrate all data or parse HTML to migrate data to a new design. 3. Full Control of full responsive design The most important advantages from my case by seperating text and images or other "embeds", you have as a developer 100% control how the images are displayed. How you handle responsive website, how you handle image formats and so on. In our projects it also uncommon that "headlines" like "h2", "h3" are inside the texteditor they are mostly an own text_line field in the blocks, so it's more a edge case that content manager defines headlines inside the texteditor. So we really see texteditor as text not something which structure the page. In our cases developer defines if a block "headline" is a h2 or h3, this things can change without having to touch the database. I hope I could give you a good overview why the text editor is that way and why sulu recommends to work with "Blocks" and thinking in "Blocks". When defining block think it from content perspective (text, text-image, quote, images), not how it is displayed. This will allow you to create a long running projects with sulu and will also make redesign a lot easier. If you are still missing something specific in the text editor, let us know or how we can improve our documentation. |
Beta Was this translation helpful? Give feedback.
-
Hi,
I'am currently working on a Sulu 2.3 project and I want to add some features to my ckeditor toolbar.
At first, I'd like to add some new styles in the dropdown bar, but I don't find how to do that. Where can I find some examples of adding new styles in this dropdown bar ?
Also, I did not find any way to add some images, but I red that Sulu does not work really good when we do that, and that's why this functionality has been abandonned. Do you confirm that is not recommended to do that ?
Thank for the answers !
Beta Was this translation helpful? Give feedback.
All reactions