Thanks @vioan, I missed that.
did you add the corresponding code for dropdown? for example:
<!-- Add font size dropdown -->
<select class="ql-size">
<option value="10px">Small</option>
<option value="13px" selected>Normal</option>
<option value="18px">Large</option>
<option value="32px">Huge</option>
</select>Ah – was using the wrong dropdown formatting – works now – thank you!
One thing, it seems Quill has a set of predefined classes, such as Text Color that work out of the box right?
Do you typically just save off the entire HTML beneath #full-editor ‘div’ into a field in Mongo? Then how do you reconstitute the HTML into a ‘div’ container (for example), keeping the formatting?
usually you have to clean the code: see html sanitizer or html purifier. Purifier is working on client and server side, and is what I use. they also have packages on atmospherejs.
1 Like
Awesome, Purifier looks great, I’ll work on integrating this into my workflow.
@vioan so after your ‘clean’ the HTML code, do you actually save some or all of the HMTL in a field in Mongo in order to keep the formatting – you almost have to right? How do you get the formatted edited text to display correctly after coming back from the DB?
You have to clean the html code from untrusted users in order to avoid cross-site scripting (XSS) attacks, and insert it in mongo. And then, in your template you can have an empty DIV where you want to show your html code and for example you can use
$('#your-div-id').html(html-from-mongo)
see this example. There are other options as well, but that one should work.
Nice. It seems like i can use {{{message}}} instead of {{message}} in order for Blaze to apply any HTML formatting coming from Mongo.
That means I just need to save the HTML from Quill properly. @vioan, can I ask, what exactly do you extract out of your HTML Quill full-editor ‘div’ and save off to Mongo?
Haha – we posted these at the same time.
exactly, {{{ }}} will let you insert html code
I am not able to help you more right now, I am on my way to holiday and posting/searching from tablet is not what I really want 
Haha – thanks for everything – you got me really far anyway!
I got this almost working…
With a Quill Editor that looks like this:
Outputs to raw outer HTML like so:
<div class="ql-editor authorship" id="ql-editor-1" contenteditable="true">
<div class="ql-multi-cursor"><span class="cursor hidden"><span class="cursor-flag"><span class="cursor-name" style="background-color: rgba(255, 153, 51, 0.901961);">Gandalf</span></span>
</span>
</div>
<div class="ql-editor authorship" id="ql-editor-2" contenteditable="true"><span style="font-size: 18px;">One Ring to Rule Them All</span>
</div>
<div class="ql-editor authorship" id="ql-editor-2" contenteditable="true"><a href="http://en.wikipedia.org/wiki/One_Ring">http://en.wikipedia.org/wiki/One_Ring</a>
</div>
<div class="ql-editor authorship" id="ql-editor-2" contenteditable="true">
<br>
</div>
<div class="ql-editor authorship" id="ql-editor-2" contenteditable="true">Three Rings for the <u>Elven-kings</u> under the sky,</div>
<div class="ql-editor authorship" id="ql-editor-2" contenteditable="true">Seven for the <u>Dwarf-lords</u> in halls of stone,</div>
<div class="ql-editor authorship" id="ql-editor-2" contenteditable="true">Nine for <u>Mortal Men</u>, doomed to die,</div>
<div class="ql-editor authorship" id="ql-editor-2" contenteditable="true">One for the <u>Dark Lord</u> on his dark throne.</div>
<div class="ql-editor authorship" id="ql-editor-2" contenteditable="true">
<br>
</div>
<div class="ql-editor authorship" id="ql-editor-2" contenteditable="true">In the Land of Mordor where the Shadows lie.</div>
<div class="ql-editor authorship" id="ql-editor-2" contenteditable="true">One Ring to <b>rule</b> them all, One Ring to <b>find</b> them,</div>
<div class="ql-editor authorship" id="ql-editor-2" contenteditable="true">One Ring to <b>bring</b> them all and in the darkness <b>bind</b> them.</div>
<div class="ql-editor authorship" id="ql-editor-2" contenteditable="true">In the Land of Mordor where the Shadows lie.</div>
<div class="ql-paste-manager" contenteditable="true">
<br>
</div>
</div>
This is the output after using the Purifier:
<span class="cursor hidden">
<span class="cursor-flag">
<span class="cursor-name" style="background-color: rgba(255, 153, 51, 0.901961);">
Gandalf
</span>
</span>
</span>
<span style="font-size: 18px;">
One Ring to Rule Them All
</span>
<a href="http://en.wikipedia.org/wiki/One_Ring">
http://en.wikipedia.org/wiki/One_Ring
</a>
<br/>Three Rings for the
<u>
Elven-kings
</u> under the sky,Seven for the
<u>
Dwarf-lords
</u> in halls of stone,Nine for
<u>
Mortal Men
</u> , doomed to die,One for the
<u>
Dark Lord
</u> on his dark throne.
<br/>In the Land of Mordor where the Shadows lie.One Ring to <b>rule</b> them all, One Ring to <b>find</b> them,One Ring to <b>bring</b> them all and in the darkness <b>bind</b> them.In the Land of Mordor where the Shadows lie.
<br/>
I then save this to Mongo, and get the value and add it as a message sent. The output in a {{{message}}} tag looks like so:
As you can see there are no returns.
This is a beautiful editor, I’d be interested in using this over summernote. Any advice from your trials so far?
You probably didn’t notice that Quill has a rather nice API that would give you clean HTML back if you asked for it nicely 
No need for additional tools that clean up html for you. It’s all there. With newlines, too.
Just dont forget that nice Quill API does not help with securing this, cause it is still client side.
1 Like
I got things working fine – great editor.
Just had to add the ‘div’ attribute and all was good.
Anyhow, the only issue I’m facing now is, spaces on a row of text.
For example I can type in the following:
‘hi love all these spaces!’
The string will get saved fine in Mongo (with the spaces), but when I do a collection_name.find({}), the string becomes:
‘hi love all these spaces!’
Removing the spaces.
I guess I’ll post this in another thread as it seems unrelated to Quill.
Thanks to everyone getting this going!