How to use Quill with Meteor?


#1

Hey guys!

I am trying to implement a Rich Text Editor on my app and decided to use Quill.
I installed the aramk:quill package and did as instructed on the documentation:

{{> quill name=“foo”}}

However, I am getting this error:

Exception in template helper: TypeError: Cannot read property ‘name’ of undefined
at Object.name

I tried changing the name and removing it, but still get the same error… I also tried adding the Quill NPM Package, but still no solution. Any idea what could be wrong?

Thanks!


#2

I don’t think I was ever able to integrate quill like that. It looks like in the past I just used the scripts and applied window.Quill to a template.

I will say that we ran into a number of non-trivial issues using quill. There are instances where the quill editor uses styles to mimic the presentation of dom elements, which broke the implementation for us. Notably, uls and ols gave us problems.

Just a heads up!


#3

Thanks for the reply! Any suggestions on a better text editor solution for Meteor?


#4

I’m using Quill with React, it’s work well, since it’s just a wrapper for the JS library so I’d assume that would work well too. You don’t need the Blaze version as @vigorwebsolutions suggested, just attach to the dom and initiate it manually.

The html lists that Quill generates has classes to manage indentations (ql-indent-1, ql-indent-2 etc…) which you need to provide CSS for but other than that, I don’t recall having issues with Quill css, it’s really flexible and powerful editor.

There is really nothing specific about Meteor here so pretty much any JS library should work.


#5

This one https://github.com/jaredreich/pell is interesting as an alternative


#6

Hi! I installed Pell through NPM and set it up according to the documentation (Examples=>General), but can’t get it to work… only the “bold” button from the header appears, but no textbox… can you give me a short explanation of how you managed to use it on Meteor?

Thanks!


#7

I’ve used this react component https://alex-d.github.io/Trumbowyg/ successfully

You can use React and Blaze together easily - https://guide.meteor.com/react.html


#8

I implemented in in Viewmodel I let you check the code (there are other things, so just look into App.js and Pell.js files to understand


#9

Not sure about Meteor, but we started using CKEditor (v4). The documentation is extensive and tough to digest, and the configuration is painful, but we are getting valid, reusable html easily, and that has been one of our biggest editor pain points, so it was a good trade for us.

If the html you get from Quill works for you, it’s definitely easier to implement imo.


#10

I wouldn’t touch that with a long stick. Any WYSIWYG editor using just plain document.execCommands is going to bring you a world of hurt.

Quill for example is designed to avoid that pain, which is why it is also a lot bulkier library. It doesn’t just provide a wrapper for designMode commands.

From the Quill guide:

Not only is functionality a cross platform consideration, but user and developer experience is as well. If some content produces a particular markup in Chrome on OSX, it will produce the same markup on IE. If hitting enter preserves bold format state in Firefox on Windows, it will be preserved on mobile Safari.


#11

Can you please explain why you don’t trust document.execCommands ? This seems to be OK for me: https://caniuse.com/#feat=document-execcommand

it says that it doesn’t work on chrome android but it worked on mine.

Just curious


#12

This article will explain it to you: https://medium.engineering/why-contenteditable-is-terrible-122d8a40e480