How to use exteranl javascript and css libs in element?

[dokfile...@gmail.com]

Hi All,

I am try create Polymer element that use : https://alex-d.github.io/Trumbowyg/

I did this:

 

<link rel="import" href="../bower_components/polymer/polymer.html">

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="../trumbowyg/dist/trumbowyg.min.js"></script>

 
 <dom-module id="drtv-editor">


      <template>

        <link rel="stylesheet" href="../trumbowyg/dist/ui/trumbowyg.min.css">

        <style>

          /* CSS rules for your element */

        </style>


       <div id="editor">fgdfgfdgfd</div> <!-- data bindings in local DOM -->

      </template>

 

      <script>

     

 


         Polymer({

            is: 'drtv-editor',

            ready: function() {

               $(this.$.editor).trumbowyg();

   
            }

         });

      </script>

</dom-module>

 

But when I try use it I get this:

I get a lot of error, and render do not work!

Any idea?

Thanks

[abhishek gupta]

The problem is not the usage of external library,, but with polymer's usage itself.
Polymer hashes (this.$.) are not ready during ready callback. If you change your ready callback to attached it should work.

[dokfile...@gmail.com]

I changed, but I get same result!

Any idea? tks

[abhishek gupta]

Will `this` have a different meaning inside jquery's `$` (I haven't worked a lot with jquery that's why i'm asking) ? Can you try printing `this.$.editor` before using it in attached callback

[Dheeraj]

Hi,

Did you get a solution? I am stuck with the same problem. I didnt get any response on Stackoverflow.

https://stackoverflow.com/questions/44728763/using-polymer-with-external-js-files

Thanks,

[Dheeraj]

This works

https://www.webcomponents.org/element/arsnebula/polymer-quill