0

I am using ckeditor4-react package in my react app. When I want to add image to text, file browser is opening, I select the image or upload the image but I cannot change the size of the image or add alternate text. Because text fields are disabled. 

let c = { 
filebrowserBrowseUrl: 'http://localhost:3002/admin/photopicker', 
filebrowserUploadUrl: `https://api.cloudinary.com/v1_1/${config.cloud_name}/upload`
};

<CKEditor 
config={c} 
ref="editor" 
data={this.props.data} 
onChange={this.props.onEditorChange} 
onFileUploadRequest={this.onFileUploadRequest} 
onFileUploadResponse={this.onFileUploadResponse} 
onDialogShow={this.onDialogShow} />

I expect to edit size like in the demo: https://ckeditor.com/docs/ckeditor4/latest/examples/image.html

Alternative Text, width, height, border, HSpace and VSpace fields are not editable

İlknur YILDIRIM
  • 11
  • 4

1 Answers1

0

It seems to me that your ckeditor react package has been installed with the 

config.readOnly

property set to true.

Try including this under your CKEditor tag:

readOnly={false}

or, changing the package configuration.

See: CKEditor readOnly config property for more info on that.

Albert
  • 487
  • 1
  • 4
  • 16
  • This problem is similar with this question : https://stackoverflow.com/questions/19570661/ckeditor-plugin-text-fields-not-editable -- however i could not apply the given solution to my code. – İlknur YILDIRIM Apr 28 '19 at 17:32
  • Are you using Bootbox or some other type of library/framework to generate your custom dialog? If that is the case then according to given descriptions, it seems that finding and removing tabindex of -1 from that custom dialog fixes the issue. Have you managed to remove it? – j.swiderski Apr 29 '19 at 07:52
  • I am using material-ui version 3.6.2. I modified the dashboard layout. One page is my editor page and I add CKEditor component. I did not use any other library for custom dialog for image import. Dialog is default ckeditor file manager dialog. I think there is a bug in "ckeditor4-react" version "0.1.0". There is no other version for ckeditor 4. Maybe I will try with ckeditor 5. – İlknur YILDIRIM Apr 29 '19 at 19:01
  • I am listening dialog show event. Event fired when a dialog is shown. It returns an evt parameter that includes This editor instance and The opened dialog instance. I try to remove tab index with this => evt.data.parts.dialog.$.tabIndex = undefined and evt.data.parts.contents.$.tabIndex = undefined commands but it did not effect – İlknur YILDIRIM Apr 29 '19 at 19:14