1

I want to use trumbowyg.js in my polymer element, it includes jquery.js and trumbowyg.js. It works fine in Firefox but not in chrome.

It gives error, may be because shadow dom lookup/separation in chrome. The error happens where ever trumbowyg.js uses "this".

Whats going wrong here? What should I do differently?

I am using Polymer 2.0

error:

Uncaught TypeError: Cannot read property 'toLowerCase' of undefined at trumbowyg.js:1544

my-notes.html 

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

    <dom-module id="my-notes">
    <template>

    <link rel="stylesheet" href="../bower_components/trumbowyg/dist/ui/trumbowyg.min.css">
  <firebase-auth user="{{user}}" signed-in="{{signedIn}}"></firebase-auth>
          <div class="card">
              <div id="trumbowygd">hello</div>
          </div>

         </template>
         <script>
    class MyNotes extends Polymer.Element {

      static get is() { return 'my-notes'; }
static get properties() {
        return {

          user: {
            type: Object,
            observer: '_shownotearea'
          },
        };
      }


      _shownotearea(){
        var myFineElement = this.$.trumbowygd;
        myFineElement.innerHTML="hello nice meeting you";
                 $(myFineElement).trumbowyg({});

      }
</script>

    </dom-module>

trumbowyg.html

<script src="../jquery/dist/jquery.min.js"></script>
<script src="dist/trumbowyg.js"></script>

This doesnt seem to be working jQuery plugins and Polymer elements

4

1 回答 1

1

简短的回答是这个插件可能不适用于本机 Shadow DOM。

可能 trumbowyg 正在尝试查询文档以查找某些元素。Shadow DOM 创建标记封装，因此您不能使用$()或document.querySelector查找影子根内部的内容。一般来说，出于这个原因，我建议不要在 Shadow DOM 中使用 jQuery 插件。

于 2017-06-24T22:04:48.540 回答