我使用 CKEditor 来制作富文本编辑器。我试图嵌入一个 YouTube 视频并用 html-react-parser 解析它。文字工作正常,但嵌入视频不起作用。
例子:
编码:
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>
)}