Roslovets-Inc / strapi-plugin-ckeditor5

Replace Strapi default WYSIWYG editor with enhanced build of CKEditor 5
https://www.npmjs.com/package/strapi-plugin-ckeditor5
247 stars 59 forks source link

Extension doesn't work in strapi v 4.1.8 #48

Open ailchenkoDynamo opened 2 years ago

ailchenkoDynamo commented 2 years ago

Hi. Thanks for your work.

My custom ckeditor.js file doesn't rewrite default plugin's conficuration.

My step for reproduse:

  1. Install plugin: yarn add strapi-plugin-ckeditor5@latest
  2. Create file by path: src/extensions/ckeditor5/admin/src/config/ckeditor.js
  3. Copy content from node_modules/strapi-plugin-ckeditor5/admin/src/config/ckeditor.js to my src/extensions/ckeditor5/admin/src/config/ckeditor.js
  4. Remove all Items except fontFamily
  5. Remove .cache and build folder
  6. Run yarn build and run strupi

Result: I see default toolbar items Expected: Change toobar by my config

My config

 module.exports = {
  ////// CONFIGURATION TEMPLATE: uncomment desired lines to override default config.
  ////// While all lines are commented, config will not change anything.
  toolbar: {
    items: [
      "fontFamily",
    ],
    shouldNotGroupWhenFull: true
  },
  image: {
    styles: [
      "alignCenter",
      "alignRight",
    ],
    resizeOptions: [
      {
        name: "resizeImage:original",
        value: null,
        icon: "original"
      },
      {
        name: "resizeImage:50",
        value: "50",
        icon: "medium"
      },
      {
        name: "resizeImage:75",
        value: "75",
        icon: "large"
      }
    ],
    toolbar: [
      "imageStyle:alignLeft",
      "imageStyle:alignCenter",
      "imageStyle:alignRight",
      "|",
      "imageTextAlternative",
      "|",
      "resizeImage:50",
      "resizeImage:75",
      "resizeImage:original",
      "|",
      "linkImage",
    ]
  },
  table: {
    contentToolbar: [
      "tableColumn",
      "tableRow",
      "mergeTableCells",
      "tableProperties",
      "tableCellProperties",
    ]
  },
  fontColor: {
    colors: [
      {color: "hsl(0, 0%, 0%)", label: "Black"},
      {color: "hsl(0, 0%, 30%)", label: "Dim grey"},
      {color: "hsl(0, 0%, 60%)", label: "Grey"},
      {color: "hsl(0, 0%, 90%)", label: "Light grey"},
      {color: "hsl(0, 0%, 100%)", label: "White", hasBorder: true},
      {color: "hsl(0, 75%, 60%)", label: "Red"},
      {color: "hsl(30, 75%, 60%)", label: "Orange"},
      {color: "hsl(60, 75%, 60%)", label: "Yellow"},
      {color: "hsl(90, 75%, 60%)", label: "Light green"},
      {color: "hsl(120, 75%, 60%)", label: "Green"},
      {color: "hsl(150, 75%, 60%)", label: "Aquamarine"},
      {color: "hsl(180, 75%, 60%)", label: "Turquoise"},
      {color: "hsl(210, 75%, 60%)", label: "Light blue"},
      {color: "hsl(240, 75%, 60%)", label: "Blue"},
      {color: "hsl(270, 75%, 60%)", label: "Purple"},
    ],
  },
  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"},
    ]
  },
  highLight: {
    options: [
      {
        model: "yellowMarker",
        class: "marker-yellow",
        title: "Yellow marker",
        color: "var(--ck-highlight-marker-yellow)",
        type: "marker",
      },
      {
        model: "greenMarker",
        class: "marker-green",
        title: "Green marker",
        color: "var(--ck-highlight-marker-green)",
        type: "marker",
      },
      {
        model: "pinkMarker",
        class: "marker-pink",
        title: "Pink marker",
        color: "var(--ck-highlight-marker-pink)",
        type: "marker",
      },
      {
        model: "blueMarker",
        class: "marker-blue",
        title: "Blue marker",
        color: "var(--ck-highlight-marker-blue)",
        type: "marker",
      },
      {
        model: "redPen",
        class: "pen-red",
        title: "Red pen",
        color: "var(--ck-highlight-pen-red)",
        type: "pen",
      },
      {
        model: "greenPen",
        class: "pen-green",
        title: "Green pen",
        color: "var(--ck-highlight-pen-green)",
        type: "pen",
      },
    ],
  },
  htmlEmbed: {
    // showPreviews: true,
  },
  fontFamily: {
    options: [
      "default",
      "Arial, Helvetica, sans-serif",
      "Courier New, Courier, monospace",
      "Georgia, serif",
      "Lucida Sans Unicode, Lucida Grande, sans-serif",
      "Tahoma, Geneva, sans-serif",
      "Times New Roman, Times, serif",
      "Trebuchet MS, Helvetica, sans-serif",
      "Verdana, Geneva, sans-serif",
      "JetBrains Mono, monospace",
      "Lato, Inter, sans-serif",
    ],
  },
  link: {
    defaultProtocol: "http://",
    decorators: [
      {
        mode: "manual",
        label: "Open in a new tab",
        defaultValue: true,
        attributes: {
          target: "_blank",
          rel: "noopener noreferrer",
        },
      },
      {
        mode: "manual",
        label: "Downloadable",
        attributes: {
          download: "download",
        },
      },
    ],
  },
};
portu89 commented 2 years ago

Hi,

i got this issue too, u can solve it @ailchenkoDynamo or still having this problem?

ihmpavel commented 2 years ago

Hi, I am not sure you read correctly the limitations https://github.com/Roslovets-Inc/strapi-plugin-ckeditor5#how-to-remove-unused-buttons-strapi-v3

You are unable to change default toolbar with v4