I have @seeekr Quill editor working when I’m in insert mode. For example if I want to input some rich text and save it off to a mongo collection, I simply attach an event and do a find by id to get the html and i’m off to the races.
But I’m having trouble when I want to populate the Quill editor with existing data from a mongo collection. I tried the following but it creates an alternative editor structure outside my div. This is partial code/html:
<template name="quillEditor">
...
<div id="full-editor" class="editor ql-container ql-snow">
<div class="ql-multi-cursor">
<span class="cursor hidden" style="top: 218px; left: 277px; height: 15px;">
<span class="cursor-flag">
<span class="cursor-triangle top" style="border-bottom-color: rgba(255, 153, 51, 0.901961);"></span>
<span class="cursor-name" style="background-color: rgba(255, 153, 51, 0.901961);">Gandalf</span>
<span class="cursor-triangle bottom" style="border-top-color: rgba(255, 153, 51, 0.901961);"></span>
</span>
<span class="cursor-caret" style="background-color: rgba(255, 153, 51, 0.901961);"></span>
</span>
</div>
{{#if content}}
<div class="ql-editor authorship" id="ql-editor-1" contenteditable="true">
<div class="ql-editor authorship ql-content" contenteditable="true">
<span class="author-test">{{content}}</span>
</div>
</div>
{{else}}
<div class="ql-editor authorship ql-content" contenteditable="true"></div>
{{/if}}
<div class="ql-paste-manager" contenteditable="true"></div>
</div>
...
</template>
Above, if I do NOT pass in {{content}} the editor is basically in insert mode. In this mode the editor creates the following…
header div like so (where the index in the id can change):
<div class="ql-editor authorship" id="ql-editor-1" contenteditable="true"> ...
And subsequent text additions get created in dynamically added divs like this:
<div class="ql-editor authorship ql-content" contenteditable="true"><span class="author-test">so cool</span></div>
<div class="ql-editor authorship ql-content" contenteditable="true"><span class="author-test">love this!</span></div>
This is fine, but sometimes I want the editor to contain content that I already have, like a edit mode. This is a problem. Taking a snip from the code above:
{{#if content}}
<div class="ql-editor authorship" id="ql-editor-1" contenteditable="true">
<div class="ql-editor authorship ql-content" contenteditable="true">
<span class="author-test">{{content}}</span>
</div>
</div>
{{else}}
What I did here was try to replicate the div structure the Quill Editor creates dynamically, by wrapping my {{content}} in all the divs I usually see the Quill Editor makes dynamically.
It renders it, but it’s in an alternative div structure beside the one that Quill makes.
<div id="full-editor" class="editor ql-container ql-snow">
<!-- editors content that gets created no matter what -->
<!-- all additions go here no matter what -->
<div class="ql-editor authorship" id="ql-editor-1" contenteditable="true">
<div class="ql-editor authorship ql-content" contenteditable="true">
<span class="author-test">so cool</span>
</div>
<div class="ql-editor authorship ql-content" contenteditable="true">
<span class="author-test">love this!</span>
</div>
</div>
<!-- my {{content}} -->
<!-- alternative structure that doesn't get added to dynamically -->
<div class="ql-paste-manager" contenteditable="true"></div>
<div class="ql-editor authorship" id="ql-editor-1" contenteditable="true">
<div class="ql-editor authorship ql-content" contenteditable="true">
<span class="author-test">this is a test</span>
</div>
</div>
</div>
What am I doing wrong? How do I add existing text to the editor and create a situation where I can add/modify the existing text, allow me to save the additions off to a mongo collection.