CKEditor 4 react dropdowns does not opening, when editor switch to full screen mode in Next.Js

Viewed 219

I'm using CKEditor 4 react in my Next.js project. I have a problem in my dropdown toolbars when editor switched on full screen mod. My problem is as follows :‌

  1. on clicking on the font-size drop down in toolbar the options appear and I can select a size (It works correctly as expected)
  2. I click on "Maximize" button in toolbar and the screen size change
  3. Now I repeat step1 again but options of font-size drop down doesn't appear (Not expected behavior)
<CKEditor
    data={this.state.static_page.content}
    onChange={this.onEditorChange}
    config = {{
        allowedContent : true ,
        embed_provider: '//ckeditor.iframe.ly/api/oembed?url={url}&callback={callback}',
        extraPlugins :`justify,font,colorbutton,smiley,pagebreak,iframe,find,save,exportpdf,preview,print,selectall,forms,copyformatting,showblocks,uploadfile,uploadimage,autoembed,embed`,
        filebrowserBrowseUrl: photo_url,
        filebrowserUploadUrl: photo_url,
        toolbar : [
            { name: 'document', items: [ 'Source', '-', 'Save', 'NewPage', 'ExportPdf', 'Preview', 'Print', '-', ] },
            { name: 'clipboard', items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },
            { name: 'editing', items: [ 'Find', 'Replace', '-', 'SelectAll', '-'
                // , 'Scayt'
            ] },
            '/',
            { name: 'forms', items: [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton'
                // , 'HiddenField'
            ] },
            '/',
            { name: 'basicstyles', items: [ 'Bold', 'Italic', 'Underline', 'Strike',
                //  'Subscript',
                //  'Superscript',
                '-', 'CopyFormatting', 'RemoveFormat' 
            ] },
            { name: 'paragraph', items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote',
                //  'CreateDiv',
                '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-',
                // 'BidiLtr', 'BidiRtl',
                //  'Language'
            ] },
            { name: 'links', items: [ 'Link','Unlink', 'Anchor'
                // ,'autolink'
            ] },
            { name: 'insert', items: [ 'Image','Embed','Auto-embed', 'Iframe', 'Table', 'HorizontalRule', 'Smiley','SpecialChar', 'PageBreak' ] },
            '/',
            { name: 'styles', items: [ 'Styles', 'Format', 'Font', 'FontSize' ] },
            { name: 'colors', items: [ 'TextColor', 'BGColor' ] },
            { name: 'tools', items: [ 'Maximize', 'ShowBlocks' ] },
        ],
        language: "fa",
        uiColor :'#b9a168',
        // extraAllowedContent : 'button(*)[*]' ,
        extraAllowedContent :true,
        copyFormatting_allowRules :true,
        copyFormatting_allowedContexts:true,
        contentsLanguage :'fa',
        contentsLangDirection : 'rtl',
        // justifyClasses :['AlignLeft', 'AlignCenter', 'AlignRight', 'AlignJustify' ],
        pasteFilter:'semantic-content',
        removeEmpty : false,
    }}
    // onPaste ={this.onEditorPaste}
    // onBeforeLoad={console.log("onBeforeLoad")}
/>

I test this on a react project and it worked correctly, but in next project it doesn't work correctly so I think this problem related to my framework.

0 Answers
Related