Extending Aloha Editor

Using Neos & Flow
1

Hi everyone,

I would like to extend the Aloha Editor with custom buttons adding CSS classes to the paragraph.
I would also like to add a custom font size for text.

I wasn´t able to figure out how exactly the configuration of Aloha works and how it is integrated into Neos.

Does someone have experience with this? Thank you very much for your help
DanielOliver

2

It’s not possible to extend Aloha with the current implementation. We are not happy with Aloha currently, and plan to move to ckeditor. But this will need time.

Keep in mind that giving too much power to the editor is a bad thing generaly. You (the developper/integrator) need to define clear rule on how the content will be displayed. It’s fine that an Editor can use bold, italic, list, … but more is dangerous.

If you give the use access to a font size and store this in your content you break the principle of separation between content and formatting/rendering. What happen if you need to relaunch the website with a new design ? Or what if you need to display the same content but in a different context (mobile application, abstract, …) ?

I you need specific rendering for specific content, create a new node type, name it based on user requirement, define node contraints to limit this new content to certain part of the website, and build custom style for this content type.

Back in 2014 at Inspiring conference, if give a talk about this, name “Node Kingdom”:

Keep your content clean.

1 Like
3

I use “clean content”. How can i add a pdf-icon before every pdf-link?
Only when I can choose a class. Is that not possible with aloah-editor?

4

If you want to add an icon before every PDF link on your website, it’s not the responsability of your editor to select a custom class, you can provide a CSS that do the job for your editor

a[href$=".pdf"]{
	background-image: url(images/pdf-icon.png);
	background-position: center left;
	background-repeat: no-repeat;
	padding-left: 35px;
	height: 35px;
	display: inline-block;
	padding-top: 10px;
}

Your content stay clean, your editor happy, your website consistent and your visitor feel at home :wink:

Even if it was possible to configure our Aloha integration to show some kind of class list, i will try to stay away from this solution as much as possible.

1 Like
5

I am missing the feature to set styles to edited text and i don’t see breaking the priciples of the separation in content / formatting.
It would be nice to style a text and give it a special meaning.
i.e.
I want to mark special words or sentences as very important for the reader of my site.
So i could mark the text with the style “Very-Important” and then use css to do so.
So the separation between content / formatting ist always there.
To allow users (editors) to use direct formattings (font size, font color …) is of course the wrong way.
But without the possibility to do such things (as possible in old typo3 rte) the editor is not that useful in my opinion.

6

Your CSS class does not have any semantic meaning. That’s why I say that we need a clear separation of content (semantic, some html markup) and layout (css). If you need “Very Important” … you have a tag for this, it’s “strong” or at least “b”.

For more complex example, like a Quote, you need a custom node type, Neos knows that it is a quote and you can render it based on the current best practices. But you can also generate more useful stuff (Review JSON-LD, …), querying, …

Everytime someone said, we need a class, try to challenge it. We have semantic friendly store, so from my opinions, we don’t need a highly configurable editor, the focus need to be done on the content design and planning.

With the React rewritte and the CKeditor you have more flexibility to configure the editor. Wrong from my perspective, but I’m not alone to decide :wink:

1 Like