{"id":9434,"date":"2024-01-30T04:41:31","date_gmt":"2024-01-30T04:41:31","guid":{"rendered":"https:\/\/www.bacancytechnology.com\/qanda\/?p=9434"},"modified":"2024-01-30T04:41:31","modified_gmt":"2024-01-30T04:41:31","slug":"rich-text-editor-in-reactjs","status":"publish","type":"post","link":"https:\/\/www.bacancytechnology.com\/qanda\/react\/rich-text-editor-in-reactjs","title":{"rendered":"Rich Text Editor in Reactjs"},"content":{"rendered":"<p>In the provided code, we have implemented a text editor using the <strong>react-draft-wysiwyg<\/strong> library in a React functional component named <strong>TextEditor<\/strong>. The editor allows users to input and format text, and the content is managed using the <strong>Editor<\/strong> component from the library. The entered text is then converted to Markdown format when the form is submitted.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"routeros\">import { useState } from 'react';\r\nimport { convertToRaw } from 'draft-js';\r\nimport { Editor } from \"react-draft-wysiwyg\";\r\nimport \"react-draft-wysiwyg\/dist\/react-draft-wysiwyg.css\";\r\nimport draftToMarkdown from 'draftjs-to-markdown';\r\n\r\nfunction TextEditor() {\r\n  const [text, setText] = useState(\"\")\r\n\r\n  const handleChange = (editorState) =&gt; {\r\n    setText(editorState)\r\n  }\r\n\r\n  const handleSubmit = (e) =&gt; {\r\n    e.preventDefault();\r\n    console.log(draftToMarkdown(convertToRaw(text.getCurrentContent())))\r\n  }\r\n\r\n  return (\r\n    &lt;div&gt;\r\n      &lt;form onSubmit={(e) =&gt; { handleSubmit(e) }}&gt;\r\n        &lt;Editor\r\n          toolbarClassName=\"toolbarClassName\"\r\n          wrapperClassName=\"wrapperClassName\"\r\n          editorClassName=\"editorClassName\"\r\n          onEditorStateChange={handleChange}\r\n        \/&gt;\r\n        &lt;input type=\"submit\" name=\"save\" value=\"Save\" \/&gt;\r\n      &lt;\/form&gt;\r\n    &lt;\/div&gt;\r\n  );\r\n}\r\n\r\nexport default TextEditor;<\/pre>\n<p>For further details about the methods and properties used in the <strong>react-draft-wysiwyg<\/strong> library, you can refer to the official documentation <a href=\"https:\/\/jpuri.github.io\/react-draft-wysiwyg\/#\/docs?_k=jjqinp\" target=\"_blank\" rel=\"noopener\">here<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In the provided code, we have implemented a text editor using the react-draft-wysiwyg library in a React functional component named TextEditor. The editor allows users to input and format text, and the content is managed using the Editor component from the library. The entered text is then converted to Markdown format when the form is [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":9436,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-9434","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/9434"}],"collection":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/comments?post=9434"}],"version-history":[{"count":2,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/9434\/revisions"}],"predecessor-version":[{"id":9438,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/9434\/revisions\/9438"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media\/9436"}],"wp:attachment":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media?parent=9434"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/categories?post=9434"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/tags?post=9434"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}