0

I am trying to render dynamic html content coming from server side, in react-draft-wysiwyg which has <table> tag too. I tried so many things, here is my code, if you could help me please. I tried some other text editors too, but that to behaving same for example react-quill.

expected output:

enter image description here

Actual Output (Everything is rendering in a single line, not in table format) enter image description here

 import React, { Component } from 'react';
    import {
      EditorState,
      convertToRaw,
      ContentState,
      convertFromHTML,
    } from 'draft-js';
    import { Editor } from 'react-draft-wysiwyg';
    import draftToHtml from 'draftjs-to-html';
    import htmlToDraft from 'html-to-draftjs';
    import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';

    export default class EditorConvertToHTML extends Component {

  constructor(props) {
    super(props);

    const html = `  <div> some html content here... 
    <table style=\"height: 74px; width: 644px;\" border=\"0\">    
       <tbody>  
         <tr> 
           <td><strong>Customer</strong></td>   
           <td><strong>Customer PO</strong></td> 
         </tr>  
         <tr>
           <td><span>Customer name</span></td> 
           <td><span>po number</span></td></tr> <tr> 
           <td><strong>Customer Complaint Number</strong></td> 
           <td><strong>Invoice Number</strong></td>
           <td> </td> 
         </tr> <tr> 
           <td><span></span></td>
           <td><span>other value</span></td>
           <td> </td> 
         </tr>   
       </tbody>  
       </table>  </div> 
     some more html content ... `;
    //tried this
    const contentBlocks = convertFromHTML(html);
    // and this too
    // const contentBlocks = htmlToDraft(html);

    if (contentBlocks) {
      const contentState = ContentState.createFromBlockArray(
        contentBlocks.contentBlocks
      );
      const editorState = EditorState.createWithContent(contentState);
      this.state = {
        editorState,
      };
    }
  }

  onEditorStateChange: Function = (editorState) => {
    this.setState({
      editorState,
    });
  };

  render() {
    const { editorState } = this.state;
    return (
      <div>
        <Editor
          editorState={editorState}
          wrapperClassName="demo-wrapper"
          editorClassName="demo-editor"
          onEditorStateChange={this.onEditorStateChange}
        />
        <textarea
          disabled
          value={draftToHtml(convertToRaw(editorState.getCurrentContent()))}
        />
      </div>
    );
  }
}
Ankit Giri
  • 89
  • 2
  • 7

1 Answers1

0

I found alternate editor, it is working fine, here is the code.

import React from "react";
import "./styles.css";

import CKEditor from "@ckeditor/ckeditor5-react";
import Editor from "@juniyadi/ckeditor5-custom-build";

export default function App() {
  const data = `<div>\n                                                                            <p>\n                                                                                Your request has been submitted and is being reviewed. Please use <b><span>some invoice number </span></b> to reference this request on any future correspondence. \n                                                                                If necessary, we will be contacting you for additional details. \n                                                                                </p>\n                                                                            <table style=\"height: 74px; width: 644px;\" border=\"0\">\n                                                                                <tbody>\n                                                                                    <tr>\n                                                                                        <td><strong>Customer</strong></td>\n                                                                                        <td><strong>Customer PO</strong></td>\n                                                                                        \n                                                                                    </tr>\n                                                                                    <tr>\n                                                                                        <td><span>customer name</span></td>\n                                                                                        <td><span>customr po number</span></td>\n                                                                                        \n                                                                                    </tr>\n                                                                                    <tr>\n                                                                                        <td><strong>Customer Complaint Number</strong></td>\n                                                                                        <td><strong>Invoice Number</strong></td>\n                                                                                        <td> </td>\n                                                                                    </tr>\n                                                                                    <tr>\n                                                                                        <td><span></span></td>\n                                                                                        <td><span>another value</span></td>\n                                                                                        <td> </td>\n                                                                                    </tr>\n                                                                                </tbody>\n                                                                            </table>\n                                                                            <p>Please do not hesitate to contact your Customer Service or Sales Representative, if you have any additional questions or concerns.</p>\n                                                                            <p>We appreciate your business!</p>\n                                                                            <p>This E-mail (including attachments) is confidential  .</p>\n\n                                                                        </div>  `
  return (
    <div className="App">
      <CKEditor editor={Editor} data={data} />
    </div>
  );
}

Output:

enter image description here

Ankit Giri
  • 89
  • 2
  • 7