score:6

Accepted answer

i think this nextjs-with-draftjs example can help how you can integrate draft.js into next.js application.

score:0

here is my simply component is working with nextjs and react hook form

import react, { useeffect } from "react";
import { editor, editorstate, contentstate, convertfromraw } from "draft-js";
import "draft-js/dist/draft.css";

export { editorstate, contentstate };

interface proptypes {
  name?: string;
  value?: string;
  onchange?: function;
}

// trick to fix issue with nextjs https://github.com/facebook/draft-js/blob/master/examples/draft-0-10-0/universal/editor.js
const emptycontentstate = convertfromraw({
  entitymap: {},
  blocks: [
    {
      text: "",
      key: "foo",
      type: "unstyled",
      entityranges: [],
    },
  ],
});

function richtexteditor({ name, value, onchange }: proptypes) {
  const [editorstate, seteditorstate] = react.usestate(
    editorstate.createwithcontent(emptycontentstate)
  );

  useeffect(() => {
    seteditorstate(
      editorstate.createwithcontent(contentstate.createfromtext(value))
    );
  }, []);

  return (
    <editor
      editorkey={name}
      editorstate={editorstate}
      onchange={(editorstate) => {
        seteditorstate(editorstate);

        onchange(editorstate.getcurrentcontent().getplaintext());
      }}
      userselect="none"
      contenteditable={false}
    />
  );
}

export default richtexteditor;

<controller
 as={richtexteditor}
 name="description"
 control={control}
 defaultvalue=""
/>

score:3

use sun editor. this one is really flexible and compatible with nextjs. https://www.npmjs.com/package/suneditor-react npm i suneditor suneditor-react

import dynamic from "next/dynamic";
import 'suneditor/dist/css/suneditor.min.css'; // import sun editor's css file to the _app.js

const suneditor = dynamic(() => import("suneditor-react"), { //besure to import dynamically
  ssr: false,
});

const mycomponent = props => {
  return (
    <div>
      <p> my other contents </p>
      <suneditor />
    </div>
  );
};
export default mycomponent;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>


Related Query

More Query from same tag