web-dev-qa-db-ja.com

クイルエディターの内容をフォームに投稿するにはどうすればよいですか？

私は非常に一般的なシナリオだと思うものを持っています。私は通常、このフォームを持っています：

<form method="post">

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

</form>

次にPHPでフォーム（$ _POST ['text']）からデータをキャプチャし、別の変数で使用できます。

ここで、 Quill を使用したいので、代わりにユーザーはニースのリッチテキストエディターを使用できます。クイルはこれに非常に適しているようで、ドキュメントは非常に詳細です。しかし、何らかの理由で、データをフォームに「投稿」する方法を見つけることができません。 1つの 単一のサンプルページ がありますが、この種類は私が望むことをしますが、これをサンプルに完全に実装することはできません。 クイックスタートガイド 私にとって）トピックは議論されていません、そして、私もドキュメントでこれを見つけることができません。

クイルはこのように使用されることになっていますか？私は何かを監督していますか？この作業を行うための推奨される方法はありますか？

これは私が現在持っているものです：

<!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

関連する議論を確認できます https://github.com/quilljs/quill/issues/87

これは理想的な解決策ではありませんが：

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>

フォームに識別子を指定すると、jQueryを使用して次のことができます。

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

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

HTMLの代わりに、quill.getContents（）を使用してデルタを取得できます。

10
Gary Brooks

これを行うために使用したコードは次のとおりです。

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

基本的には、非表示のテキストエリアをフォームに追加し、「ql-editor」コンテナ（コンテナdivのQuill Editorによって自動的に作成されます）のコンテンツをそこにコピーします。その後、テキストエリアがフォームとともに送信されます。コードで使用されているIDをコンテナタグのIDに変更する必要があります。

5
eLeMeNOhPi

私が思いついた解決策は、ラッパークラスを作成することでした。

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;
            });
    }
}

クラスをページのどこかに挿入し、次を使用して初期化します。

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

あなたのhtmlはおおよそ次のようになります。

<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

私はこれをやっています：

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);
        });

フォーム上のどこか：

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

これを試して：

<!-- 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

これは私のために働いた：

<!-- 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