如何在文本编辑器中包含html标签?[附摘要] [英] How to include html tags in text editor? [Snippet attached]

问题描述

我正在使用

因此，我的要求是需要在编辑器中将文本显示为

< div class =" heading">该文本需要与< span>一起显示.html标签</span>包围在</div>

代替的

此文本需要与包围的html标签一起显示

解决方案

尝试一下:

 导出默认功能App(){函数getConvertedText(text){console.log(text);text = text.replace(/</g，& lt;").replace(/>/g，&>");返回文字；}const dynamicData ='< div class ="heading">该文本需要与'+ getConvertedText(< span> html标签</span"))+'包围的</div"一起显示；const handleInputChange =(e)=>{console.log("event"，e.target.value)；};返回(<><ContentEditor名称="dynamicContent"；值= {动态数据}onChange = {(事件)=>handleInputChange(事件)}/></>);} 

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:

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

解决方案

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)
        }
        /> <
        />
    );
}

这篇关于如何在文本编辑器中包含html标签?[附摘要]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！