Quill on Meteor: How to?

help
1

Hey guys,

I’ve been trying to implement Quill on Meteor since more time than I wish to admit.
Documentation and examples are insufficient and I don’t have any idea how to even start:

1) Should I use a wrapper for Meteor? Which one? (all of them seem old and have little to no documentation). Right now, I am only using the NPM package (btw I’m using Blaze, not React).

2) Doing the basic process described on Quill’s website (creating a div and initiating quill on it) doesn’t work. Nothing gets rendered (no toolbar, no editor).

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

let editor = new Quill('#editor');

I tried it in a Template.onRendered block. After reading a few blog posts, I saw people actually writing the HTML for the toolbar and the editor (something I assumed Quill would do automatically when initiated). What should I do?

If anyone could provide me with a little “step-by-step” explanation, I would be very thankful!
Thanks! :slight_smile:

2

What is wrong with the following approach? Worked like a charm

<head>
  <title>quill</title>
  <!-- Main Quill library -->
  <script src="//cdn.quilljs.com/1.3.6/quill.min.js"></script>
  <!-- Theme included stylesheets -->
  <link href="//cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
  <link href="//cdn.quilljs.com/1.3.6/quill.bubble.css" rel="stylesheet">
</head>

<body>
  <h1>Welcome to Quill!</h1>
  {{> quill}}
</body>

<template name='quill'>
  <div id="editor">
    <p>Hello World!</p>
    <p>Some initial <strong>bold</strong> text</p>
    <p><br></p>
  </div>
</template>

Template.quill.onRendered(function(){
  const instance = this;
  instance.quill = new Quill('#editor', {
    theme: 'snow'
  });
});
2 Likes
3

Or copying the quill.min.js file to your client/lib folder and shipping it with your app. How are you making the library accessible to your client?