SuluCMS v2.5 uses CKEditor v.5 where Source editing is an additional plugin to CKEditor. Source editing button (toolbar) is not included by default.

As SuluCMS has transitioned to CKEditor 5.x, and you want to enable the Source Editing feature, you would indeed need to install the Source Editing plugin as an additional JavaScript dependency.

So, to have "Source editing" feature in Sulu CMS admin, we have to:

1. Install Source editing plugin
2. Customize CKEditor by adding additional plugin to CKEditor registry.

1. Install Source Editing CKEditor plugin

The correct to install dependency would be:

npm install --save @ckeditor/ckeditor5-source-editing

But you don't need to run this command, just go to the file your file assets/admin/package.json:

1.1) Modify admin frontend package.json by adding ckeditor5-source-editing dependency

Note: try using ckeditor5-source-editing the same version as other CKEditor dependencies.

Go to assets/admin/package.json, modify file by adding "@ckeditor/ckeditor5-source-editing": "^34.2.0"(see screenshot):

1.2) Run admin frontend build using command:

bin/adminconsole sulu:admin:update-build

Answer command' questions:

Do you want to overwrite your local version of "app.js"?:

No.

Do you want to overwrite your local version of "package.json"? 

No.

Merge "package.json" together like above? [y]:

Yes.

Do you want to create a build now? [y]:

Yes.

We did it! But still you would not see Source editing in your administration interface CKEditor because we should "register" the plugin and add a new toolbar for it. Then go to next final customize step.

2) Customize CKEditor by adding additional plugin to CKEditor registry

Go to your file assets/admin/app.js. By default this file is empty after Sulu installation:

// Add project specific javascript code and import of additional bundles here:

So, let's do our stuff in this file. Change the app.js file to be like:

// Add project specific javascript code and import of additional bundles here:

// CKEditor customization
// see https://github.com/sulu/sulu-demo/pull/77
import {ckeditorPluginRegistry, ckeditorConfigRegistry} from 'sulu-admin-bundle/containers';
import SourceEditing from '@ckeditor/ckeditor5-source-editing/src/sourceediting';

ckeditorPluginRegistry.add(SourceEditing);

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

In the javascript code above, we keep all options of existing CKEditor config. In addition, we register SourceEditing plugin and add a new toolbar "sourceEditing". Official README.md:

The PluginRegistry has an add method which takes the plugin class for the CKEditor, while the ConfigRegistry takes a function, which receives the config which is already there. The return value of this function will be shallow merged with the previously existing config. You can reuse the old values from the config, as seen e.g. in the above code snippet.

After adding dependency to `ckeditorPluginRegistry` and `sourceEditing` toolbar, the only remaining thing you need is to run admin frontend build again to rebuild javascripts. 

Now you have to see "Source editing" feature in your SuluCMS installation:

Disable Advanced Content Filter

You might need to disable ACF (Advanced Content Filter). This feature removes all extra attributes and tags when you switch back from Source editing to usual mode. You can modify the configuration to remove ACF-related settings. ACF is responsible for removing certain markup and attributes to ensure the content's safety and cleanliness. By disabling it, you'll allow any extra markup to remain when switching from the source to the editor.

In your code, you can achieve this by setting the allowedContent configuration option to 'true' or true.

Also, you might need to add @ckeditor/ckeditor5-html-support dependency to your assets/admin/package.json for htmlSupport.

// CKEditor customization
// see https://github.com/sulu/sulu-demo/pull/77
import {ckeditorPluginRegistry, ckeditorConfigRegistry} from 'sulu-admin-bundle/containers';
import SourceEditing from '@ckeditor/ckeditor5-source-editing/src/sourceediting';
import GeneralHtmlSupport from '@ckeditor/ckeditor5-html-support/src/generalhtmlsupport';
import ListProperties from '@ckeditor/ckeditor5-list/src/listproperties';

ckeditorPluginRegistry.add(SourceEditing);
ckeditorPluginRegistry.add(GeneralHtmlSupport);
ckeditorPluginRegistry.add(ListProperties);

ckeditorConfigRegistry.add((config) => {
    const resultConfig = {
        ...config,
        allowedContent: true,
        extraAllowedContent: '*(*)',
        toolbar: [...config.toolbar, 'sourceEditing'],
        htmlSupport: {
            allow: [
                {
                    name: /.*/,
                    attributes: true,
                    classes: true,
                    styles: true
                }
            ]
        },
        heading: {
            options: [
                { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
                { model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
                { model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' },
                { model: 'heading3', view: 'h3', title: 'Heading 3', class: 'ck-heading_heading3' },
                { model: 'heading4', view: 'h4', title: 'Heading 4', class: 'ck-heading_heading4' },
                { model: 'heading5', view: 'h5', title: 'Heading 5', class: 'ck-heading_heading5' },
                { model: 'heading6', view: 'h6', title: 'Heading 6', class: 'ck-heading_heading6' }
            ]
        },
        list: {
            properties: {
                styles: true,
                startIndex: true,
                reversed: true
            }
        }
    };

    return resultConfig;
});

Do it on your risk as this config allows any html attributes. I do because I prefer freedom.