Roslovets-Inc/strapi-plugin-ckeditor5

Extension doesn't work in strapi v 4.1.8

ailchenkoDynamo opened this issue · 2 comments

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",
       },
     },
   ],
 },
};

Hi,

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

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