如何將tinyMCE包裹在聚合物元素內部？

Question

所以我想創建一個通常只顯示內容的聚合物元素，但是當edit-attribute存在時，tinymce應該以內聯方式顯示。

這是我到目前爲止有：

<polymer-element name="article-widget" attributes="edit"> 
    <template> 
     <div id="content"><content></content></div> 
    </template> 
    <script> 
     Polymer('article-widget', { 
      edit: false, 
      ready: function() { 
       tinymce.init({ 
        selector: "div#content", 
        theme: "modern", 
        plugins: [ 
         ["advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker"], 
         ["searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking"], 
         ["save table contextmenu directionality emoticons template paste"] 
        ], 
        add_unload_trigger: false, 
        schema: "html5", 
        inline: true, 
        toolbar: "undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image  | print preview media", 
        statusbar: false, 
       }); 
      } 
     }) 
    </script> 
</polymer-element> 

正如你可以看到，現在我還沒有使用編輯屬性作爲條件。我只是試圖初始化tinyMCE，但它不起作用。我猜這是因爲tinyMCE不能通過選擇器到達元素，因爲元素在shadow-DOM中。我對麼？

那麼我該怎麼做呢？我很驚訝，我找不到任何人試圖做同樣的事情。

Answer 1

我固定它這樣做：

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

<polymer-element name="article-widget" attributes="edit"> 
    <template> 
     <content></content> 
    </template> 
    <script> 
     Polymer('article-widget', { 
      $tinymce: null, 
      edit: false, 
      initTinyMCE: function() { 
       if (this.$tinymce === null) { 
        this.$tinymce = $('<div>' + this.innerHTML + '</div>'); 
        $(this).html(this.$tinymce); 
        this.$tinymce.tinymce({ 
         theme: "modern", 
         skin: "light", 
         plugins: [ 
          ["advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker"], 
          ["searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking"], 
          ["save table contextmenu directionality emoticons template paste"] 
         ], 
         add_unload_trigger: false, 
         schema: "html5", 
         inline: true, 
         fixed_toolbar_container: "#toolbar", 
         toolbar: "undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | media", 
         statusbar: false, 
         menubar: false, 
         content_css : "/css/cake.generic.css", 
        }); 
       } 
      }, 
      destroyTinyMCE: function() { 
       if (this.$tinymce !== null) { 
        var content = this.$tinymce.attr('value'); 
        this.$tinymce.remove(); 
        this.$tinymce = null; 
        $(this).html(content); 
       } 
      }, 
      ready: function() { 
       if (this.edit) { 
        this.initTinyMCE(); 
       } 
      } 
     }) 
    </script> 
</polymer-element>