【Quill】editorの内容を書き換える

Quillエディタの中身を更新するとき、HTML構成に沿って書き換えないといけません。
ちゃんと理解してなかったし、詰まったので、メモ。

QuillのHTML

自分のコードのHTMLはこれだけしか書かれてないんです。

<div id="editor"></div>

ですが、開発者ツールで見れば実体はこんな感じ。

<div id="editor" style="width:100%; height:300px;" class="ql-container ql-snow">
　<div class="ql-editor" data-gramm="false" contenteditable="true"></div>
　<div class="ql-clipboard" contenteditable="true" tabindex="-1"></div>
　<div class="ql-tooltip ql-hidden">
　　<a class="ql-preview" target="_blank" href="about:blank"></a>
　　<input type="text" data-formula="e=mc^2" data-link="https://quilljs.com" data-video="Embed URL">
　　<a class="ql-action"></a>
　　<a class="ql-remove"></a></div>
</div>

Quillエディタの中身を書き換える時、書き換えるのは#editorの中身ではなく、.ql-editorの中身です。
(これにハマった。)

ですので、こう書き換えます。

$('.ql-editor').html('<p>Hello World!</p>');

以上です。