如何在 Slate 编辑器中插入 gif-PHP中文网问答

我的应用程序中有一个石板文本编辑器，并且想使用 giphy 链接插入 gif。我尝试使用 insertNodes 函数进行添加，但这似乎只是添加了一个新行。我在下面列出了我用来添加 gif 的函数；

function insertImage(editor, url) { const element = { type: 'video', url, children: [{ text: '' }] } Transforms.insertNodes(editor, element) }

我只是使用公开可用的 gif 链接来确保我实际上可以将 gif 添加到编辑器中。所以我确信链接或其他任何东西都不是问题。我也尝试过使用其他地方的链接进行此操作，但没有成功，因此我将不胜感激。

还在下面添加我的渲染元素功能；

const renderElement = useCallback((props) => , []);

最后是我的元素定义；

const Element = ({ attributes, children, element }) => { const style = { textAlign: element.align } switch (element.type) { case "block-quote": return (  {children} 
 ) case "bulleted-list": return (  {children} 
 ) case "heading-one": return (  {children} 
 ) case "heading-two": return (  {children} 
 ) case "list-item": return (  {children} 
 ) case "numbered-list": return (  {children} 
 ) default: return (  {children} 
 ) } }

全部回复 (1)

P粉2760641782023-09-12 00:20:11 1 楼

根据 slate 文档：https://docs.slatejs.org /walkthroughs/03-defining-custom-elements

还有这篇文章：如何对齐文本Slate.js 和 React？

您需要修改 renderElement 回调以根据特定修饰符显示不同的组件。例如，如果您正在使用代码元素并且希望在编辑器中显示它，通常您将为 Slate 节点提供一个值为code的类型属性。然后在您的 renderElement 函数中，您传递的 props 包含要渲染的类型。

因此，对于您的用例，您将执行以下操作；

const renderElement = useCallback({ attributes, children, element }) => { switch (element.type) { case 'video': return (  
 ) default: return (  {children} 
 ) }