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>

正如您现在所看到的，我甚至没有使用edit-attribute作为条件。我只是想初始化tinyMCE，但它不起作用。我猜这是因为tinyMCE无法通过选择器访问元素，因为该元素位于shadow-DOM中。我是对的吗？

那我该怎么做呢？我很惊讶我在Google上找不到任何试图做同样事情的人。

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>

如何将tinyMCE包裹在聚合物元素中？

1 个答案: