英文:
can't play video in react quill
问题
I can't play video in react quill when I set resize picture in react quill, every time I add a video it gets resized like a photo, and can't play. So does anyone have a way.
这是我的代码
type here
import React, { useState, useEffect } from "react";
import { useQuill } from "react-quilljs";
import "quill/dist/quill.snow.css";
import BlotFormatter from "quill-blot-formatter/dist/BlotFormatter";
function HtmlEditor() {
// const { quill, quillRef } = useQuill();
const { quill, quillRef, Quill } = useQuill({
modules: { blotFormatter: {} },
});
if (Quill && !quill) {
Quill.register("modules/blotFormatter", BlotFormatter);
}
//==========================================================
const [value, setValue] = useState();
//b2
useEffect(() => {
if (quill) {
quill.on("text-change", (delta, oldContents) => {
console.log(quillRef.current.firstChild.innerHTML);
setValue(quillRef.current.firstChild.innerHTML);
let currrentContents = quill.getContents();
console.log(currrentContents.diff(oldContents));
});
}
}, [quill, Quill]);
// console.log(value);
console.log(JSON.stringify(value));
// console.log(quillRef);
return (
<div>
<div className="mt-[50px] mx-auto " style={{ width: 1500, height: 1300 }}>
<div ref={quillRef} />
</div>
</div>
);
}
export default HtmlEditor;
谢谢你的帮助。
英文:
I can't play video in react quill when I set resize picture in react quill, every time I add a video it gets resized like a photo, and can't play. So does anyone have a way.
this is my code
type here
import React, { useState, useEffect } from "react";
import { useQuill } from "react-quilljs";
import "quill/dist/quill.snow.css";
import BlotFormatter from "quill-blot-formatter/dist/BlotFormatter";
function HtmlEditor() {
// const { quill, quillRef } = useQuill();
const { quill, quillRef, Quill } = useQuill({
modules: { blotFormatter: {} },
});
if (Quill && !quill) {
Quill.register("modules/blotFormatter", BlotFormatter);
}
//==========================================================
const [value, setValue] = useState();
//b2
useEffect(() => {
if (quill) {
quill.on("text-change", (delta, oldContents) => {
console.log(quillRef.current.firstChild.innerHTML);
setValue(quillRef.current.firstChild.innerHTML);
let currrentContents = quill.getContents();
console.log(currrentContents.diff(oldContents));
});
}
}, [quill, Quill]);
// console.log(value);
console.log(JSON.stringify(value));
// console.log(quillRef);
return (
<div>
<div className="mt-[50px] mx-auto " style={{ width: 1500, height: 1300 }}>
<div ref={quillRef} />
</div>
</div>
);
}
export default HtmlEditor;
Thank you for your help.
答案1
得分: 0
这是您提供的代码的中文翻译:
您可以考虑这段代码:
import Quill from "quill";
import { Video } from "quill-video-resize";
import "quill-video-resize/dist/quill-video-resize.css";
Quill.register({ "formats/video": Video });
const { quill, quillRef } = useQuill({
modules: {
blotFormatter: {},
toolbar: {
container: "#toolbar",
handlers: {
// 这里是您的自定义处理程序
},
},
},
});
quill.root.quill = quill;
quill.insertEmbed(index, "video", src, "user");
英文:
You can consider this code:
import Quill from "quill";
import { Video } from "quill-video-resize";
import "quill-video-resize/dist/quill-video-resize.css";
Quill.register({ "formats/video": Video });
const { quill, quillRef } = useQuill({
modules: {
blotFormatter: {},
toolbar: {
container: "#toolbar",
handlers: {
// Your custom handlers here
},
},
},
});
quill.root.quill = quill;
quill.insertEmbed(index, "video", src, "user");
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论