reactjs - HTML 到 ReactJs 解析 oembed 不显示任何内容
问题描述
我使用 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>
)}
解决方案
推荐阅读
- html - 当 Bootstrap 响应式汉堡菜单打开时,下拉菜单会破坏导航
- flutter - Null Check 运算符在使用 Sqflite 颤振时用于空值
- jestjs - 将 Vue 2 项目单元测试到 Vue 3 (vue-cli) 时出错
- javascript - 图像被 onclick 旋转截断
- django - Asyncwebsocketconsumer 断开连接方法在一些延迟后运行
- android - 如何在触控画布上显示线条?
- docker - 端口映射不适用于使用 tomcat 映像创建的容器
- angular - Angular 动态创建的组件未保持其状态
- github - 是否可以从 Shiny Dashboard 触发 GitHub 操作工作流?
- php - 如何在 android 或 pc (Windows) 上运行 html 文件和 php 文件?