@contentstack/json-rte-serializer NPM | npm.io (2023)

Sérialiseur JSON RTE

Contentstack est un CMS sans tête avec une approche axée sur l'API. Il s'agit d'un CMS que les développeurs peuvent utiliser pour créer de puissantes applications multiplateformes dans leurs langages préférés. Créez l'interface de votre application et Contentstack s'occupera du reste.En savoir plus.

Le package JSON RTE Serializer vous aide à convertir les données contenues dans votre champ JSON Rich Text Editor du format JSON au format HTML et vice versa.

Installation

Pour utiliser JSON RTE Serializer avec des applications basées sur Node.js, vous aurez besoin des prérequis suivants :

• Node.js 10 ou version ultérieure

Installez lejson-rte-serializerpackage via npm à l'aide de la commande suivante :

npm install @contentstack/json-rte-serializer

Cas d'utilisation du sérialiseur JSON RTE

Examinons quelques exemples de code qui montrent comment nous pouvons convertir les données présentes au format JSON en HTML et vice versa.

Conversion standard

Pour les scénarios de conversion standard, JSON RTE Serializer prend uniquement en charge les balises standard disponibles dans le champ JSON Rich Text Editor. Pour utiliser vos propres balises personnalisées, vous pouvez suivre lesConversion personnaliséeexemples fournis ci-dessous.

Code de conversion JSON vers HTML

Vous pouvez utiliser le code de sérialiseur JSON RTE suivant pour convertir vos données de champ JSON RTE au format HTML.

import { jsonToHtml } from "@contentstack/json-rte-serializer" ;const htmlValue = jsonToHtml({ type : "doc", attrs : {}, uid : "547a479c68824767ce1d9725852f042b", enfants : [ { uid : "767a479c6882471d9725 852f042b67ce", tapez : "p", attrs : {}, children : [{ text : "Ceci est un contenu au format HTML." }], }, ],});console.log(htmlValue);

Résultat de conversion

Les données HTML résultantes se présenteront comme suit :

Ceci est un contenu au format HTML.

Code de conversion HTML vers JSON

Vous pouvez utiliser le code JSON RTE Serializer suivant pour convertir les données de champ HTML au format JSON.

import { htmlToJson } from "@contentstack/json-rte-serializer";const htmlDomBody = new DOMParser().parseFromString( "
Ceci est un contenu au format HTML.
", "text/html"). body;const jsonValue = htmlToJson(htmlDomBody);console.log(jsonValue);

Note:L'extrait de code ci-dessus ne fonctionnerait que pour les sites Web frontaux alimentés par JavaScript.

Pour les applications basées sur Node.js, vous pouvez utiliser le code suivant :

const { htmlToJson } = require("@contentstack/json-rte-serializer")const {JSDOM} = require('jsdom')const dom = new JSDOM("
Ceci est un contenu au format HTML.
 ")let htmlDoc = dom.window.document.querySelector('body')const jsonValue = htmlToJson(htmlDoc)console.log(jsonValue);

Résultat de conversion

Les données au format JSON résultantes se présenteront comme suit :

{ "type":"doc", "attrs":{}, "uid":"547a479c68824767ce1d9725852f042b", "enfants":[{ "uid":"767a479c6882471d9725852f042b67ce", "type": "p", "attrs": {}, "children" : [{"text": "Ceci est un contenu au format HTML."}] }]}

Conversion personnalisée

Pour les scénarios de conversion personnalisés, vous pouvez personnaliser votre code JSON RTE Serializer pour permettre la prise en charge de balises ou de types d'éléments supplémentaires dans le champ JSON Rich Text Editor. Passer unoptionschamp (facultatif) dans le champjsonVersHtmlouhtmlVersJsonméthode pour manipuler le fonctionnement du package JSON RTE Serializer selon vos besoins.

Convertir JSON en HTML

Vous pouvez transmettre une méthode d'analyseur personnalisée qui convertira les données pour le type d'élément JSON mentionné (par exemple, l'intégration sociale) au format HTML. Dans les options analysées, lecustomElementTypesl'objet analyse les éléments de niveau bloc et en ligne (par exemple, le panneau d'informations), tandis que l'objetcustomTextWrapperobject analyse les éléments de mise en forme du texte (par exemple, gras, italique, couleur de police, etc.). Ces options prendraient un objet dont les clés sont des types d'éléments et les valeurs sont les fonctions d'analyseur qui seront exécutées pour ce type.

LecustomElementTypesLa fonction parser fournit les arguments suivants :

• attrs: Les attributs qui sont transmis au nœud
• enfant: Les éléments imbriqués du nœud courant
• jsonBlock: L'intégralité de l'objet JSON en cours d'analyse

D'autre part, lecustomTextWrapperLa fonction parser fournit les arguments suivants :

• enfant: La chaîne HTML qui spécifie l'élément enfant
• valeur: La valeur transmise à l'élément enfant

Vous pouvez utiliser le code de sérialiseur JSON RTE personnalisé suivant pour convertir vos données de champ JSON RTE au format HTML.

import { jsonToHtml } de "@contentstack/json-rte-serializer" ;const jsonValue = { type : "doc", uid : "cfe8176d1ca04cc0b42f60b3047f611d", attrs : {}, enfants : [ { type : "p", attrs : { }, uid: "6eae3c5bd7624bf39966c855543d954b", enfants: [{type: "Social-telbed", attrs: {url: "https://twitter.com/contentstack/status/15089119038436365?cxt=hwwmsc909038436365?cxt=hwwmsc909038436365?cxt=hwwmsc909038436365?cxt=hwwmsc909038436365?cxt=hwwmsc909038436365?cxt=hwwmsc909038436365?cxt=hwwmsc909038436365?cxt=hwwmsc ", style: { }, "redactor-attributes": { url : "https://twitter.com/Contentstack/status/1508911909038436365?cxt=HHwWmsC9-d_Y3fApAAAA", }, }, uid : "8d8482d852b84822a9b66e55ffd0e57c", enfants : [{ texte : " " }], }, ], }, { type : "p", attrs : {}, uid : "54a7340da87846dda28aaf622069559a", enfants : [ { text : "This " }, { text : "is", attrs : { style : {} }, couleur : "rouge" }, { texte : " texte." }, ], }, ],};const htmlValue = jsonToHtml( jsonValue, // options de l'analyseur { customElementTypes : { "social-embed": (attrs, child, jsonBlock) => { return `${child}`; }, }, customTextWrapper : { "color": (enfant, valeur) => { return `${ enfant}`; }, }, });console.log(htmlValue);

Note: La clé de l'analyseur personnalisé spécifié doit correspondre exactement au type d'élément. Cela inclut la casse du texte.

Résultat de conversion

Les données HTML résultantes se présenteront comme suit :

Cette est du texte.

Convertir HTML en JSON

Vous pouvez transmettre une méthode d'analyseur personnalisée qui convertira les données pour le type d'élément HTML mentionné (par exemple,) au format JSON. Dans les options analysées, lecustomElementTagsl'objet analyse les éléments de niveau bloc et en ligne (par exemple, le panneau d'informations), tandis que l'objetbalises de texte personnaliséesobject analyse les éléments de mise en forme du texte (par exemple, gras, italique, couleur de police, etc.). Ces options prendraient un objet dont les clés sont des types d'éléments et les valeurs sont les fonctions d'analyseur qui seront exécutées pour ce type.

La fonction d'analyseur fournit leilargument qui fait référence à l'élément du nœud HTML.

Vous pouvez utiliser le code de sérialiseur JSON RTE personnalisé suivant pour convertir vos données de champ HTML RTE au format JSON.

import { htmlToJson } de "@contentstack/json-rte-serializer";const htmlDomBody = new DOMParser().parseFromString( `
Ce est du texte.
`, "text/html" ).body;const jsonValue = htmlToJson(htmlDomBody, { customElementTags : { "SOCIAL-EMBED": (el) => ({ type : "social-embed", attrs : { url : el.getAttribute("url") | | null, }, }), }, customTextTags : { "COLOR": (el) => { return { color : el.getAttribute("data-color"), } ; }, },});console.log (jsonValeur);

Note:L'extrait de code ci-dessus ne fonctionnerait que pour les sites Web frontaux alimentés par JavaScript.

Pour les applications basées sur Node.js, vous pouvez utiliser le code suivant :

const { htmlToJson } = require("@contentstack/json-rte-serializer")const {JSDOM} = require('jsdom')const dom = new JSDOM(`
Ce est du texte. p>`)let htmlDoc = dom.window.document.querySelector('body')const jsonValue = htmlToJson(htmlDoc, { customElementTags : { "SOCIAL-EMBED": (el) => ({ type : "social-embed" , attrs : { url : el.getAttribute("url") || null, }, }), }, customTextTags : { "COLOR": (el) => { return { color : el.getAttribute("data-color "), } ; }, },});console.log(jsonValue);

Note: La clé de l'analyseur personnalisé doit toujours être en majuscule et correspondre exactement à la balise HTML personnalisée.

Résultat de conversion

Les données au format JSON résultantes se présenteront comme suit :

{ "type": "doc", "uid": "cfe8176d1ca04cc0b42f60b3047f611d", "attrs": {}, "children": [ { "type": "p", "attrs": {}, "uid": " 6eae3c5bd7624bf39966c855543d954b", "enfants": [ { "type": "social-embed", "attrs": { "url": "https://twitter.com/Contentstack/status/1508911909038436365?cxt=HHwWmsC9-d_Y3fApAAAA", "style": {}, "redactor-attributes": { "url": "https://twitter.com/Contentstack/status/1508911909038436365?cxt=HHwWmsC9-d_Y3fApAAAA" } }, "uid": "8d8482d852b84822a9b66e55ffd0e57c", "enfants": [ { "texte": "" } ] } ] }, { "type": "p", "attrs": {}, "uid": "54a7340da87846dda28aaf622069559a", "enfants": [ { "texte" " : "Ce " }, { "text": "est", "attrs": { "style": {} }, "color": "red" }, { "text": " text." } ] } ]}

Conversion automatique

Par défaut, le champ JSON Rich Text Editor prend en charge des balises HTML limitées dans l'éditeur. Pour cette raison, l'outil JSON RTE Serializer n'est pas en mesure de reconnaître chaque balise HTML standard.

Pour aider le sérialiseur JSON RTE à reconnaître et à traiter des balises supplémentaires couramment utilisées dans HTML, vous pouvez utiliser l'option de conversion automatique. Lorsque vous utilisez cette option, vous devez passer leallowNonStandardTags : vraiparamètre dans lejsonVersHtmlouhtmlVersJsonméthode pour manipuler le fonctionnement du package JSON RTE Serializer selon vos besoins. Lorsque vous transmettez ce paramètre, il personnalise votre code JSON RTE Serializer pour permettre la prise en charge de toutes les balises ou types d'éléments HTML standard reconnus dans le champ JSON Rich Text Editor.

Convertir JSON en HTML

Vous pouvez passer leallowNonStandardTags : vraiparamètre dans lejsonVersHtmlpour permettre à l'outil JSON RTE Serializer de reconnaître les balises HTML standard ou les types d'éléments et de les convertir au format JSON.

Vous pouvez utiliser le code de sérialiseur JSON RTE personnalisé suivant pour convertir vos données de champ JSON RTE au format HTML.

import { jsonToHtml } de "@contentstack/json-rte-serializer";const jsonValue = { "type": "doc", "uid": "cfe8176d1ca04cc0b42f60b3047f611d", "attrs": {}, "children": [ { " type": "hangout-module", "attrs": {}, "enfants": [ { "type": "hangout-chat", "attrs": { "from": "Paul, Addy" }, "enfants " : [ { "type": "hangout-discussion", "attrs": {}, "children": [ { "type": "hangout-message", "attrs": { "from": "Paul", "profile": "profile.png", "datetime": "2013-07-17T12:02" }, "children": [ { "type": "p", "attrs": {}, "children": [ { "text": "Ressentez ce truc de composants Web." } ] }, { "type": "p", "attrs": {}, "children": [ { "text": "Vous en avez entendu parler ?" } ] } ] } ] } ] }, { "type": "hangout-chat", "attrs": {}, "children": [ { "text": "Salut !" } ] } ] } ]};const htmlValue = jsonToHtml( jsonValue, // options de l'analyseur { allowNonStandardTypes : true });console.log(htmlValue);

Résultat de conversion

Les données HTML résultantes se présenteront comme suit :

 
Vous ressentez ce truc de composants Web.
Vous en avez entendu parler ?Bonjour !

Convertir HTML en JSON

Vous pouvez passer leallowNonStandardTags : vraiparamètre dans lehtmlVersJsonpour permettre à l'outil JSON RTE Serializer de reconnaître les balises HTML standard ou les types d'éléments lors de la conversion des données JSON au format HTML.

Vous pouvez utiliser le code de sérialiseur JSON RTE personnalisé suivant pour convertir vos données de champ HTML RTE au format JSON.

import { htmlToJson } from "@contentstack/json-rte-serializer";const htmlDomBody = new DOMParser().parseFromString( `< hangout-message from="Paul" profile="profile.png" datetime="2013-07-17T12:02">
Vous sentez ce truc de composants Web.
Vous en avez entendu parler ? p>Bonjour !`, "text/html").body ;const jsonValue = htmlToJson(htmlDomBody, { allowNonStandardTags: true,});console.log(jsonValue);

Résultat de conversion

Les données au format JSON résultantes se présenteront comme suit :

{ "type": "doc", "uid": "cfe8176d1ca04cc0b42f60b3047f611d", "attrs": {}, "children": [ { "type": "hangout-module", "attrs": {}, "children" : [ { "type": "hangout-chat", "attrs": { "from": "Paul, Addy" }, "children": [ { "type": "hangout-discussion", "attrs": { }, "children": [ { "type": "hangout-message", "attrs": { "from": "Paul", "profile": "profile.png", "datetime": "2013-07- 17T12:02" }, "children": [ { "type": "p", "attrs": {}, "children": [ { "text": "Feelin' this Web Components thing." } ] }, { "type": "p", "attrs": {}, "children": [ { "text": "Vous en avez entendu parler ?" } ] } ] } ] } ] }, { "type": "hangout-chat", "attrs": {}, "children": [ { "text": "Salut !" } ] } ] } ]}

Documentation

Référez-vous à notreÉditeur de texte enrichi JSONdocument pour plus d'informations.

Licence

Ce projet utilise une licence MIT. Se référer auLICENCEfichier pour plus d'informations.