[SOLVED] Aloha text align doesn't work

Community Newcomer's Corner
1

Hi there,
When using the aloha text align buttons nothing happens :confused: there are also no changes to reconized by the Live-Button. Any idea whats wrong? how does it work normally? adding css styles?
thanks
kuno

2

Hi there,

You’ll need at least two css classes to make it work.

See https://github.com/neos/Neos.Demo/blob/master/Resources/Private/Styles/_Layout.scss#L143-L154

3

those classes are working, but while frontend editing those classes wherent added to the html object and it looks like there where not any changes made.
in my chromeconsole i see:

aloha.js?bust=ed7a55ddba42:3073 [Deprecation] The behavior that Selection.addRange() merges existing Range and the specified Range was removed. See https://www.chromestatus.com/features/6680566019653632 for more details.

maybe this has something to do with my case

4

btw those classes are not being used for textalign, aloha adds style="text-align: right;" to the HTML. but not im my case. It’s working at the Neos.NodeTypes:Text NodeType but not on my custom ones.

5

Damn sorry you’re right, those classes are used for alignment for the image in the text with image element.

Was thinking of these classes for Aloha to support the different list styles https://github.com/neos/Neos.Demo/blob/master/Resources/Private/Styles/_Content.scss

The deprecation warning has nothing do to with it though.

If the text alignment in Aloha generally works, but not for your custom elements, it’s likely due to you skipping on wrapping elements for your editable text properties. You need a div or similar tag for the whole element and then a div, span, h1 etc. for each editable text property.

6

i simplyfied my template file to this, but still no alignment :confused:

{namespace neos=Neos\Neos\ViewHelpers}

<div {attributes -> f:format.raw()}>
            <div>
                {neos:contentElement.editable(property: 'text')}
            </div>
</div>
7

Ok I solved the Problem by deleting the old text and insert something ‘fresh’

8

Conclusion: aligntment is only working when selecting the format/tag in the aloha toolbar, but not when selecting the format/tag in the viewhelper like <neos:contentElement.editable property="text" tag="p"/>

so i have to enable a useless menu in my toolbar to enable algnment? or is there a solution?