Instead of components

1

I created a few components in my app recently to run JS code after the DOM had been loaded (post-ember DOM).

After reading some of the component guides on emberjs.com I realize that components may not be intended for solutions like this.

What could I use instead of components to run custom JS code and make sure that it runs after certain DOM elements are loaded?

I am using a rich-text-editor library (QuillJS) and it requires a div element to initialize to. However the div element does not exist until after the Ember app has loaded. I’m open to any suggestions.

Thanks

2

I would think you’r QuillJS widget would be a component, where the div is in the template and its JS would be in the didInsertElementHook.

3

I am using quill.js too and here is what i did to make it work.

Made a component

app/components/quill-text.js:

import Ember from 'ember';

export default Ember.Component.extend({
  didInsertElement: function() {
    var quill = new Quill('#full-editor', {
      modules:  {
        'multi-cursor': true,
        'toolbar': { container: '#full-toolbar' },
        'link-tooltip': true
      },
      theme: 'snow'
    });
  }
});

And inside the app/templates/components/quill-text.hbs

{{yield}}

<div class="quill-wrapper">
  <!-- The toolbar container -->
  <div id="full-toolbar">
    <select title="Font" class="ql-font">
      <option value="sans-serif" selected="">Sans Serif</option>
      <option value="serif">Serif</option>
      <option value="monospace">Monospace</option>
    </select>
    <select class="ql-size">
      <option value="small">Small</option>
      <option value="normal" selected>Normal</option>
      <option value="large">Large</option>
      <option value="huge">Huge</option>
    </select>
    <span class="ql-format-group">
      <span title="Bold" class="ql-format-button ql-bold"></span>
      <span class="ql-format-separator"></span>
      <span title="Italic" class="ql-format-button ql-italic"></span>
      <span class="ql-format-separator"></span>
      <span title="Underline" class="ql-format-button ql-underline"></span>
      <span class="ql-format-separator"></span>
      <span title="Strikethrough" class="ql-format-button ql-strike"></span>
    </span>
    <span class="ql-format-group">
      <span title="List" class="ql-format-button ql-list"></span>
      <span class="ql-format-separator"></span>
      <span title="Bullet" class="ql-format-button ql-bullet"></span>
      <span class="ql-format-separator"></span>
      <select title="Text Alignment" class="ql-align">
        <option value="left" label="Left" selected=""></option>
        <option value="center" label="Center"></option>
        <option value="right" label="Right"></option>
        <option value="justify" label="Justify"></option>
      </select>
    </span>
    <span class="ql-format-group">
      <span title="Link" class="ql-format-button ql-link"></span>
    </span>
  </div>
  <!-- Create the editor container -->
  <div id="full-editor">
  </div>
</div>

And then i just called {{quill-text}} from one of my templates and it worked. Also something to keep in mind, there is no styling by default. So i just went to the QuillJS website and inspected the element on one of their examples and just copied their CSS.

Good luck!

4

@oismail91 I don’t use Quill but this component would only ever allow a single instance of the component to be active at once. I suggest doing something like:

 export default Ember.Component.extend({
  quill: null,
  didInsertElement: function() {
    this.quill = new Quill(this.elementId + ' .full-editor', {
      modules:  {
        'multi-cursor': true,
        'toolbar': { container: this.elementId + ' .full-toolbar' },
        'link-tooltip': true
      },
      theme: 'snow'
    });
  }
});

And then changing <div id="full-editor"> to just be <div class="full-editor"> along with the #full-toolbar

5

@jasonmit Thanks! You saved me from a problem I would have in a couple days when I would have tried to create multiple instances.