web-dev-qa-db-fra.com

Convertir Quill Delta en HTML

Comment convertir des deltas en HTML pur? J'utilise Quill comme éditeur de texte enrichi, mais je ne sais pas comment afficher les Deltas existants dans un contexte HTML. Créer plusieurs instances de Quill ne serait pas raisonnable, mais je ne pouvais rien proposer de mieux pour le moment.

J'ai fait mes recherches et je n'ai trouvé aucun moyen de le faire.

quill
25
km6

Pas très élégant, mais c'est comme ça que je devais le faire.

function quillGetHTML(inputDelta) {
    var tempCont = document.createElement("div");
    (new Quill(tempCont)).setContents(inputDelta);
    return tempCont.getElementsByClassName("ql-editor")[0].innerHTML;
}

Évidemment, cela nécessite quill.js.

21
km6

Si je vous ai bien compris, il y a un fil conducteur de discussion ici , avec les informations clés que vous recherchez.

J'ai cité ci-dessous ce qui devrait vous être le plus précieux:

Quill a toujours utilisé Deltas comme un outil plus cohérent et facile à utiliser (pas d’analyse) Structure de données. Quill n'a aucune raison de réimplémenter les API DOM dans En plus de cela. quill.root.innerHTML ou document.querySelector(".ql-editor").innerHTML fonctionne très bien (quill.container.firstChild.innerHTML est un peu plus fragile, cela dépend du classement des enfants) et l'implémentation précédente de getHTML n'a fait guère plus que cela.

10
Remy

Je suppose que vous voulez le HTML à l'intérieur. C'est assez simple.

quill.root.innerHTML
6
Talha

quill.root.innerHTML sur l'objet quill fonctionne parfaitement.

 $scope.setTerm = function (form) {
                var contents = JSON.stringify(quill.root.innerHTML)
                $("#note").val(contents)
                $scope.main.submitFrm(form)
            }
2
agrim2936

Je l'ai accompli dans le backend en utilisant php . Mon entrée est delta encodé en json et ma sortie est la chaîne html . Voici le code, s'il peut vous aider. Cette fonction est toujours à gérer Listes bien que et certains autres formats, mais vous pouvez toujours étendre ceux dans la fonction de fonctionnement.

function formatAnswer($answer){
    $formattedAnswer = '';
    $answer = json_decode($answer,true);
    foreach($answer['ops'] as $key=>$element){
        if(empty($element['insert']['image'])){
            $result = $element['insert'];
            if(!empty($element['attributes'])){
                foreach($element['attributes'] as $key=>$attribute){
                    $result = operate($result,$key,$attribute);
                }
            }
        }else{ 
            $image = $element['insert']['image'];
            // if you are getting the image as url
            if(strpos($image,'http://') !== false || strpos($image,'https://') !== false){
                $result = "<img src='".$image."' />";
            }else{
                //if the image is uploaded 
                //saving the image somewhere and replacing it with its url
                $imageUrl = getImageUrl($image);
                $result = "<img src='".$imageUrl."' />";
            }
        }
        $formattedAnswer = $formattedAnswer.$result;
    }
    return nl2br($formattedAnswer);
}

function operate($text,$ops,$attribute){
    $operatedText = null;
    switch($ops){
        case 'bold': 
        $operatedText = '<strong>'.$text.'</strong>';
        break;
        case 'italic':
        $operatedText = '<i>'.$text.'</i>';
        break;
        case 'strike':
        $operatedText = '<s>'.$text.'</s>';
        break;
        case 'underline':
        $operatedText = '<u>'.$text.'</u>';
        break;
        case 'link':
        $operatedText = '<a href="'.$attribute.'" target="blank">'.$text.'</a>';
        break;
        default:
        $operatedText = $text;
    }
    return $operatedText;
}
2
Ankush Tanwar

J'ai rassemblé un paquet de nœuds pour convertir du HTML ou du texte brut vers et depuis un Delta Quill.

Mon équipe l'a utilisé pour mettre à jour notre modèle de données afin d'inclure à la fois les langages Delta et HTML de Quill. Cela nous permet d'effectuer un rendu sur le client sans une instance de Quill.

Voir node-quill-converter .

Il comporte les fonctions suivantes: - convertTextToDelta - convertHtmlToDelta - convertDeltaToHtml

En coulisse, il utilise une instance de JSDOM. Cela peut le rendre parfaitement adapté aux scripts de migration, car les performances n'ont pas été testées dans un cycle de vie de demande d'application typique.

1
Joel Colucci

Voici comment je l’ai fait, pour vous, les gens d’Express. Il semble avoir très bien fonctionné en conjonction avec le désinfectant express.

app.js

 import expressSanitizer from 'express-sanitizer'

 app.use(expressSanitizer())

 app.post('/route', async (req, res) => {
     const title = req.body.article.title
     const content = req.sanitize(req.body.article.content)
     // Do stuff with content
 })

new.ejs

 <head>
     <link href="https://cdn.quilljs.com/1.3.2/quill.snow.css" rel="stylesheet">
 </head>

 ...

 <form action="/route" method="POST">
     <input type="text" name="article[title]" placeholder="Enter Title">
     <div id="editor"></div>
     <input type="submit" onclick="return quillContents()" />
 </form>

 ...

 <script src="https://cdn.quilljs.com/1.3.2/quill.js"></script>
 <script>
     const quill = new Quill('#editor', {
         theme: 'snow'
     })

     const quillContents = () => {
         const form = document.forms[0]
         const editor = document.createElement('input')

         editor.type = 'hidden'
         editor.name = 'article[content]'
         editor.value = document.querySelector('.ql-editor').innerHTML
         form.appendChild(editor)

         return form.submit()
     }
</script>

express-sanitizer ( https://www.npmjs.com/package/express-sanitizer )

document.forms ( https://developer.mozilla.org/en-US/docs/Web/API/Document/forms )

Mon affichage n'ayant qu'un seul formulaire, j'ai donc utilisé document.forms[0]. Toutefois, si vous avez plusieurs extensions ou si vous pouvez étendre votre affichage ultérieurement afin de disposer de plusieurs formulaires, consultez la référence MDN.

Ce que nous faisons ici consiste à créer une entrée de formulaire masquée à laquelle nous attribuons le contenu de la division Quill, puis nous commençons illégalement l’envoi du formulaire et le transmettons à travers notre fonction pour le terminer.

Maintenant, pour le tester, faites une publication avec <script>alert()</script> dedans, et vous n’aurez plus à vous soucier des exploits par injection.

C'est tout ce qu'on peut en dire.

1
agm1984

La solution simple est ici: https://www.scalablepath.com/blog/using-quill-js-build-wysiwyg-editor-website/

Le code principal est:

console.log(quill.root.innerHTML);
1
Michal Wrd

Voici une fonction complète utilisant quill.root.innerHTML, les autres n’en couvrant pas totalement l’utilisation complète:

function quillGetHTML(inputDelta) {
        var tempQuill=new Quill(document.createElement("div"));
        tempQuill.setContents(inputDelta);
        return tempQuill.root.innerHTML;
    }

Ceci est juste une légère variation de la réponse de km6.

1
Captain Fantastic

Essayer

console.log ( $('.ql-editor').html() );
1
Araújo Everson

Si vous voulez rendre quill en utilisant nodejs, il existe un paquet assez simple basé sur jsdom, utile pour restituer le verso (un seul fichier et la dernière mise à jour dans 18 jours) restitue le delta en chaîne html sur le serveur

0
yo_0

quill-render ressemble à ce que vous voulez. De la docs:

var render = require('quill-render');
render([
    {
        "attributes": {
            "bold": true
        },
        "insert": "Hi mom"
    }
]);
// => '<b>Hi mom</b>'
0
user2994322

Pour une solution de style jQuery permettant d'obtenir et de définir la valeur Quill, procédez comme suit:

Quill.prototype.val = function(newVal) {
  if (newVal) {
    this.container.querySelector('.ql-editor').innerHTML = newVal;
  } else {
    return this.container.querySelector('.ql-editor').innerHTML;
  }
};


let editor = new Quill( ... );

//set the value    
editor.val('<h3>My new editor value</h3>');

//get the value
let theValue = editor.val();
0
Genesis

Voici une bonne façon de le faire.

var QuillDeltaToHtmlConverter = require('quill-delta-to-html').QuillDeltaToHtmlConverter;

// TypeScript / ES6:
// import { QuillDeltaToHtmlConverter } from 'quill-delta-to-html'; 

var deltaOps =  [
    {insert: "Hello\n"},
    {insert: "This is colorful", attributes: {color: '#f00'}}
];

var cfg = {};

var converter = new QuillDeltaToHtmlConverter(deltaOps, cfg);

var html = converter.convert();

Référez-vous https://github.com/nozer/quill-delta-to-html

0
NR Ganesh