如何在文本编辑器中包含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, "<").replace(/>/g, ">");
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屋!