如何在SlateJS编辑器DOM中注入新元素
如何在SlateJS编辑器DOM中注入新元素
提问于 2022-02-12 02:25:55
如何向SlateJS编辑器DOM?中注入新的react组件/元素
我想在SlateJS编辑器的DOM中注入一个新元素，而不是在上面或下面。
SlateJS的大多数示例将转换节点，但它不允许直接注入SlateJS DOM。这是在编辑器上下文中。
例如
SlateJS Typing
INJECTED REACT COMPONENT
SlateJS Typing
SlateJS Typing
<div slatejs editor>
<div child div>
// Want to insert a react component here
<div child div>
</div>现在，您可以在SlateJS编辑器之上或下面添加一个新的react组件，但不能在内部添加。
<Slate
editor={editor}
value={value}
onChange={value => setValue(value)}>
// <Tags /> Added component on top of SlateJS Editor
<Editable
placeholder="Enter some rich text…"
spellCheck
autoFocus
onKeyDown={event => {
switch (event.key) {
case '/': {
event.preventDefault()
console.log('/ Command')
// How to DOM inject into the current SlateJS component?
ReactDOM.render(<Tags />, ...)
}
}
}}
/>
// <Tags /> Added component UNDER SlateJS Editor
</Slate>,我目前的解决方案是尝试通过ReactDOM进行注入，但是我很难获得实际的SlateJS组件，因为我无法设置ID，这使得document.query变得很困难。
我如何在SlateJS dom中注入一个新的react组件？
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-04-28 04:56:22
最后，我将React组件注入元素中的H1 div中。虽然，这种方法是错误的。
也就是说，在Rich示例中，除了下面修改的元素之外，所有内容都保持不变。
const Element = ({ attributes, children, element }) => {
const style = { textAlign: element.align }
switch (element.type) {
case 'heading-one':
return (
<h1 style={style} {...attributes}>
{children}
// Just inserted the react component in the h1 div
// Easiest way, but causes a bunch of slate errors when trying
// to click the react component line
<REACT_COMPONENT />
</h1>
)
default:
return (
<p style={style} {...attributes}>
{children}
</p>
)
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71088487
复制相关文章
相似问题
腾讯云开发者
