Rich text editor for next js

[birshu123]

Dear Community Members,

Please suggest some rich text editor for Next js. I am developing a cms where i need to provide images and text design in my content. Thank You.

[isBatak]

you can check slate https://www.slatejs.org/examples/richtext I used it in one project and it turned out to be OK :D

[smilegupta]

You can try react-quill. Just make sure you alter the way of importing react-quill to something like this import dynamic from "next/dynamic";
const ReactQuill = dynamic(() => import("react-quill"), { ssr: false });

[nitink66]

But the problem with reat-quill in nextjs is it doesn't register inline styles, and image resizing problems,blob too won't get register

[EliasTouil]

But the problem with reat-quill in nextjs is it doesn't register inline styles, and image resizing problems,blob too won't get register

I'm here because I'm experiencing problems with Quill too, it integrated nicely for basic functionality, but as soon as I wanted to get some control over it it became impossible.

[Piyusharora2003]

const ReactQuill = dynamic(() => import("react-quill"), { ssr: false });

Thanks it helps a lot..

[SriSomanaath]

"use client";

import React, { useState } from 'react';
import dynamic from 'next/dynamic';
import styles from './page.module.css';

const SunEditor = dynamic(() => import('suneditor-react'), { ssr: false });
import 'suneditor/dist/css/suneditor.min.css';

const Page = () => {
const [content, setContent] = useState('');

const handleEditorChange = (content: string) => {
setContent(content);
console.log('Editor Content:', content);
};

return (

<SunEditor
setOptions={{
buttonList: [
['undo', 'redo', 'font', 'fontSize', 'formatBlock'],
['bold', 'underline', 'italic', 'strike', 'subscript', 'superscript'],
['removeFormat'],
'/',
['fontColor', 'hiliteColor'],
['outdent', 'indent'],
['align', 'horizontalRule', 'list', 'table'],
['link', 'image', 'video'],
['fullScreen', 'showBlocks', 'codeView'],
],
}}
onChange={handleEditorChange}
height="400px"
/>

<div dangerouslySetInnerHTML={{ __html: content }}>

);
};

export default Page;

SunEditor is the best. Here is the code you can use

[Igor2122]

did anyone use mui-rte?

[nitink66]

@Igor2122 is it possible to use mui-rte along with next js ?

[klawingco]

I tried using it on our project, and I am stuck with the initial value not rendering right.

[karthik-js]

Does anyone have ideas which library kind of work and give us html string with inline styles.

[nitink66]

If you are using nextjs ,then i recommend sunEditor

[karthik-js]

@nitink66 Will it return html with inline styles? Currently I am using react-quill, it doesn't return html with inline styles.

[nitink66]

Yup works perfectly!, also has built in image resize ability, so you don't need to again depend on other libraries like image-resize-module as for react-quill.
I also use HTMR package
Also I suggest you to go with SunEditor-React for nextjs
Implement Suneditor in React

[seyedmahdii]

Yup works perfectly!, also has built in image resize ability, so you don't need to again depend on other libraries like image-resize-module as for react-quill. I also use HTMR package Also I suggest you to go with SunEditor-React for nextjs Implement Suneditor in React

How do you add "iframe" to the text editor using suneditor?

[Aalian2241]

YOU ARE THE GOAT ISTG

[Ksondzyk]

srt

[Ksondzyk]

rtrt

[gomflo]

what about https://www.tiptap.dev/?

[seyedmahdii]

Does it support "iframe"? I didn't find it in the docs.

[Gabsys]

Bump for this. Anyone have a good suggestion? SunEditor & react-draft-wysiwyg were giving me issue with content change (They automatically scroll to top upon content change), CKEditor can't have alignments plugin :/

[killerdroid99]

Did you find any?

[eughenio-rhevolut]

Any news about this topic???

[abdulkadirkg]

I am using CKEditor (for markdown, I am using Turndown). It supports image upload and table features. If you want to headerless table you can check this also.

[Jafoor]

dropdown not working in next.js-13.4.5, for react-draft-wysiwyg. I also asked question on stackoverflow.

[rinald-ta]

How about Lexical? https://lexical.dev/
It's actually a text editor framework, so you'd actually need to create the text editor yourself. It's also officially maintained by Meta/Facebook, so it works great with React (and Next.js too, probably).

You can take a look at the playground here to see what's possible with Lexical: https://playground.lexical.dev/

[Balde17]

hello w**orld**