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 :
- on clicking on the font-size drop down in toolbar the options appear and I can select a size (It works correctly as expected)
- I click on "Maximize" button in toolbar and the screen size change
- 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.