web-dev-qa-db-fra.com

Comment publier le contenu d'un éditeur Quill dans un formulaire?

J'ai ce que je pense être un scénario très courant. J'aurais normalement ce formulaire:

<form method="post">

<textarea name="text"></textarea>
<input type="submit" value="Save" />

</form>

Ensuite, avec PHP je capturerais les données du formulaire ($ _POST ['text']) et je pourrais l'utiliser dans une autre variable.

Maintenant, je voudrais utiliser Quill pour que les utilisateurs aient un bel éditeur de texte riche à la place. Quill semble très bien adapté à cela et la documentation est très détaillée. Cependant, pour une raison quelconque, je ne trouve pas comment "publier" les données sur le formulaire. Il y a une page d'exemple unique qui fait ce que je veux, mais je ne suis pas en mesure de l'implémenter complètement dans mon exemple, et dans le guide de démarrage rapide c'est plutôt fondamental ( pour moi) le sujet n'est pas discuté, et je ne le trouve pas non plus dans la documentation.

Est-ce que Quill est censé être utilisé comme ça? Suis-je en train de superviser quelque chose? Existe-t-il un moyen recommandé pour que cela fonctionne?

Voici ce que j'ai actuellement:

<!doctype html>
<html>
<head>
<title>Test</title>
<meta charset="UTF-8" />
<link href="https://cdn.quilljs.com/1.0.0/quill.snow.css" rel="stylesheet">
</head>
<body>
<form method="post">


<!-- Create the toolbar container -->
<div id="toolbar">
  <button class="ql-bold">Bold</button>
  <button class="ql-italic">Italic</button>
</div>


<form method="post">

<!-- Create the editor container -->
<div id="editor">
  <p>Hello World!</p>
</div>

<input type="submit" value="Save" />

</form>

<!-- Include the Quill library -->
<script src="https://cdn.quilljs.com/1.0.0/quill.js"></script>

<!-- Initialize Quill editor -->
<script>
  var editor = new Quill('#editor', {
    modules: { toolbar: '#toolbar' },
    theme: 'snow'
  });
</script>
</body>
</html>
javascriptphpquill
8
user32421

Vous pouvez consulter la discussion connexe à ce sujet https://github.com/quilljs/quill/issues/87

Bien que ce ne soit pas une solution idéale:

var myEditor = document.querySelector('#editor')
var html = myEditor.children[0].innerHTML
12
erw13n
<form method="post" id="identifier">

<div id="quillArea"></div>

<textarea name="text" style="display:none" id="hiddenArea"></textarea>
<input type="submit" value="Save" />

</form>

Si vous donnez au formulaire un identifiant, alors en utilisant jQuery vous pouvez faire ce qui suit:

var quill = new Quill ({...}) //definition of the quill

$("#identifier").on("submit",function(){
$("#hiddenArea").val($("#quillArea").html());
})

Au lieu du HTML, vous pouvez utiliser quill.getContents () pour obtenir le delta.

10
Gary Brooks

Voici le code que j'ai utilisé pour ce faire:

$(document).ready(function(){
  $("#theform").on("submit", function () {
    var hvalue = $('.ql-editor').html();
    $(this).append("<textarea name='content' style='display:none'>"+hvalue+"</textarea>");
   });
});

Fondamentalement, ce qu'il fait est d'ajouter une zone de texte masquée à votre formulaire et de copier le contenu du conteneur "ql-editor" (cela est automatiquement fait par Quill Editor dans le conteneur div). La zone de texte sera ensuite soumise avec le formulaire. Vous devez remplacer les ID utilisés dans le code par l'ID de vos balises de conteneur.

5
eLeMeNOhPi

Une solution que j'ai trouvée était de créer une classe wrapper.

class QuillWrapper {

    /**
     * @param targetDivId { string } The id of the div the editor will be in.
     * @param targetInputId { string } The id of the hidden input
     * @param quillOptions { any } The options for quill
     */
    constructor(targetDivId, targetInputId, quillOptions) {

        //Validate target div existence
        this.targetDiv = document.getElementById(targetDivId);
        if (!this.targetDiv) throw "Target div id was invalid";

        //Validate target input existence
        this.targetInput = document.getElementById(targetInputId);
        if (!this.targetInput) throw "Target input id was invalid";

        //Init Quill
        this.quill = new Quill("#" + targetDivId, quillOptions);

        //Bind the two containers together by listening to the on-change event
        this.quill.on('text-change',
            () => {
                this.targetInput.value = this.targetDiv.children[0].innerHTML;
            });
    }
}

Incluez simplement la classe quelque part sur votre page, puis utilisez ce qui suit pour l'initier:

    let scopeEditor = new QuillWrapper("ScopeEditor", "Scope", { theme: "snow" });

Votre html ressemblerait à peu près à ceci:

<div class="form-group">
     <label asp-for="Scope" class="control-label col-md-2"></label>  
     <div id="ScopeEditor"></div>
     <input type="hidden" asp-for="Scope" class="form-control" />
</div>
1
Maxwell Devos

Je fais ça:

var quill = new Quill('.quill-textarea', {
            placeholder: 'Enter Detail',
            theme: 'snow',
            modules: {
                toolbar: [
                    ['bold', 'italic', 'underline', 'strike'],
                    [{ 'list': 'ordered'}, { 'list': 'bullet' }],
                    [{ 'indent': '-1'}, { 'indent': '+1' }]
                ]
            }
        });

        quill.on('text-change', function(delta, oldDelta, source) {
            console.log(quill.container.firstChild.innerHTML)
            $('#detail').val(quill.container.firstChild.innerHTML);
        });

Quelque part sur le formulaire:

<div class="quill-textarea"></div>
<textarea style="display: none" id="detail" name="detail"></textarea>
0
Emeka Mbah

Essaye ça:

<!-- Include the Quill library -->
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>

<!-- Initialize Quill editor -->
<script>
    var quill = new Quill('#editor', {
        modules: {
            toolbar: [
                ['bold', 'italic'],
                ['link', 'blockquote', 'code-block', 'image'],
                [{
                    list: 'ordered'
                }, {
                    list: 'bullet'
                }]
            ]
        },
        placeholder: 'Compose an epic...',
        theme: 'snow'
    });

    $("#form").submit(function() {
        $("#description").val(quill.getContents());
    });
</script>
0
Erich García

Cela a fonctionné pour moi:

<!-- Include the Quill library -->
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>

<!-- Initialize Quill editor -->
<script>
    var quill = new Quill('#editor', {
        modules: {
            toolbar: [
                ['bold', 'italic'],
                ['link', 'blockquote', 'code-block', 'image'],
                [{
                    list: 'ordered'
                }, {
                    list: 'bullet'
                }]
            ]
        },
        placeholder: 'Compose an epic...',
        theme: 'snow'
    });

    $("#form").submit(function() {
        $("#description").val(quill.getContents());
    });
</script>
0
Erich García