How to include html tags in text editor? [Snippet attached]

1
votes

I am making text editor using, react-draft-wysiwyg and draftjs-to-html ..

And also I have injected the dynamic html into editor like,

index.js:

export default function App() {
  const dynamicData = `<div class="heading"> This text needs to display along with the <span> html tags </span> surrounded </div>`;

  const handleInputChange = (e) => {
    console.log("event ", e.target.value);
  };

  return (
    <>
      <ContentEditor
        name="dynamicContent"
        value={dynamicData}
        onChange={(event) => handleInputChange(event)}
      />
    </>
  );
}

Current Working scenario:

Here the things are working very well and I am able to get the plain text like,

This text needs to display along with the html tags surrounded

inside the editor.

Note: (I mean to say only text is displayed without the html tags like div, span..

Expected:

I am in the need to bind the entire HTML as it is inside the editor like,

<div class="heading"> This text needs to display along with the <span> html tags </span> surrounded </div>

Working Snippet:

Edit next.js + css-only carousel (forked)

So my requirement is that need to display the text inside editor as,

<div class="heading"> This text needs to display along with the <span> html tags </span> surrounded </div>

instead of

This text needs to display along with the html tags surrounded

2
javascriptreactjstext-editordraftjsreact-draft-wysiwyg
stackoverflow.com/questions/6234773/… try escaping your string - Rod911
hope this link will help you: github.com/jpuri/react-draft-wysiwyg/issues/772 - abhay
I've played around with this a few times, read docs, etc... but haven't come up with any working solutions. I tested @novarx's answer and it appears to do as you request. Have you looked at HTML docs here (sorry, they don't have an anchor tag to the section so you'll have to search for it, it's towards the bottom of the page, second to last section). - Drew Reese
@DrewReese, Okay bro, Thanks for your try but unfortunately the below answer also doesn't solve the purpose.. Anyhow thanks again bro.. - Undefined
@DrewReese, Bro do you have any idea over this issue? stackoverflow.com/q/65941810/13270726 .. It occurs only on page refresh.. - Undefined

2 Answers

0
votes

As already stated by @Rod911 you can do something like this:

import "../carousel.css";
import React from "react";
import ContentEditor from "../components/text_editor";

function escape(unescaped) {
  return unescaped
    .replace(/&/g, "&amp;")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;")
    .replace(/"/g, "&quot;")
    .replace(/'/g, "&#039;");
}

function unescape(escaped) {
  return escaped
    .replace(/&amp;/g, "&")
    .replace(/&lt;/g, "<")
    .replace(/&gt;/g, ">")
    .replace(/&quot;/g, '"')
    .replace(/&#039;/g, "'");
}

export default function App() {
  const dynamicData = escape(
    `<div class="heading">This text needs to display along with the <span> html tags </span> surrounded </div>`
  );

  const handleInputChange = (e) => {
    console.log("event ", unescape(e.target.value));
  };

  return (
    <>
      <ContentEditor
        name="dynamicContent"
        value={dynamicData}
        onChange={(event) => handleInputChange(event)}
      />
    </>
  );
}

May be it would be nice to use a specific Class for the content, which would simplify the convertion. May be take a look at: https://www.itsrainingmani.dev/blog/string-prototype-extension/

0
votes

Try this:

export default function App() {

    function getConvertedText(text) {
        console.log(text);
        text = text.replace(/</g, "&lt;").replace(/>/g, "&gt;");
        return text;
    }
    const dynamicData = '<div class="heading"> This text needs to display along with the ' + getConvertedText("<span> html tags </span>") + ' surrounded </div>';

    const handleInputChange = (e) => {
        console.log("event ", e.target.value);
    };

    return ( <
        >
        <
        ContentEditor name = "dynamicContent"
        value = {
            dynamicData
        }
        onChange = {
            (event) => handleInputChange(event)
        }
        /> <
        />
    );
}