Custom and configurable ckeditor for mini text editors for title and labels or other usecases

[alexander-schranz]

Problem description

It would be great to have a mini text editor which does only contains inline html elements. The usecase is mostly for titles or labels which contains just some bold, italics words or link:

Example:

<label>{{ content.textEditor|raw }}</label>

Block tags like p, ul, table, h2, ... are not allowed inside a label tag only inline tags like strong, em, a, br, ... are allowed here.

In Sulu 1.6. this was possible by configuring enterMode to BR instead of P tag to avoid the wrapping p tag which was used by the SuluFormBundle.

Proposed solution

To think bigger it would be great define different configs and use them the following way:

<property name="line" type="text_editor">
      <param>
            <param name="config" value="mini_editor"/>
      </param>
</property>

The ckeditor registry could look like this (but better would it maybe comes from the backend):

ckeditorConfigRegistry.add(..., 'mini_editor'); // to avoid bc break this second parameter is optional and fallback to `default`

As I think ckeditor does not support avoiding the p tag I would go with removing it in the content type as I think we don't want to implement such logic in the js which personally would prefer to have it also be saved without the p tag:

<property name="line" type="text_editor">
      <param>
            <param name="config" value="mini_editor"/>
            <param name="strip_p_tags" value="true"/>
      </param>
</property>

The strip_p_tags will replace </p><p> with <br/><br/> and remove <p> and </p> in the content type.

Requirements for MiniEditor:

• Editor Text which is not wrapepd automatically by a tag like <p> or any other tag
  • Usecase <h2>{{ block.title|raw }}</h2> (h2 do not allow p tag inside it only <br>)
• Available Buttons in the Editor Toolbar configurable

[danrot]

You've already made the same suggestion as your proposed solution in #4898 (comment), and I haven't changed my mind about my following comment. I think this quickly gets out of hand, resulting in many different configs, and it is not clear from looking at it what it really does.

However, I can see that limiting the number HTML tags makes sense. And I could imagine that CKEditor supports that somehow. The first thing that comes to my mind is to remove some plugins using the configuration. This example shows that this is at least possible for the Heading, and stuff like lists are also implemented as plugins. So I could imagine that we could deactivate everything here already, without the need of implementing something like this in the serverside code.

[danrot]

Yesterday another solution came to my mind: What about using XIncludes for this? Then we would have a solution that works for other content types as well, not only for the text editor.

[alexander-schranz]

@danrot Must say xincludes is for me like saying ignore the problem and tell the developers you need implement it yourself always and you will have no possibility to effect third party bundles editors.

[danrot]

Ok, I've added this to the wrong issue... But the initial problem here could be solved by a inline_only param as well.

But why I've suggested that, is because you seem to want to combine multiple different settings into a named config (I've already elaborated why I don't like that). I assume the combination of multiple parameters is probably something that is different from project to project, so they have to configure it themselves anyway.

And by enabling them to do so by using xincludes, we would solve the same problem for other content types as well. I could e.g. imagine that somebody also wants to reuse the presentation values of a smart content in multiple different smart contents. Or would you also create a smartContentConfigRegistry for that? That thought could probably also be extended to other content types as well.

[kfrohwein]

Hi all,
we need a feature like this. For an App Export I need a Ckeditor with a very limited setup. I believe I can use around 3 days in the next week to implement this and I guess we will need this further on as well.

I will now do my sulu setup and put up a PR in the next days with code as far as I come. :)
And yes this time I will really do it as it's work ;)

[ampaze]

Different fixed configurations will alway fall short for someone.

For example, at the moment I want to add a toolbar button for <hr> and remove everything else that I don't want editors to mess up e.g. tables and text alignment.

It is crazy that there is no way to just enable or disable toolbar buttons for the most basic stuff.

[benjaminrobinet]

Hello, I am back at it.
How can we set a "simpler" editor @alexander-schranz ?

ckeditorConfigRegistry.add((config) => {
    return {
        toolbar: ['bold', 'italic'],
    }
});

I would like to go with that, but "field" specific (like using params)

[alexander-schranz]

@benjaminrobinet This issue is still open and there is not yet a solution yet to achieve different editors configs in sulu. So currently you can only create a custom field and content type for it: sulu/sulu-demo#79

[alexanderjakob]

My idea is that the configuration of editors is excluded from the admin build. We load configurations asynchronously and initiate our editors after loading them. Configurations only contain config-related JS, e.g.

CKEditor.config({
    toolbar: ['Bold', 'Italic', 'FooBar']
});

So we can do other stuff (e.g. loading different css files for different webspaces) right here too.

An use of the configurations could look like this:

<property name="content" type="text_editor">
    <params>
        <param name="config_key" value="my_config"/>
        // "big way", which looks for my_config.js at a location to be defined

        <param name="config_use" value="Bold,Italic"/> 
        // "short way" e.g. for one-liners, keys analog to CKE configs, which is generic and adds only the given keys to the toolbar or the given config_key's file

        <param name="config_remove" value="Bold"/> 
        // "exclude way", keys analog to CKE configs, which will be removed from a default config or the given config_key's file
     </params>
 </property>

These configs will only be loaded when the given property / field (here: "content") is present.

[lerouxm]

Upvoted! While a full ckeditor (even enhanced !) is nice to have for articles, a simpler text formatting option (like bold/italic) would make the experience much smoother for users in many other use cases without the need of using things like "html tags in textareas" (meh !).

The best implementation I can think of, for now, as already described in the previous comments would be something kind of like :

app.js

ckeditorPluginRegistry.add(font);

// Enhanced global configuration
ckeditorConfigRegistry.add((config) => ({
    toolbar: [...config.toolbar, 'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor'],
}));

// Custom configuration
ckeditorConfigRegistry.add('minimal', (config) => {
    config.toolbar = ['bold', 'italic'];
});

component.xml

<!-- Standard (thus enhanced) ckEditor -->
<property name="content" type="text_editor">
</property>

<!-- Custom profile -->
<property name="content" type="text_editor">
    <params>
        <param name="editor_profile" value="minimal" />
    </params>
</property>

Shoutout to whoever can make this happen ! 😄