I use CKEditor to make a rich text editor. I tried to embed a YouTube video and parse it with html-react-parser. The text works ok but the embed video doesn't work.
Example:
The code:
import React, {useState} from 'react';
import { CKEditor } from '@ckeditor/ckeditor5-react'
import ClassicEditor from '@ckeditor/ckeditor5-build-classic'
import parser from 'html-react-parser';
export default function TestPage() {
const [addData, setVal] = useState("");
const [addedData, showData] = useState("");
const handleChange = (e, editor) => {
const data = editor.getData();
setVal(data)
}
return (
<div className="TestPage">
<h2>
<u>CKEDITOR WITH REACTJS</u>
</h2>
<div style={{width:'700px', display: 'inline-block', textAlign:'left'}}>
<div style={{width:'700px', display: 'inline-block', textAlign:'right', marginBottom:'5px'}}>
<button style={{backgroundColor:'black', color:'White'}} onClick={()=>showData(!addedData)}>{addedData ? 'Hide Data' : 'Show Data'}</button>
</div>
<CKEditor editor={ClassicEditor} data={addData} onChange={handleChange} />
</div>
{addedData ? parser(addData): ''}
</div>
)}