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>
Source: stackoverflow.com
Related Query
- How to implement a rich text editor such as Quill or Draft.js with Next.js?
- How to upload an image to Quill rich text editor via quil-image-uploader module
- adding a rich text editor in next js with react-rte
- How to properly style React Rich Text Editor (react-rte)
- How to check if rich text editor content is empty?
- How can I use inline images with rich text in Gatsby?
- how can i send text from a rich text editor into a sql database?
- How to insert text programmaticaly into draft js rich text field while maintaining the current inline style?
- How can I render tags from Rich Text Editor in Prismic React Client?
- How to select all text in input with Reactjs, when it focused?
- draftjs how to initiate an editor with content
- How to implement Error Boundary with React Hooks Component
- How to select element text with react+enzyme
- React JSX, how to render text with a single quote? Example <p>I've</p>
- How to focus something on next render with React Hooks
- How to upgrade a React project built with create-react-app to the next create-react-app version?
- How to implement a dynamic form with controlled components in ReactJS?
- How to implement skipWaiting with Create React App?
- How to implement Stripe with React Native?
- How to implement componentDidMount with hooks in React to be in line with the EsLint rule "react-hooks/exhaustive-deps": "warn"?
- How to implement Google API with React, Redux and Webpack
- How to add a non editable tag to content in Quill editor
- How to implement the OAuth2 Authorization code grant with PKCE for a React single page application?
- How to implement a scrollspy with React
- Material-UI with reactjs: How to use or implement breadcrumbs
- How to limit the text filed length with input type number in React JS and prevent entry of E,e, -, + etc
- How to use useRef hook to select next TextInput after pressing next keyboard button with redux-form
- How to enable Ctrl + Z when you change an input text dynamically with React?
- How to implement adobe analytics in Next Js (React )?
- How to implement material-ui tabs with More dropdown (as shown in documentation screenshot)
More Query from same tag
- Cannot assign to read only property of Object in TypeScript
- I need to call two APIs in Reactjs
- React condtional render (mobile view and Desktop view ) issue
- How to cancel the image while uploading using reactjs
- Pass properties to React Component in DOM
- Why is React Router taking me to the correct path, but not displaying the corresponding component?
- ReactJS - How to use DatePicker from Material UI with Firestore? Timestamp to Date format
- React: unable to check the type of input field
- Error when trying to .map over props in React-Redux when getting data from Firebase
- Why the module C does not receive the socket io "hi" event?
- When making multiple ajax requests, is there a "good pattern" for tracking which data the responses line up with?
- SVG stroke not showing inside of clipPath
- How to prevent axios.interceptors.response.use to crash the error handling?
- Issue with @Mui and modularized scss competing intermittently. How to consistently override @mui default styling with scss modules?
- Search is not working in mui-datatable, reactjs when serverSide is true?
- add a tag inside template literals
- Build success, no errors but white screen
- How to trigger onClick and onHover CSS animation with ReactJS?
- How can i re-render react component with infinite loop
- How do I go about displaying data that looks like its on an 8.5x11 paper
- Why is useImperitaveHandle hook used in React?
- What is the true place/way to save api keys in react app?
- React-Bootstrap background Color
- Adding MUI Component to Component Library results in Error "Hooks can only be called inside of the body of a functional component"
- Why is props sent from parent component become object in child component?
- How do I place an image in an area/shape by CSS using ReactJS?
- React JS display all data in the textfield for particuler selected ID
- React Component with SubComponent - hot reload does not work
- I have my modal component in a different file and I'm trying to open it from another component
- Testing components using React Relay