1

我使用 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>
)}
4

0 回答 0