Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

On Page Reload ckEditor display loading spinner #162

Closed
zgavrilovic-itk opened this issue Sep 26, 2024 · 1 comment
Closed

On Page Reload ckEditor display loading spinner #162

zgavrilovic-itk opened this issue Sep 26, 2024 · 1 comment
Labels
issue: bug Something isn't working

Comments

@zgavrilovic-itk
Copy link

Describe the bug
On first load everything works well. On page reload ckEditor present spinner.
image

To Reproduce
Steps to reproduce the behavior:

  1. Load ckEditor first time.
  2. Reload page

Expected behavior
On page reload to load ckEditor

Screenshots
Added in description

please complete the following information:
node: v18.20.2

    "@_sh/strapi-plugin-ckeditor": "3.0.0",
    "@strapi/plugin-color-picker": "^4.25.11",
    "@strapi/plugin-i18n": "4.25.11",
    "@strapi/plugin-users-permissions": "^4.25.11",
    "@strapi/strapi": "4.25.11",
const CKEConfig = () => ({
  presets: {
    custom: {
      styles: ` `,
      /* Custom field option */
      field: {
        key: 'custom',
        value: 'custom',
        metadatas: {
          intlLabel: {
            id: 'ckeditor5.preset.custom.label',
            defaultMessage: 'Custom version',
          },
        },
      },
      /* CKEditor configuration */
      editorConfig: {
        plugins: [
          SH_CKE.Bold,
          SH_CKE.Italic,
          SH_CKE.Underline,
          SH_CKE.Essentials,
          SH_CKE.Heading,
          SH_CKE.Image,
          SH_CKE.Alignment,
          SH_CKE.ImageCaption,
          SH_CKE.ImageStyle,
          SH_CKE.ImageToolbar,
          SH_CKE.ImageUpload,
          SH_CKE.Indent,
          SH_CKE.Link,
          SH_CKE.List,
          SH_CKE.Paragraph,
          SH_CKE.PasteFromOffice,
          SH_CKE.Table,
          SH_CKE.TableToolbar,
          SH_CKE.TableColumnResize,
          SH_CKE.TableCaption,
          SH_CKE.StrapiMediaLib,
          SH_CKE.StrapiUploadAdapter,
          SH_CKE.FontBackgroundColor,
          SH_CKE.FontColor,
          SH_CKE.FontFamily,
          SH_CKE.FontSize,
          SH_CKE.SpecialCharacters,
          SH_CKE.SpecialCharactersArrows,
          SH_CKE.SpecialCharactersCurrency,
          SH_CKE.SpecialCharactersLatin,
          SH_CKE.SpecialCharactersMathematical,
          SH_CKE.SpecialCharactersText,
        ],
        language: {
        },
        fontColor: {
          columns: 5,
          colors: [
            {
              color: '#1B1B1B',
              label: 'Grey 1',
            },
            {
              color: '#2C2C2C',
              label: 'Grey 2',
            },
            {
              color: '#C5C5C5',
              label: 'Grey 3',
            },
            {
              color: '#DADADA',
              label: 'Grey 4',
            },
            {
              color: '#DADADA',
              label: 'Grey 5',
            },
            {
              color: '#FFF',
              label: 'White',
            },
            {
              color: '#DB0505',
              label: 'MIFCOM Red',
            },
          ],
        },
        fontBackgroundColor: {
          columns: 5,
          colors: [
            {
              color: '#1B1B1B',
              label: 'Grey 1',
            },
            {
              color: '#2C2C2C',
              label: 'Grey 2',
            },
            {
              color: '#C5C5C5',
              label: 'Grey 3',
            },
            {
              color: '#DADADA',
              label: 'Grey 4',
            },
            {
              color: '#DADADA',
              label: 'Grey 5',
            },
            {
              color: '#FFF',
              label: 'White',
            },
            {
              color: '#DB0505',
              label: 'MIFCOM Red',
            },
          ],
        },
        fontSize: {
          options: [12, 14, 16, 18, 20, 24, 28, 32, 36, 40, 48, 64],
          supportAllValues: false,
        },
        fontFamily: {
          options: [
            'default',
            'titillium-web-v15-latin-200',
            'titillium-web-v15-latin-300',
            'titillium-web-v15-latin-600',
            'titillium-web-v15-latin-700',
            'Arial, Helvetica Neue, Helvetica, Source Sans Pro, sans-serif',
            'Roboto, Roboto Black, Roboto Medium, Roboto Light, sans-serif',
          ],
          supportAllValues: true,
        },
        toolbar: [
          'heading',
          '|',
          'bold',
          'italic',
          'underline',
          'fontSize',
          '|',
          'fontColor',
          'fontBackgroundColor',
          '|',
          'specialCharacters',
          '|',
          'alignment:left',
          'alignment:center',
          'alignment:right',
          'fontFamily',
          'removeFormat',
          '|',
          'bulletedList',
          'todoList',
          'numberedList',
          '|',
          'outdent',
          'indent',
          'horizontalLine',
          '|',
          'StrapiMediaLib',
          'insertTable',
          'blockQuote',
          'mediaEmbed',
          'link',
          'highlight',
          '|',
          'htmlEmbed',
          'sourceEditing',
          'code',
          'codeBlock',
          '|',
          'subscript',
          'superscript',
          'strikethrough',
          'specialCharacters',
          '|',
          'fullScreen',
          'undo',
          'redo',
        ],
        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',
            },
          ],
        },
        image: {
          resizeUnit: '%',
          resizeOptions: [
            {
              name: 'resizeImage:original',
              value: null,
              icon: 'original',
            },
            {
              name: 'resizeImage:25',
              value: '25',
              icon: 'small',
            },
            {
              name: 'resizeImage:50',
              value: '50',
              icon: 'medium',
            },
            {
              name: 'resizeImage:75',
              value: '75',
              icon: 'large',
            },
          ],
          toolbar: [
            'toggleImageCaption',
            'imageTextAlternative',
            'imageStyle:inline',
            'imageStyle:block',
            'imageStyle:side',
            'linkImage',
            'resizeImage:25',
            'resizeImage:50',
            'resizeImage:75',
            'resizeImage:original',
          ],
        },
        table: {
          contentToolbar: ['tableColumn', 'tableRow', 'mergeTableCells', '|', 'toggleTableCaption'],
        },
      },
    },
  },
  theme: {
  },
});

@zgavrilovic-itk
Copy link
Author

After investigation,
Language object product this issue, since it is empty in my example.
Diff file:
image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
issue: bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants