[英]How can I render tags from Rich Text Editor in Prismic React Client?
I am Working on a Prismic React Project, In which I need a functionality to show tooltip from rich text editor which is expected to show from the nested tags in Rich Text editor.我正在开发一个 Prismic React 项目,其中我需要一个功能来显示来自富文本编辑器的工具提示,该工具提示预计会从富文本编辑器中的嵌套标签中显示。 A little bit help will be of lot of beneficial to us.一点点的帮助对我们大有裨益。
This is the functionality I want, but this is not specific how many times and where we need to show this thing in the whole project:这是我想要的功能,但这并没有具体说明我们需要在整个项目中展示这个东西的次数和位置:
You can use a custom HTMLSerializer and a library for tooltips.您可以使用自定义HTMLSerializer和工具提示库。 Here's an example where I used the react-tooltip
(npm link)这是我使用react-tooltip
的示例(npm 链接)
The serializer will detect the text and wrap it in a paragraph tag;序列化程序将检测文本并将其包装在段落标签中; then, it will use the label as the data-for
and id
attributes and the tooltip content itself in the <ReactTooltip />
component.然后,它将使用 label 作为<ReactTooltip />
组件中的data-for
和id
属性以及工具提示内容本身。
import React from 'react'
import { Elements } from 'prismic-reactjs'
import ReactTooltip from 'react-tooltip'
export const htmlSerializer = function (type, children, element, content) {
switch (type) {
case Elements.label:
const label = children.data.label ? children.data.label : ''
console.log(content.join(''))
return (
<span>
<p data-tip data-for={label}>
{content.join('')}
</p>
<ReactTooltip id={label} place="top" effect="solid">
{label}
</ReactTooltip>
</span>
)
// ... here goes the rest of your HTML serializer confguration
default:
return null
}
}
After that, I passed it to my Rich Text field.之后,我将它传递给我的富文本字段。
import { htmlSerializer } from '../utils/htmlSerializer'
<RichText render={document.data.text_field} htmlSerializer={htmlSerializer} />
Then, you'd just need to style it as you like.然后,您只需要根据需要设置样式即可。 Here's a preview of how the component looks like:这是组件外观的预览:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.