Uncaught TypeError: $(...).trumbowyg is not a function

1

Hi there,

I am trying to add an editor to my page and I am getting the following error:
startup.js:7Uncaught TypeError: $(…).trumbowyg is not a function

I have followed the instructions from:
http://alex-d.github.io/Trumbowyg/

What I have done is in my index.html file I have added the css to my header and the js to my body.
This is the same as I have done with all my other files and they have worked.

In my startup.js file which is in the root of the client folder I have:
import { Meteor } from ‘meteor/meteor’;

Meteor.startup(() => {
     $(document).ready(function() {
    $('#trumbowyg-demo').trumbowyg();
    });
});

I have also tried:

Meteor.startup(() => {
   $('#trumbowyg-demo').trumbowyg();
});

In my page I have:

<div className="body rows scroll-y">
        <br/><br /><br />
    <div id="trumbowyg-demo"></div>
</div>

When I am on my page in the browser and I type:

trumbowyg(); into the console it shows the error:
startup.js:7Uncaught TypeError: $(…).trumbowyg is not a function

I have updated meteor to 1.3.2.4

Is there a way to debug why this may be happening?
I have tried adding the css/js files to the bottom of my files etc to see if it is load order etc.

2

Why not install the npm package and import from there?

3

I have tried this already but it did not work. When using a npm package how do I know what to import at the top of the file?
import { ? } from ‘node_modules/trumbowyg’;

4

So I was just able to add this to a project via npm. I copied the icons.svg to my /public directory and then used the following:

In the top of your .js file:

import trumbowyg from 'trumbowyg';

To initialize (probably in your onRendered):

$.trumbowyg.svgPath = '/icons.svg'; // to set the icons path
$('#myDiv').trumbowyg(); // to init the editor