J'essaye de convertir la sortie EditorJs en Html. EditorJs génère des données `` propres '' comme ceci:
{
"time": 1589987527499,
"blocks": [
{
"type": "embded",
"data": {
"service": "youtube",
"source": "https://www.youtube.com/watch?v=JbqGYgI3XY0",
"embed": "https://www.youtube.com/embed/JbqGYgI3XY0",
"width": 580,
"height": 320,
"caption": ""
}
},
{
"type": "image",
"data": {
"file": {
"url": "http://localhost/uploads/images/1.jpg"
},
"caption": "",
"withBorder": false,
"stretched": false,
"withBackground": false
}
},
{
"type": "header",
"data": {
"text": "test",
"level": 2
}
}
],
"version": "2.17.0"
}
comment puis-je convertir ceci en HTML brut? Dois-je le convertir manuellement?
5 Réponses :
Vous devez le convertir manuellement mais je créerais quelque chose comme un moteur qui a des composants basés sur le "type" par exemple si c'est type: image, il rendrait un composant qui affiche une image du "data.file.url" vous pouvez ajoutez également plus de fonctionnalités à ce composant d'image, vous voudrez peut-être une légende, puis vous avez ces données.
Il en va de même pour le type "embed", celui-ci aurait un composant "enfant" qui serait rendu en fonction de la condition "data.service", dans ce cas, il s'agit de YouTube et ensuite il ferait une vidéo youtube intégrée avec la source de " la source de données".
Cela pourrait également aider: https://github.com/codex-team/editor.js/issues/676
La bibliothèque 'editorjs-html' peut vous aider à analyser vos données Json en HTML. Il fournit quelques fonctions d'analyseur de base, mais vous permet également de remplacer et de définir vos propres fonctions d'analyseur. Il est indépendant du framework, vous pouvez donc l'utiliser n'importe où.
Le référentiel README contient de bonnes informations, mais vous pouvez également voir quelques exemples ici, https://medium.com/@pavittarx/rendering-json-from-editor-js-to-html-bfb615ee78c4
C'est bon. Mais il manque l'intégration youtube, ce qui, je pense, est le point culminant du plugin editorjs.
Vous pouvez toujours écrire vos propres fonctions d'analyseur. Lisez les documents!
pavittarx a fait l'affaire pour moi :) <3
J'ai trouvé une fonction pour le faire et j'ai fait une modification de ma part. Je pense que cela peut être amélioré, mais pour le moment, c'est le meilleur que j'ai.
convertDataToHtml(blocks) {
var convertedHtml = "";
blocks.map(block => {
switch (block.type) {
case "header":
convertedHtml += `<h${block.data.level}>${block.data.text}</h${block.data.level}>`;
break;
case "embded":
convertedHtml += `<div><iframe width="560" height="315" src="${block.data.embed}" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>`;
break;
case "paragraph":
convertedHtml += `<p>${block.data.text}</p>`;
break;
case "delimiter":
convertedHtml += "<hr />";
break;
case "image":
convertedHtml += `<img class="img-fluid" src="${block.data.file.url}" title="${block.data.caption}" /><br /><em>${block.data.caption}</em>`;
break;
case "list":
convertedHtml += "<ul>";
block.data.items.forEach(function(li) {
convertedHtml += `<li>${li}</li>`;
});
convertedHtml += "</ul>";
break;
default:
console.log("Unknown block type", block.type);
break;
}
});
return convertedHtml;
}
Editorjs produit des données propres et les responsables n'ont pas encore implémenté la fonctionnalité readOnly , pour en extraire le HTML. Donc, la seule solution est d'écrire une fonctionnalité de conversion par vous-même, mais j'ai créé un package à cet effet. editorjs-parser . Il prend en charge la plupart des types de blocs et vous pouvez également fournir votre propre analyseur personnalisé pour tout type de bloc. Ça supporte :
Il est également configurable.
vous pouvez utiliser ce npm install @ son_xx / editor-js-parser
Les liens ne sont pas considérés comme des réponses mais comme des commentaires à la question.