[英]React Quill - HTML Element with ID not Rendering Inside Editor
I am using React Quill ( https://github.com/zenoamaro/react-quill ) as a rich text editor in my React project.我在我的 React 项目中使用 React Quill ( https://github.com/zenomaro/react-quill ) 作为富文本编辑器。
Im running into an issue when inserting the below html span element to the editor with an ID: <span id='incInsert'></span>
将以下 html 跨度元素插入到具有 ID 的编辑器时遇到问题:
<span id='incInsert'></span>
The value of the text editor is contained within React State and when console.logging state i can see the span element in there:文本编辑器的值包含在 React State 中,当 console.logging state 我可以在那里看到 span 元素:
However, the span element doesnt exist when inspecting via chrome dev tools and thus in the DOM.但是,通过 chrome 开发工具检查时,跨度元素不存在,因此在 DOM 中。
The reason why I need this element to exist in the DOM is because i need to use document.getElementById('incInsert')
to insert HTML into the span element which is done later in my submit function.我需要这个元素存在于 DOM 中的原因是因为我需要使用
document.getElementById('incInsert')
将 HTML 插入到 span 元素中,稍后在我的提交 function 中完成。
TIA TIA
I had the same problem, I solved it as follows:我有同样的问题,我解决了如下:
import React, { useState, useRef } from "react";
import ReactQuill, { Quill } from "react-quill"; // ES6
import "react-quill/dist/quill.snow.css";
const Inline = Quill.import("blots/inline");
function MyComponent() {
const [content, setContent] = useState("");
const reactQuillRef = useRef(null);
const createElementWithClassName = () => {
class SpanBlock extends Inline {
static create() {
let node = super.create();
node.setAttribute("class", "spanblock");
node.setAttribute("id", "myId")
return node;
}
}
SpanBlock.blotName = "spanblock";
SpanBlock.tagName = "div";
Quill.register(SpanBlock);
const div = document.createElement("div");
var quill = new Quill(div);
quill.setContents([
{
insert: "hello",
attributes: {
spanblock: true,
},
},
]);
const result = quill.root.innerHTML;
console.log(result);
return result;
};
const buttonClick = () => {
const quill = reactQuillRef.current.getEditor();
const oldHtml = quill.root.innerHTML;
const newElement = createElementWithClassName();
const newHtml = oldHtml + newElement;
setContent(newHtml);
};
return (
<div>
<ReactQuill
ref={reactQuillRef}
modules={{
toolbar: [
[{ font: [] }, { size: ["small", false, "large", "huge"] }], // custom dropdown
["bold", "italic", "underline", "strike"],
[{ color: [] }, { background: [] }],
[{ script: "sub" }, { script: "super" }],
[{ header: 1 }, { header: 2 }, "blockquote", "code-block"],
[
{ list: "ordered" },
{ list: "bullet" },
{ indent: "-1" },
{ indent: "+1" },
],
[{ direction: "rtl" }, { align: [] }],
["link", "image", "video", "formula"],
["clean"],
],
}}
value={content}
onChange={(content) => {
setContent(content);
}}
/>
<button onClick={buttonClick}>click me</button>
</div>
);
}
export default MyComponent;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.