codeslayer1 / react-ckeditor Goto Github PK

When using scriptUrl="static/ckeditor/ckeditor.js" change events aren't called.

Identical code works without scriptUrl. scriptUrl is referring to a valid custom ckeditor build.

It would be nice if we could hook additional events in the CKEditor such as "blur".

The simplest change would be to provide an additional prop, "onBlur", which you would handle much like you currently handle the onChange prop.

A more general approach would be to take an "events" prop akin to the current "config" prop, which would map various CKEditor event strings to callbacks, allowing something like:

        <CKEditor
            content={this.state.text}
            onChange={this.onChange}
            config={{
                readOnly: this.props.readOnly,
                ...this.props.config
            }}
            events={{
                blur: this.onBlur
            }}
        />

If it's already possible to configure event handlers via config, I apologise - I'm not that familiar with CKEditor.

Also, apologies for abusing the Issues tracker to make a feature request.

Thank you for this handy react component!

hi , i need some help please . when I click on the modal popup to be open, the ckeditor takes a delay of like 3-4 sec to be loaded, can you tell me how to resolve this please ?

when I add scriptUrl to props, onChange doesn't triggers. If I remove scriptUrl component works fine.
I build ckeditor from builder tool. You can look for my build at http://app.dok32.com/ckeditor/ckeditor.js
Can you check why it doesn't works?

P.S. my build-config.js in same folder

P.P.S https://github.com/codeslayer1/react-ckeditor/blob/master/src/ckeditor.js#L49
this.editorInstance.on("change", ...) doesn't triggers

P.P.S. there is plugin for onChange event

I try to remove some unused icon at toolbar? Can you explain how to set toolbar configuration?

I try with:

config: {
  skin: 'moonocolor' (or 'moono')
}

But it's not ok.

It calls loadScript(this.props.scriptUrl, this.onLoad); on each componentDidMount, doesn't that mean on each usage of CKEditor it will try to load in the script?

Doing local development as per usual, all is well and I praise you for creating this.

I attempted to check it out via SSR. I get a ckeditor.js:77 CKEditor not found exception in the console. I'm not sure what would cause this since I wouldn't think SSR would matter at all for this.

Any help is welcome, and If you need more info to help out please let me know.
Thank you for this awesome package :)

Here is my code which I used in react:
<CKEditor activeClass="p10" content={props.content} config={{ allowedContent:true, filebrowserImageUploadUrl: 'http://localhost/core/upload.php' }} events={{ change: props.handleChange }} />

Request URL: http://localhost/core/upload.php?CKEditor=editor1&CKEditorFuncNum=1&langCode=en
Here is my upload .php response

After pressing send to server button I got following error in console

Uncaught DOMException: Blocked a frame with origin "http://localhost" from accessing a cross-origin frame.
at http://localhost/core/upload.php?CKEditor=editor1&CKEditorFuncNum=1&langCode=en:1:47

When I clicked Ok button I got error "Image source URL is missing"

Hi, thanks a lot for this component.
Sometimes about one tenth of the time CkEditor will not load with error, most of the time this error is nonexistent. With included CkEditor

Uncaught TypeError: Cannot read property 'unselectable' of null
   at b (ckeditor.js:345)
   at a.<anonymous> (ckeditor.js:341)
   at a.p (ckeditor.js:10)
   at a.<anonymous> (ckeditor.js:12)
   at a.CKEDITOR.editor.CKEDITOR.editor.fire (ckeditor.js:13)
   at a.fireOnce (ckeditor.js:12)
   at a.CKEDITOR.editor.CKEDITOR.editor.fireOnce (ckeditor.js:13)
   at Object.<anonymous> (ckeditor.js:264)
   at f (ckeditor.js:244)
   at Object.load (ckeditor.js:244)

And with newer version of CkEditor 4.8.0 i have the similar error:

Uncaught TypeError: Cannot read property 'unselectable' of null
    at b (ckeditor.js:345)
    at a.<anonymous> (ckeditor.js:341)
    at a.p (ckeditor.js:10)
    at a.<anonymous> (ckeditor.js:12)
    at a.CKEDITOR.editor.CKEDITOR.editor.fire (ckeditor.js:13)
    at a.fireOnce (ckeditor.js:12)
    at a.CKEDITOR.editor.CKEDITOR.editor.fireOnce (ckeditor.js:13)
    at Object.<anonymous> (ckeditor.js:264)
    at f (ckeditor.js:244)
    at Object.load (ckeditor.js:244)
    at ckeditor.js:263
    at CKEDITOR.resourceManager.<anonymous> (ckeditor.js:251)
    at CKEDITOR.resourceManager.<anonymous> (ckeditor.js:249)
    at f (ckeditor.js:244)
    at Object.load (ckeditor.js:244)
    at CKEDITOR.resourceManager.load (ckeditor.js:249)
    at CKEDITOR.resourceManager.k (ckeditor.js:250)
    at CKEDITOR.resourceManager.load (ckeditor.js:251)
    at B (ckeditor.js:262)
    at ckeditor.js:261
    at ckeditor.js:491
    at CKEDITOR.resourceManager.<anonymous> (ckeditor.js:249)
    at f (ckeditor.js:244)
    at Array.B (ckeditor.js:244)
    at u (ckeditor.js:244)
    at ckeditor.js:245

Sometimes CKEditor won't even load with following error (4.8.0) and with version included in component

TypeError: a.ui.space(...) is null
ckeditor.js:329:102
b
https://cdn.ckeditor.com/4.8.0/standard/ckeditor.js:329:102
a/<
https://cdn.ckeditor.com/4.8.0/standard/ckeditor.js:325:416
c
https://cdn.ckeditor.com/4.8.0/standard/ckeditor.js:10:68
CKEDITOR.event.prototype</<.fire</<
https://cdn.ckeditor.com/4.8.0/standard/ckeditor.js:11:428
CKEDITOR.editor.prototype.fire
https://cdn.ckeditor.com/4.8.0/standard/ckeditor.js:13:67
fireOnce
https://cdn.ckeditor.com/4.8.0/standard/ckeditor.js:12:81
CKEDITOR.editor.prototype.fireOnce
https://cdn.ckeditor.com/4.8.0/standard/ckeditor.js:13:219
n/</<
https://cdn.ckeditor.com/4.8.0/standard/ckeditor.js:255:339
f
https://cdn.ckeditor.com/4.8.0/standard/ckeditor.js:236:320
load
https://cdn.ckeditor.com/4.8.0/standard/ckeditor.js:236:345
n/<
https://cdn.ckeditor.com/4.8.0/standard/ckeditor.js:254:401
k/<
https://cdn.ckeditor.com/4.8.0/standard/ckeditor.js:243:24
load/<
https://cdn.ckeditor.com/4.8.0/standard/ckeditor.js:241:343
f
https://cdn.ckeditor.com/4.8.0/standard/ckeditor.js:236:320
load
https://cdn.ckeditor.com/4.8.0/standard/ckeditor.js:236:345
load
https://cdn.ckeditor.com/4.8.0/standard/ckeditor.js:241:74
k
https://cdn.ckeditor.com/4.8.0/standard/ckeditor.js:242:50
CKEDITOR.plugins.load</<
https://cdn.ckeditor.com/4.8.0/standard/ckeditor.js:243:53
n
https://cdn.ckeditor.com/4.8.0/standard/ckeditor.js:253:260
f/<
https://cdn.ckeditor.com/4.8.0/standard/ckeditor.js:252:436
getStylesSet/<
https://cdn.ckeditor.com/4.8.0/standard/ckeditor.js:479:280
load/<
https://cdn.ckeditor.com/4.8.0/standard/ckeditor.js:241:343
f
https://cdn.ckeditor.com/4.8.0/standard/ckeditor.js:236:320
n
https://cdn.ckeditor.com/4.8.0/standard/ckeditor.js:236:465
p
https://cdn.ckeditor.com/4.8.0/standard/ckeditor.js:237:40
q/f.$.onload/<
https://cdn.ckeditor.com/4.8.0/standard/ckeditor.js:237:468

the fix:

constructor(props) {
    super(props);
    this.onChange = this.onChange.bind(this);
}

Hi. At first, thanks for this awesome component.
I know that issues is not a right place for asking questions, but how can I load a plugins? Is it even possible?
I am trying to pass a path for plugin js-file directly into "scriptUrl" props,

scriptUrl={'./cke-plugins/justify/plugin.js'}

but this leads to an error.

CKEditor not found

I have a React\Flux app. When entering the parent component of the CKEditor, I'm fetching data from the server, so in the initial loading, the 'content' prop of the CKEditor is empty, and after a few moments (when the fetching is done) the CKEditor component receives the content (props.content), but it doesn't always show it.
It actually depends on the loading of the parent component, when the user refreshes the page then everything works good, but if the user navigates from another component (different route) then the props.content in the CKEditor contains the content, but nothing is being shown in the CKEditor text box.
(Just to make it clear - in both cases the props.content of the CKEditor (eventually) contains the real content, but only in one case it shows it (meaning, working properly)).
Could you please assist?
Thanks,

Hi, maybe It is just me who is missing something but I can't find the colors buttons in the toolbar. I tried with the toolbar configurator (https://ckeditor.com/latest/samples/toolbarconfigurator/index.html#basic), everything works just fine except the text and background color buttons. Is this a known issue ? How can I add them ?

Thank you

How can I set the CKEditor to Inline ?
I trying to edit your ckeditor.js,but I couldn't get a way to set the Editor to Inline.

Thanks

HI i am new with ckeditor in react , i need some help please ,if anybody can help that would be so great . I understand content prop is for setting the default value in the editor . but how do i use the setdata method ? for exemple what i am trying to do is i am fetching data from a rest api ,wich i filling my form values everytime that i click on a button. When i get the value from the rest api , i pass it to the content prop , but i am not seeing the value in the editor ..
thanks in advance.

When both the script and the default content are loaded async there is no sure why to set the correct content.

If content is loaded before script:
Component renders and mounts. user can't pass the default content since It is not loaded yet
Component copies empty content from props to state
Content loads, user pass a new value as the content props, but this has no effect
ckeditor is not ready so the user can't setData
Script loads, setting the content to the default value that is not the real content because it is getting the content from the component state not from the prop that now is set to the content that was loaded

A way to solve this is to be able to pass a callback function to be called when the script has loaded.

Another way (better I think) would be to not have state at all in this component, and use the props directly, this way if the default content gets updated between the component mount and the script loading you are going to be setting the correct content.

How to add or remove the toolbar buttons in the editor. I can understand this is a wrapper around the ckeditor. But how we can use native plugin features.

config.toolbar = [ [ 'Source', '-', 'Bold', 'Italic' ] ];

Hello,

First of all I'd like to thank you for putting this together, I've been trying to integrate CKEditor 4 & 5 within a react components library and I know how painful it is to integrate with a vDom, specially when not using a index.html file, so this is really helpful.

Now to the problem at hand:

I'm trying to set up the inline image pasting feature of CKEditor 4, I realize you use version 4.6 so it shouldn't be a problem.

However, I'm encountering two blockers, that I'm sure you already thought/faced them before:

1. As pointed in https://docs.ckeditor.com/ckeditor4/latest/guide/dev_file_upload.html#basic-configuration, I'd like to set some parameters to configure the file upload plugin, like the upload URL. But when trying to pass these parameters as a config prop to your component, I'm getting this error (sorry for no screenshots, I'm behind a proxy right now so cant upload):

Error: [CKEDITOR.resourceManager.load] Resource name "uploadimage" was not found at "https://cdn.ckeditor.com/4.6.2/standard/plugins/uploadimage/plugin.js?t=H0CG".

My configuration object:

{ extraPlugins: 'uploadimage' }

2. I'd like to subscribe to the fileUploadRequest event of the editor, as shown in https://docs.ckeditor.com/ckeditor4/latest/guide/dev_file_upload.html#request-2, so the first problem I encountered is that I'm not sure how to get the instance of my CKEditor? so I thought of getting it from one of the events defined in your events prop, I wrote this:

onEditorAfterPaste = event => { event.editor.on('fileUploadRequest', evt => { console.log('file fileUploadRequest fired, ', evt); }); };

Hoping it would fire when trying to paste an image in. Of course it didn't fire the console.log.
I'm passing this onEditorAfterPaste callback on the events prop as the afterPaste value, and I already made sure that when pasting it triggers the callback, but the subscription isn't happening, so maybe getting the instance of the editor through one of the events method is not the right thing to do it?

Thanks in advance for reading this and keep slaying!

Editor works fine without any issues when it loads for the first time with content. But when I change/update the editor content programmatically, content in editor changes, but the editor gets freezed(unable to select/focus/edit the content). It occurs only in IE. All other browsers its working fine. I tried without any props values, but still not working.

Does this component supports IE 11?

Im not sure why this happens. The editor renders when the component loads but when I refresh the page the editor does not re-render and I get this message in the console.

ckeditor.js:95 GET http://cdn.ckeditor.com/4.6.2/standard/plugins/tableselection/styles/tableselection.css/ net::ERR_ABORTED

ckeditor.js:95 GET http://cdn.ckeditor.com/4.6.2/standard/plugins/scayt/dialogs/dialog.css/ net::ERR_ABORTED

ckeditor.js:95 GET http://cdn.ckeditor.com/4.6.2/standard/plugins/copyformatting/lang/en.js/ net::ERR_ABORTED

ckeditor.js:95 GET http://cdn.ckeditor.com/4.6.2/standard/skins/bootstrapck/editor.css/ net::ERR_ABORTED

Uncaught TypeError: Cannot read property 'ltr' of undefined at Object.init (ckeditor.js:645) at Object.<anonymous> (ckeditor.js:267) at f (ckeditor.js:247) at Array.D (ckeditor.js:247) at w (ckeditor.js:247) at HTMLScriptElement.A.CKEDITOR.env.ie.f.$.onerror (ckeditor.js:248)

It is not showing underline options in the toolbar.

Is there a way to set the component as readOnly?
I've tried to set the config property readOnly using a state property called submitLoading that will be true or false.

It seems that dynamically using state to set this property won't change the property since the component is already initialized.

Here's what I got goin on:

<CKEditor
    scriptUrl="/ckeditor/ckeditor.js"
    content={data.notes}
    config={{
        removePlugins: "elementspath,uploadimage,uploadfile",
        toolbar: "None",
        readOnly: submitLoading
    }}
    events={{ instanceReady: editorReady.bind(this), change: this.editorChange.bind(this) }}
 />

Any ideas?

I have some elements using contenteditable property, it will add ckeditor toolbar automatically, is there any solution for that?

I need to only show three options to the user: Bold, Italic and Underline
But somehow the Underline option doesn't show up. I used the same config on the demo link and it works fine there.

config={{
toolbar: [
{ name: 'basicstyles', items: [ 'Underline', 'Italic', 'Bold' ] } ]
}}

can anybody help me how to enable the image upload option in the editor

I am trying to add image URL but when clicking on the image symbol ...a popup window open with input fields but none of them accept typing
I can't type image URL or even paste inside

thanks

where i can find Upload tags in image

I have a modal that have a list of text options with a copy button beside each. When you click the copy button it should take that takes and updates content which would render CKEditor with the correct content copied over showing. I have it wired up where onClick of the copy button updates editor content state, which works, but it doesn't update what the editor shows in the UI since it seems it only updates via one of the set eventListeners.

hey,
I'm unable to add the wordcount plugin to the editor could you please help.

Hey,
I am trying to use imageUpload plugin and while uploading the image i want to pass on extra parameters to the api request but the event is not firing.

onUploadRequest = (event) => {
   console.log(event)
}

<CKEditor
        ref={(editor) => { this.editor = editor; }}
        content={value}
        config={{
          filebrowserUploadUrl: '/image_upload',
        }}
        events={{
          change: this.onEditorChange,
          fileUploadRequest: this.onUploadRequest,
        }}
 />

I get: Uncaught TypeError: this.setState is not a function in my browser console when typing,

I think it's referencing the evt as this.

Some problem with subj.
When i click on button state.content become equal "", but in input field it still not changed

class App extends Component {
    constructor(props) {
        super(props);

        this.state = {
            content: 'content',
        }

        this.onChange = this.onChange.bind(this)
        this.clearData = this.clearData.bind(this)
    }

    onChange(evt){
      console.log("onChange fired with event info: ", evt.editor.getData());
      var newContent = evt.editor.getData();
      this.setState({
        content: newContent
      })
    }

    clearData() {
        this.setState({
            content: ""
        })
    }

    render() {
        return (
            <div>
                <CKEditor 
                    activeClass="p10" 
                    content={this.state.content} 
                    events={{
                        "change": this.onChange
                    }}
                />
                <button onClick={this.clearData}>Clear data</button>
            </div>
        )
    }
}

hi, please tell us how to upload images by your component?

Is there a way to put text align in ckeditor?

ckeditor.js:10 Uncaught TypeError: Cannot read property 'call' of undefined
at a.p (ckeditor.js:10)
at a. (ckeditor.js:12)
at a.CKEDITOR.editor.CKEDITOR.editor.fire (ckeditor.js:13)
at CKEDITOR.plugins.undo.UndoManager.save (ckeditor.js:1020)
at a. (ckeditor.js:1016)
at a.p (ckeditor.js:10)
at a. (ckeditor.js:12)
at a.CKEDITOR.editor.CKEDITOR.editor.fire (ckeditor.js:13)
at ckeditor.js:576

Hi, is it possible to use react-ckeditor in inline mode? (https://sdk.ckeditor.com/samples/inline.html)

Is there a plan for CKEditor 4.10.0?

How can I enable the color dialog in ckeditor?

How to add plugins?

I want setState to content but it shows me empty content in an editor after it gets loaded.
This is due to delay in initialize the editor. How we can overcome this delay.

updateContent changes state, but after that nothing happends

I want to add Print button to editor toolbar, adding 'print' into toolbar configuration object isn't working.

hello, there are property for disable CKEditor ? There are not at your documentation

Is there a way to utilize CKEditor plugins with this? For example i am looking for a way to browse the system for images to upload. CKEditor has plugins for that but how could I use those plugins, if possible?

I interact with redux-form. When I set the default state from the Redux-forms, it does not working if file of editor cached by browser

class renderCKEditor extends React.Component {
  constructor(props) {
    super(props)
    const {value} = props.input
    this.updateContent = this.updateContent.bind(this)
    this.setContent = this.setContent.bind(this)
    this.state = {
      content: value
    }
  }

  componentDidMount() {
    const {value} = this.props.input
    this.setContent(value)
  }

  componentDidUpdate(prevProps, prevState) {
    const {value} = this.props.input;
    const {content} = this.state
    if ((!content || content === '<p><br></p>') && value && !prevProps.value) {
      this.setContent(value)
    }
  }

  setContent(newContent) {
    this.setState({
      content: newContent
    })
  }

  updateContent(newContent) {
    const {onChange} = this.props.input
    onChange(newContent)
    this.setContent(newContent)
  }

  render() {
    const {label, input, meta: {touched, error, invalid, warning}} = this.props
    return (
      <div className='form-group'>
        <label className="control-label">{label}</label>
        <CKEditor activeClass="p10" content={this.state.content} scriptUrl='/app/ckeditor/ckeditor.js'
                  onChange={this.updateContent}/>
        <hr/>
        <div className="help-block">
          {touched && ((error && <span>{error}</span>) || (warning && <span>{warning}</span>))}
        </div>
      </div>
    )
  }
}

I'm trying to use CKEditor with redux-form, but I'm not exactly sure how to use it within a component correctly. I've tried this:

<Field
  label="Content"
  name="content"
  component={CKEditor}
/>

But when I do a simple test with:

onSubmit(values) {
  console.log(values);
}

I'm not getting anything back. I assume I'll need to use the content prop to get it to include the editor content into the values argument, but I'm not sure how I might do that.

Thanks in advance for your help.