How do I wrap tinyMCE inside a polymer element?

问题

So I'd like to create a polymer-element that usually just displays content, but when the edit-attribute is present then tinymce should appear inline.

This is what I have so far:

<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>

As you can see right now I'm not even using the edit-attribute as a condition. I'm just trying to initialize tinyMCE, but it doesn't work. I'm guessing this is because tinyMCE can't get to the element via the selector, because the element is in a shadow-DOM. Am I correct?

So how else should I do this? I'm very surprised that I couldn't find anyone on Google who has tried to do the same thing.

回答1:

I fixed it doing this:

<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>

来源：https://stackoverflow.com/questions/24728265/how-do-i-wrap-tinymce-inside-a-polymer-element