How to include a non-plugin based feature of CKEditor (TextTransformation)?

[lukew-cogapp]

Description

CKEditor features Text Transformation functionality:
https://ckeditor.com/docs/ckeditor5/43.3.1/features/text-transformation.html
However, this is part of the ckeditor5 package and installation instructions include:
import { ClassicEditor, TextTransformation } from 'ckeditor5';

We don't believe this is a "first party plugin", as it is not listed separately. here:
https://github.com/ckeditor/ckeditor5/tree/master/packages

Therefore, we're not sure what the best way to go about including this functionality is.

We tried this, but the TextTransformation plugin cannot be found:

{
    "plugins": [ "TextTransformation" ],
    "textTransformation": {
        "extraTransformations": {
            "quotes": true,
            "dashes": true
        }
    }
}

How might we go about this?
Thanks,
Luke

[lukew-cogapp]

Would this be a case of you including this as an additional plugin? like you do here:
https://github.com/craftcms/ckeditor/blob/4.x/src/web/assets/ckeditor/src/ckeditor5-craftcms.js

Thanks,
Luke

[lukew-cogapp]

Hello, we also have a requirement for the Paste from Office plugin, as by default CKEditor is not stripping out the markup MS Word is adding:
https://ckeditor.com/docs/ckeditor5/latest/features/pasting/paste-from-office.html

[i-just]

Hi, thanks for reaching out!

As of version 42.0.0, CKEditor has changed the format of the import paths and moved to new installation methods. The legacy methods are still supported until the end of 2025, and we’re working on a new version of our plugin, which will use one of the new installation methods.

For now, you need to follow the docs on how to include extra packages. In the CKEditor’s docs, there’s always a notice in the installation section that helps figure out how to install any plugins the legacy way.

In terms of Text Transform, you can find extra info on how to include that functionality here.

The Paste from Office plugin is already a part of Craft’s CKEditor plugin: https://github.com/craftcms/ckeditor/blob/4.6.0/src/web/assets/ckeditor/src/ckeditor5-craftcms.js#L44.

I hope this helps!

I will close this now, but feel free to reply if you run into further issues.

[lukew-cogapp]

Hi @i-just,

Is the paste from office plugin just always enabled? Or do we need to explicitly enable it in the config?

I tried adding PasteFromOffice as a plugin in the config, but get an error:

plugincollection-plugin-not-found {"plugin":"PasteFromOffice"}

Am I thinking about this in the wrong way? We're experiencing this, whereby clients are pasting content from Word, but bringing all the extra styles (that we don't want) into CKEditor:

Is this a case of removing what is allowed in CKEditor, and it will get stripped on paste?
e.g. don't allow <span> elements. Or alternatively (or in addition to) is there a way to strip out style tags on paste?

[i-just]

The Paste from Office plugin is enabled by default, and it allows you to keep the formatting: “Paste from Office features let you paste content from Microsoft Word and Microsoft Excel and preserve its original structure and formatting.”

It will only preserve the formatting and structures that you’ve enabled in the CKEditor Config used by the field (more info).

You can disable any plugins that don’t have corresponding toolbar buttons and are enabled by default by adding them to your CKEditor Config under Config Options. For example (js option):

return {
  removePlugins: ["PasteFromOffice"],
}

If your goal is to remove formatting after users paste the content into the CKEditor field, you might want to look at Remove Format or Paste as Plain Text (both are already included in Craft’s CKEditor plugin).