Unable to add a custom image style (side-image-left)

[Tyler-V]

📝 Provide detailed reproduction steps (if any)

I followed the guide listed in here, I am confused why I am unable to add a custom image style.

I added the appropriate properties, I am importing a sideIcon and referencing the name I give it in the toolbar.

strapi/plugins/wysiwyg/admin/src/components/CKEditor/index.js

import React from "react";
import PropTypes from "prop-types";
import CKEditor from "@ckeditor/ckeditor5-react";
import ClassicEditor from "ckeditor5-build-classic-image-resize";
import styled from "styled-components";
import sideIcon from "@ckeditor/ckeditor5-core/theme/icons/object-right.svg";

const Wrapper = styled.div`
  .ck-editor__main {
    min-height: 200px;
    > div {
      min-height: 200px;
    }
  }
`;

const configuration = {
  toolbar: [
    "heading",
    "|",
    "bold",
    "italic",
    "link",
    "bulletedList",
    "numberedList",
    "|",
    "indent",
    "outdent",
    "|",
    "blockQuote",
    "insertTable",
    "mediaEmbed",
    "undo",
    "redo",
  ],
  image: {
    toolbar: [
      "imageStyle:full",
      "imageStyle:side",
      "imageStyle:alignLeft",
      "imageStyle:alignCenter",
      "imageStyle:alignRight",
      "|",
      "imageStyle:sideLeft",
      "|",
      "imageTextAlternative",
    ],
    styles: [
      "full",
      "side",
      "alignLeft",
      "alignCenter",
      "alignRight",
      {
        name: "sideLeft",
        title: "To the left side",
        icon: sideIcon,
        className: "side-image-left",
      },
    ],
    resizeUnit: "px",
  },
};

const Editor = ({ onChange, name, value }) => {
  return (
    <Wrapper>
      <CKEditor
        editor={ClassicEditor}
        config={configuration}
        data={value}
        onChange={(event, editor) => {
          const data = editor.getData();
          onChange({ target: { name, value: data } });
        }}
      />
    </Wrapper>
  );
};

Editor.propTypes = {
  onChange: PropTypes.func.isRequired,
  name: PropTypes.string.isRequired,
  value: PropTypes.string,
};

export default Editor;

✔️ Expected result

To display a custom image style in the toolbar allowing me to apply a side-image-left class to the image.

❌ Actual result

📃 Other details

• Browser: Chrome
• OS: Windows
• CKEditor version: ckeditor5-build-classic-image-resize

I am using CKEditor (react) embedded in Strapi

---

If you'd like to see this fixed sooner, add a 👍 reaction to this post.

[FilipTokarski]

Hi, thanks for the report. The problem here is adding the icon to an already built editor. As long as you change the config without adding icons, this works fine. The solution that worked for me was integrating editor from source. However, if you don't want to do that, I'd recommend first building a standalone editor with all the configuration you need ( image styles, icons, etc. ), and then adding it to your react app. This should fix the problem.

[Tyler-V]

Thanks for the reply @FilipTokarski

If I set it as following,

  image: {
    toolbar: [
      "imageStyle:full",
      "imageStyle:side",
      "imageStyle:alignLeft",
      "imageStyle:alignCenter",
      "imageStyle:alignRight",
      "|",
      "imageStyle:sideLeft",
      "|",
      "imageTextAlternative",
    ],
    styles: [
      "full",
      "side",
      "alignLeft",
      "alignCenter",
      "alignRight",
      {
        name: "sideLeft",
        title: "To the left side",
        icon: leftIcon,
        className: "side-image-left",
      },
    ],
    resizeUnit: "px",
  },

I get the following:

However, I can see the leftIcon is imported as part of the classic editor already as you indicated

https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-image/src/imagestyle/utils.js

[dtdesign]

For anyone coming across this issue: The code from @Tyler-V almost works, the icon needs to be set to icons.objectLeft where icons is an exported property of @ckeditor/ckeditor5-core. Also, instead of providing a plain array to the styles property, is must now be wrapped as styles: { options: thePreviouslyProvidedArrayGoesHere }.

A working example can be found at https://github.com/WoltLab/editor/commit/d3927ae120378713a868024997044eeb85590c29

[CKEditorBot]

There has been no activity on this issue for the past year. We've marked it as stale and will close it in 30 days. We understand it may still be relevant, so if you're interested in the solution, leave a comment or reaction under this issue.