Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/paramander/contentful-rich-text-vue-renderer
Render Contentful Rich Text field using Vue
https://github.com/paramander/contentful-rich-text-vue-renderer
contentful rich-text-editor vue
Last synced: 3 days ago
JSON representation
Render Contentful Rich Text field using Vue
- Host: GitHub
- URL: https://github.com/paramander/contentful-rich-text-vue-renderer
- Owner: paramander
- License: mit
- Created: 2019-01-10T12:37:38.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-10-18T05:19:19.000Z (12 months ago)
- Last Synced: 2024-04-23T20:53:48.904Z (5 months ago)
- Topics: contentful, rich-text-editor, vue
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/contentful-rich-text-vue-renderer
- Size: 1.02 MB
- Stars: 38
- Watchers: 6
- Forks: 12
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# rich-text-vue-renderer
Vue 3 renderer for the Contentful rich text field type.
## Version 2.x is for Vue 2 support.
## Changelog
See releases page for changelog of versions.
## Installation
Using [npm](http://npmjs.org/):
```sh
npm install contentful-rich-text-vue-renderer
```
Using [yarn](https://yarnpkg.com/):
```sh
yarn add contentful-rich-text-vue-renderer
```
## Usage
```html
import RichTextRenderer from 'contentful-rich-text-vue-renderer';
const document = {
nodeType: 'document',
content: [
{
nodeType: 'paragraph',
content: [
{
nodeType: 'text',
value: 'Hello world!',
marks: [],
},
],
},
],
};
export default {
data() {
return {
document
};
}
}
```
```html
import RichTextRenderer from 'contentful-rich-text-vue-renderer';
const document = {
nodeType: 'document',
content: [
{
nodeType: 'paragraph',
content: [
{
nodeType: 'text',
value: 'Hello',
marks: [{ type: 'bold' }],
},
{
nodeType: 'text',
value: ' world!',
marks: [{ type: 'italic' }],
},
],
},
],
};
export default {
data() {
return {
document
};
}
}
```
You can also pass custom renderers for both marks and nodes as an optional parameter like so:
```html
import { h } from "vue";
import { BLOCKS, MARKS } from '@contentful/rich-text-types';
import RichTextRenderer from 'contentful-rich-text-vue-renderer';
const document = {
nodeType: 'document',
content: [
{
nodeType: 'paragraph',
content: [
{
nodeType: 'text',
value: 'Hello',
marks: [{ type: 'bold' }]
},
{
nodeType: 'text',
value: ' world!',
marks: [{ type: 'italic' }]
},
],
},
]
};
export default {
data() {
return {
document
};
},
methods: {
renderMarks() {
return {
[MARKS.BOLD]: (text, key) => h('custom-bold', { key }, text)
};
},
renderNodes() {
return {
[BLOCKS.PARAGRAPH]: (node, key, next) => h('custom-paragraph', { key }, next(node.content, key, next))
}
};
}
}
```
Last, but not least, you can pass a custom rendering component for an embedded entry:
```html
import { h } from "vue";
import { BLOCKS } from '@contentful/rich-text-types';
import RichTextRenderer from 'contentful-rich-text-vue-renderer';
const document = {
nodeType: 'document',
content: [
{
nodeType: 'embedded-entry-block',
data: {
target: (...)Link<'Entry'>(...);
},
},
]
};
// Example function to render an embedded entry in a RichText editor.
// For instance, a react-router link to an entry.
const customEmbeddedEntry = (node, key) => {
return h('Link', { key, to: 'link to embedded entry' }, 'content for the <Link> component');
};
export default {
data() {
return {
document
}
},
methods: {
renderNodes() {
return {
[BLOCKS.EMBEDDED_ENTRY]: customEmbeddedEntry
}
}
}
}
```
The `nodeRenderers` prop should be one of the following `BLOCKS` and `INLINES` properties as defined in [`@contentful/rich-text-types`](https://www.npmjs.com/package/@contentful/rich-text-types):
- `BLOCKS`
- `DOCUMENT`
- `PARAGRAPH`
- `HEADING_1`
- `HEADING_2`
- `HEADING_3`
- `HEADING_4`
- `HEADING_5`
- `HEADING_6`
- `UL_LIST`
- `OL_LIST`
- `LIST_ITEM`
- `QUOTE`
- `HR`
- `EMBEDDED_ENTRY`
- `EMBEDDED_ASSET`
- `TABLE`
- `INLINES`
- `EMBEDDED_ENTRY` (this is different from the `BLOCKS.EMBEDDED_ENTRY`)
- `HYPERLINK`
- `ENTRY_HYPERLINK`
- `ASSET_HYPERLINK`
The `markRenderers` prop should be one of the following `MARKS` properties as defined in [`@contentful/rich-text-types`](https://www.npmjs.com/package/@contentful/rich-text-types):
- `BOLD`
- `ITALIC`
- `UNDERLINE`
- `CODE`
- `SUBSCRIPT`
- `SUPERSCRIPT`