Использование полимера с внешними файлами js

Я хочу использовать trumbowyg.js в своем полимерном элементе, он включает в себя jquery.js и trumbowyg.js. Он отлично работает в Firefox, но не в Chrome.

Это дает ошибку, возможно, из-за поиска/разделения теневого дома в хроме. Ошибка возникает везде, где trumbowyg.js использует «это».

Что здесь не так? Что мне делать по-другому?

Я использую Полимер 2.0

ошибка:

Uncaught TypeError: Невозможно прочитать свойство toLowerCase неопределенного в trumbowyg.js:1544

мои заметки.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>

Похоже, это не работает плагины jQuery и элементы Polymer


person Dheeraj Sarwaiya    schedule 23.06.2017    source источник


Ответы (1)


Короткий ответ: этот плагин, вероятно, не будет работать с родным Shadow DOM.

Скорее всего, trumbowyg пытается запросить документ, чтобы найти какой-то элемент. Shadow DOM создает инкапсуляцию разметки, поэтому вы не можете использовать $() или document.querySelector для поиска вещей внутри теневых корней. В общем, по этой причине я рекомендую не использовать плагины jQuery внутри Shadow DOM.

person robdodson    schedule 24.06.2017
comment
Спасибо за ваш ответ. полимерное перо — это еще один WYSIWYG, но он не работает с полимером 2.0. Вы случайно не знаете что-то, что может работать с Polymer2? Спасибо - person Dheeraj Sarwaiya; 25.06.2017
comment
Это работает с полимером2. Спасибо. webcomponents.org/element/arsnebula/polymer-quill - person Dheeraj Sarwaiya; 25.06.2017
comment
Я написал сообщение в блоге на эту тему, чтобы попытаться лучше объяснить, что происходит. robdodson.me/dont-use-jquery-with-shadow-dom - person robdodson; 25.06.2017