Lightrun
question-mark

Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

CKEditor with redux-form

See original GitHub issue

Issue Description

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.

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:6 (1 by maintainers)

github_iconTop GitHub Comments

5reactions
Nastya-Piucommented, Oct 11, 2019

I fixed it with ckeditor5-react by

renderEditor({input}) {
    return (
      <CKEditor
        data={input.value}
        editor={ ClassicEditor }
        onChange={(event, editor) => {
            return input.onChange(editor.getData())
          }
        }
      />
    )
  }

<Field name="text" component={this.renderEditor} />
3reactions
avinmathewcommented, Jan 22, 2018

I got it working with Redux Forms like this:

const renderEditor = ({ input }) => {
  return (
      <CKEditor
        content={input.value}
        events={{
          change: event => input.onChange(event.editor.getData())
        }}
      />
   );
};

<Field
  name="myField"
  component={renderEditor}
/>
Read more comments on GitHub >

github_iconTop Results From Across the Web

React component - CKEditor 5 Documentation
Learn how to install, integrate and configure CKEditor 5 Builds and how to work with CKEditor 5 Framework, customize it, create your own...
Read more >
Ask Question - Stack Overflow
in React, "history.push('/')" is not working in some component ; React, { Component } ; 'react'; import ; from 'redux-form' ; CKEditor }...
Read more >
Build a Rich Text Editor in React - Morioh
In this video we go over how you can build a rich text editor using react. To implement this we use a package...
Read more >
How to Use Syncfusion's React Rich Text Editor with React ...
This blog provides the steps to merge Syncfusion's React Rich Text Editor with React Redux Form to validate inputs in form fields.
Read more >
Adding Plugins to a Custom Build of CKEditor5 with ReactJS ...
clone your forked repo to your existing project and use the ckeditor from YOUR build. This process is not very straight forward and...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found