web-dev-qa-db-ja.com

既存のデータをQuill JSに読み込む方法

クイルの操作方法を理解するのに本当に問題があります...

データを保存することは非常に簡単なので問題ありません:)

私は2つの点で少し行き詰まっています

  1. 保存したデータをクイルで編集する方法
  2. 保存されたデータを解析して静的ページを作成する方法

誰でもデルタをロードする方法についてアドバイスを提供できますか

{"ops":[{"insert":"this is a test bit of text\n"}]}

クイルエディターに戻り、出力を解析してページを作成する方法

返信ありがとうございます。

javascriptjsonquill
11
Tony

これでうまくいきます。それは誰かを助けるでしょう。

editor.root.innerHTML = "<p><strong class=\"ql-size-large\"><em><s><u>This would be the text that we are going to show in the editor with pre-formatting.<\/u><\/s><\/em><\/strong><\/p>";

ここでeditorはクイルインスタンスになります。

これのおかげ [〜＃〜] link [〜＃〜]

16
Alankar More

setContents を使用して、デルタを挿入します。

quill.setContents({
    "ops":[
        {"insert":"this is a test bit of text\n"}
    ]
});

http://codepen.io/anon/pen/VKWZLd

生のHTMLにアクセスするには、次のようにします。

var html = document.querySelector(".ql-editor").innerHTML

生のHTMLで作業している場合は、使用する前にそれをサニタイズする必要があります。

13
Ben Browitt

Laravelを使っている人のために書いています。私はそれをこのようにしました：

保存するには、フォームを送信する前に：

        form.submit(function(){
            var description = document.querySelector('input[name=description]');
            description.value = editor.root.innerHTML;                
        })

フォームを編集するには、コンテンツを読み込みます。

         var editor = new Quill('#quill-editor', {
            modules: {
                toolbar: toolbarOptions
            },
            placeholder: 'type something',
            theme: 'snow'
        });
        .root.innerHTML = '{!! !empty($quill_editor) ? $quill_editor : ''  !!} ';

そして最後に使用したいのがhtmlである場合は、次のようにテンプレートにロードできます。

{!! $description !!}

誰かのお役に立てれば幸いです

2
Evan
  • エディターを作成します（以下の例は読み取り専用バージョン用です）
  • ターゲットを見つけます（テキストを表示する場所）
  • 文字列コンテンツを解析する
  • setContents エディター用
var quill = new Quill('#editor-container', { modules: { toolbar: [] }, readOnly: true, theme: 'bubble'} );
var $target = $('#editor-container');
var $content = JSON.parse($target[0].innerText);
quill.setContents($content);
2
Remy
// parse String
let stringToParse = String.raw`{"ops":[{"insert":"this is a test bit of text\n"}]}`;
// set quill editor instance to Delta state.
quill.setContents(JSON.parse());

setContents Quillから、エディターをDeltaに設定します。

String.raw 展開を回避するために'\t'から' '。 （参照 JSON.parseは解析時にエラーをスローします... ）

1
iBaff