Editor formats? And em = i?

Using Neos & Flow Frontend & Integration
1

I tried to figure out the possibilities to make custom formats available to the editor. For example I read the following documentation:
https://neos.readthedocs.io/en/stable/References/NodeTypeDefinition.html

Quite far below “Various formatting options” are mentioned and “(see example below for all available options)” where is written:

inline:
  editorOptions:
    placeholder: i18n
    autoparagraph: true
    ...
    formatting:
      strong: true
      em: true
      ...

But emphasis (em) is not available inside the editor. And if you change “em” to “false” then the italic option is deactivated inside the editor. Does this make an sense?

And as additional question, how is it possible to make custom formats available e.g. by enclosing text in a span tag with a custom class? Or any equivalent solution?

2

Hi Thomas,

for custom formats you can use a plugin like https://www.neos.io/download-and-extend/packages/breadlesscode/breadlesscode-neos-simple-editor-extend.html or https://www.neos.io/download-and-extend/packages/techdivision/techdivision-ckstyles.html

Regarding the “em” if it’s a bug you can create a new issue in https://github.com/neos/neos-ui

3

Hi Sebastian, thanks for your infos. I will try out these plugins.

So if I unterstand it properly there’s no pretty easy integration by using the formatting section in the yaml file and e.g. extend something like “span.myclass: true”?

How do I find out if the em topic is a bug or a feature? Right at the moment I have no clue where to start.

4

With those plugins you can define the formatting options in yaml.
It’s just not part of the Neos core as we didn’t find the best solution yet for it and I assume at some point one of those plugins functionality might go into the core in some way.

Just create an issue on Github and we can clarify there :slight_smile:

5

Well, “i” button in the editor creates an em tag - which is what I’d expect (never saw an “em” button…) Is that what happens?

6

Hi Karsten, no this doesn’t happen in my project (which is derived from the demo project).

The “i” button creates an <i> tag like expected. But in the above mentioned documentation “i” is not mentioned under the “formatting” section and if I add “i: false” to the yaml nothing happens. Instaed if I add “em: false” to the yaml then thi “i” button disappears.
To me it seems like all configuration in yaml is about “em” but everything in the editor and the generated content is about “i”.

7

Hm… strange. I’d need to test this in a demo site. But it should be creating <em>. <i> is so 90’s :wink:

8

I agree, from <i>: The Idiomatic Text element - HTML: HyperText Markup Language | MDN :

Be sure the text in question is not actually more appropriately marked up with another element.

9

Hi Sebastian, after checking the two plugins I decided to try it with the second one.
What I miss in both is the possibility to extend the existing drop down with paragraph, headlines and so on. Do you know if this is possbible with one of these plugins? At least it’s not in the documentation.

10

Ok, I will do so.