我在玩Contentful !我遇到了富文本内容字段的问题。
我正在使用 '@contentful/富文本类型' 和 @contentful/rich-text-html-renderer 模块来自定义此 block 的呈现方式并显示富文本内容中链接的一些 Assets 和引用。
在 nuxt asyncData 函数中调用 getEntries 后,我有一个 描述数据 在我的页面组件中可用。
我正在使用带有选项的 documentToHtmlString 函数。
一切正常,但我想使用我已经编写的组件(Post.vue),而不是在 ES6 模板字符串中返回模板。
我知道这是可能的,但我对 JS 世界很陌生。
我尝试过要求 components/post/Post.vue,但我不知道如何使用它。
import { BLOCKS } from '@contentful/rich-text-types';
import { documentToHtmlString } from "@contentful/rich-text-html-renderer"
渲染富文本字段的Vue组件模板
<section class="container">
<div class="columns">
<div class="column">
<div v-html="formatContent(description)" />
</div>
</div>
</section>
我只需调用 formatContent 方法来调用 documentToHtmlString 如下(它有效):
methods: {
formatContent(content) {
return documentToHtmlString(content, options)
}
}
并使用文档中描述的选项自定义 documentToHtmlString:
const embeddedEntryRender = (node) => {
const { data: { target: entry} } = node
const fields = entry.fields
const sys = entry.sys
// LOOK HERE
// const postComponent = require('~/components/post/Post')
return `
<div class="column is-4">
<div class="card">
<div class="card-content">
<div class="media">
<div class="media-content">
<h3 class="title is-4">${fields.title}</h3>
<div class="subtitle is-6">${fields.description}</div>
</div>
</div>
<div class="content">
</div>
</div>
</div>
</div> `
}
const options = {
renderNode: {
[BLOCKS.EMBEDDED_ENTRY]: (node) => embeddedEntryRender(node),
// [BLOCKS.EMBEDDED_ASSET]: (node) => `<custom-component>${customComponentRenderer(node)}</custom-component>`
}
}
未检测到错误
--
非常感谢
最佳答案
是的,您可以在其中使用带有不同 npm 库的自定义 vue 组件,我遇到了同样的问题。
npm i contentful-rich-text-vue-renderer
在模板中: <rich-text-renderer :document="document" :nodeRenderers="renderNode" />
其中“文档”是内容发送的数据,看起来像您所说的描述。 RenderNode 是下面描述的方法。在脚本中:
data () {
return {
renderNode: [INLINES.ASSET_HYPERLINK]: (node, key, h) => {
return h('my-vue-component', { key: hey, props: { myProp: 'blah blah' }},'what I want inside the <my-vue-component> tag'`)
}
}
这可能有点令人困惑。因此,首先从该 npm 库中导入richTextRenderer 组件,并确保在您的 vue 组件的组件部分中声明它。 (或光荣地)接下来将内容丰富的富文本字段传递给它的“文档” Prop
如果您想要自定义渲染,请将一个函数传递给 nodeRenders Prop (我必须在数据部分中声明它)
我的示例采用任何 Assets 超链接类型并将其替换为我想要在标签内的组件
如果我在 main.js 文件中全局声明了 my-vue-component,我只会让它工作。
import MyVueComponent from 'wherever/it/is';
Vue.component('my-vue-component', MyVueComponent);
有更多的配置,只需阅读 npm libs 文档(虽然它不是很好的文档,我花了很长时间才弄清楚如何传递 Prop ,我不得不阅读他们的 github 代码来解决这个问题,哈哈)
关于javascript - 在自定义渲染函数中返回 Vue 组件以获取内容丰富的嵌入条目,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56854915/