lmis
November 4, 2020, 6:55am
#1
Hi!
We’re experiencing a strange behaviour in the WYSIWYG editor of the Neos backend. We’ve created some custom content elements and in some of them we’re experiencing this problem. The initial creation of this content element seems to be fine and may look like this: neos_wysiwyg (red box). But if you want to edit its content later on it is not possible to add more list elements. The new text will always belong to the last element: neos_wysiwyg_bug . It looks like I’ve entered a soft return (shift + enter) but this is not the case, it’s a simple / normal return. Even removing and adding the list style does not solve the problem, it just looks like before. I’ve tried so much different things like changes in the aloa config or using a different browser but nothing solves this problem.
This seems to be a bug, am I right? Is it known and is there a workaround or something?
I’ve tested this in Chrome (v86) and Firefox (v82).
I would appreciate it if someone could help me with this
Best regards,
Hi Michael
Please paste your node configuration and how you render it
1 Like
lmis
November 4, 2020, 10:33am
#3
Hi Søren,
thank you for your answer
This is the node configuration of one of our custom content elements.
'Laudert.Website:Journal':
superTypes:
'Laudert.Website:Content': true
ui:
label: i18n
group: 'media'
icon: icon-journal-whills
position: 200
inlineEditable: true
properties:
category:
type: string
defaultValue: 'Enter category ...'
ui:
inlineEditable: true
reloadIfChanged: true
options:
silhouette: text.headline
search:
fulltextExtractor: "${Indexing.extractHtmlTags(node.properties.category)}"
topLine:
type: string
defaultValue: 'Enter top line ...'
ui:
inlineEditable: true
reloadIfChanged: true
options:
silhouette: text.headline
search:
fulltextExtractor: "${Indexing.extractInto('h2', node.properties.topLine)}"
headLine:
type: string
defaultValue: 'Enter headline ...'
ui:
inlineEditable: true
reloadIfChanged: true
options:
silhouette: text.headline
search:
fulltextExtractor: "${Indexing.extractInto('h1', node.properties.headLine)}"
copy:
type: string
defaultValue: 'Enter copy text ...'
ui:
inlineEditable: true
reloadIfChanged: true
options:
silhouette: text.content
search:
fulltextExtractor: "${Indexing.extractHtmlTags(node.properties.copy)}"
textBox:
type: string
defaultValue: 'Enter text ...'
ui:
inlineEditable: true
reloadIfChanged: true
options:
silhouette: text.content
search:
fulltextExtractor: "${Indexing.extractHtmlTags(node.properties.textBox)}"
textBoxBackground:
type: string
defaultValue: white
ui:
label: i18n
reloadIfChanged: true
inspector:
group: 'design'
editor: Content/Inspector/Editors/SelectBoxEditor
editorOptions:
placeholder: 'Laudert.Website:NodeTypes.Journal:properties.textBoxBackground.editor.textBoxBackgroundPlaceholder'
values:
white:
label: 'Laudert.Website:NodeTypes.Journal:properties.textBoxBackground.editor.values.white'
position: 1
black:
label: 'Laudert.Website:NodeTypes.Journal:properties.textBoxBackground.editor.values.black'
position: 2
creation:
label: 'Laudert.Website:NodeTypes.Journal:properties.textBoxBackground.editor.values.creation'
position: 3
studios:
label: 'Laudert.Website:NodeTypes.Journal:properties.textBoxBackground.editor.values.studios'
position: 4
media-production:
label: 'Laudert.Website:NodeTypes.Journal:properties.textBoxBackground.editor.values.media-production'
position: 5
media-it:
label: 'Laudert.Website:NodeTypes.Journal:properties.textBoxBackground.editor.values.media-it'
position: 6
print-services:
label: 'Laudert.Website:NodeTypes.Journal:properties.textBoxBackground.editor.values.print-services'
position: 7
textPosition:
type: string
defaultValue: right
ui:
label: i18n
reloadIfChanged: true
inspector:
group: 'design'
editor: Content/Inspector/Editors/SelectBoxEditor
editorOptions:
placeholder: 'Laudert.Website:NodeTypes.Journal:properties.textPosition.editor.textPositionPlaceholder'
values:
left:
label: 'Laudert.Website:NodeTypes.Journal:properties.textPosition.editor.values.left'
position: 1
right:
label: 'Laudert.Website:NodeTypes.Journal:properties.textPosition.editor.values.right'
position: 2
textBoxValue:
type: string
defaultValue: '100'
validation:
'Neos.Neos/Validation/RegularExpressionValidator':
regularExpression: '/^[0-9]*$/'
ui:
label: i18n
inlineEditable: false
reloadIfChanged: true
inspector:
group: 'design'
options:
silhouette: text.content
search:
fulltextExtractor: "${Indexing.extractHtmlTags(node.properties.textBoxValue)}"
image:
type: Neos\Media\Domain\Model\ImageInterface
ui:
label: i18n
inlineEditable: false
reloadIfChanged: true
inspector:
group: 'image'
imageText:
type: string
defaultValue: 'Laudert.Website:NodeTypes.Journal:properties.imageText.editor.imageTextPlaceholder'
ui:
reloadIfChanged: true
options:
silhouette: text.content
search:
fulltextExtractor: "${Indexing.extractHtmlTags(node.properties.imageText)}"
displayArrow:
type: boolean
defaultValue: true
ui:
label: i18n
reloadIfChanged: true
inspector:
group: 'design'
links:
type: 'references'
ui:
label: i18n
reloadIfChanged: true
inspector:
group: 'links'
editorOptions:
nodeTypes: ['Neos.Neos:Shortcut', 'Neos.Neos:Document']
absoluteLinks:
type: boolean
defaultValue: false
ui:
label: i18n
reloadIfChanged: true
inspector:
group: 'links'
In this case the property «textBox» is the one with the problem.
textBox:
type: string
defaultValue: 'Enter text ...'
ui:
inlineEditable: true
reloadIfChanged: true
options:
silhouette: text.content
search:
fulltextExtractor: "${Indexing.extractHtmlTags(node.properties.textBox)}"
We’re using Silhouette and the configuration looks like this.
Sitegeist:
Silhouettes:
properties:
text:
headline:
ui:
aloha:
autoparagraph: FALSE
'format':
'strong': TRUE
'em': TRUE
'underline': TRUE
'strikethrough': TRUE
'sub': TRUE
'sup': TRUE
'del': TRUE
'p': FALSE
'h1': FALSE
'h2': FALSE
'h3': FALSE
'h4': FALSE
'h5': FALSE
'h6': FALSE
'pre': FALSE
'removeFormat': TRUE
'table':
'table': FALSE
'list':
'ol': FALSE
'ul': FALSE
'link':
'a': TRUE
'alignment':
'left': FALSE
'center': FALSE
'right': FALSE
'justify': FALSE
content:
ui:
aloha:
autoparagraph: FALSE
'format':
'strong': TRUE
'em': TRUE
'underline': TRUE
'strikethrough': TRUE
'sub': TRUE
'sup': TRUE
'del': TRUE
'p': TRUE
'h1': TRUE
'h2': TRUE
'h3': TRUE
'h4': TRUE
'h5': TRUE
'h6': TRUE
'pre': TRUE
'removeFormat': TRUE
'table':
'table': FALSE
'list':
'ol': TRUE
'ul': TRUE
'link':
'a': TRUE
'alignment':
'left': TRUE
'center': TRUE
'right': TRUE
'justify': TRUE
And here’s the fusion configuration.
prototype(Laudert.Website:Journal) < prototype(Laudert.Website:Content) {
templatePath = 'resource://Laudert.Website/Private/Templates/NodeTypes/Journal.html'
category = ${q(node).property('category')}
topLine = ${q(node).property('topLine')}
headLine = ${q(node).property('headLine')}
copy = ${q(node).property('copy')}
textBox = ${q(node).property('textBox')}
textBoxBackground = ${q(node).property('textBoxBackground')}
textBoxValue = ${q(node).property('textBoxValue')}
image = ${q(node).property('image')}
displayArrow = ${q(node).property('displayArrow')}
links = ${q(node).property('links')}
absoluteLinks = ${q(node).property('absoluteLinks')}
// Calculate SVG dash offset
svgDashValue = ${this.textBoxValue ? this.textBoxValue : 0}
svgDashOffset = ${(370 + 370 * ( this.svgDashValue / 100 )) / -1}
}
And this is the template part for «textBox».
<f:if condition="{neos:rendering.inEditMode()}">
<f:then>
<div class="journal-surface" data-surface-color="{textBoxBackground}">
<f:if condition="{textBoxValue}">
<svg x="0px" y="0px" viewBox="0 0 128 128">
<circle cx="64" cy="64" stroke-width="2" r="59"/>
<circle cx="64" cy="64" stroke-width="10" r="59" stroke-dasharray="370" stroke-dashoffset="{svgDashOffset}"/>
<text x="64" y="64" dy=".325em" text-anchor="middle">{textBoxValue}</text>
</svg>
</f:if>
{neos:contentElement.editable(property: 'textBox')}
</div>
</f:then>
<f:else>
<f:if condition="{textBox} || {textBoxValue}">
<div class="journal-surface" data-surface-color="{textBoxBackground}">
<f:if condition="{textBoxValue}">
<svg x="0px" y="0px" viewBox="0 0 128 128">
<circle cx="64" cy="64" stroke-width="2" r="59"/>
<circle cx="64" cy="64" stroke-width="10" r="59" stroke-dasharray="370" stroke-dashoffset="{svgDashOffset}"/>
<text x="64" y="64" dy=".325em" text-anchor="middle">{textBoxValue}</text>
</svg>
</f:if>
<div>{textBox -> laudert:removeNbsp() -> f:format.raw()}</div>
</div>
</f:if>
</f:else>
</f:if>
Hello,
thanks for reporting this issue. I did not tests it yet but we switched the default inline editor at some point. So it would be interessting which config do you use for Neos.Neos.Ui.frontendConfiguration.defaultInlineEditor.
Right now it ist the ck editor version 5 but we used version 4 in the past and as you also using the deprecated aloha syntax instead auf editorOptions maybe this is one root cause.
When we know bit more I will try to reproduce that.
I can just remember that we had issues with ck editor 4 and tables for instance. But will see what you have
lmis
November 4, 2020, 1:24pm
#5
Hi Markus,
thanks for your answer
1 Like
