Html 如何将tinyMCE包裹在聚合物元件内？

所以我想创建一个聚合元素，它通常只显示内容，但是当edit属性存在时，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>

聚合物（“物品小部件”{
编辑：false，
就绪：函数（）{
tinymce.init({
选择器：“div#content”，
主题：“现代”，
插件：[
[“advlist autolink图像列表charmap打印预览hr锚定页面中断拼写检查器”]，
[“searchreplace wordcount visualblocks visualchars代码全屏插入日期时间媒体非中断”]，
[“保存表格上下文菜单方向性表情模板粘贴”]
],
添加卸载触发器：false，
模式：“html5”，
是的，
工具栏：“撤消重做|样式选择|粗体斜体|对齐左对齐中心对齐右对齐对齐对齐对齐|粗体numlist outdent缩进|链接图像|打印预览介质”，
状态栏：false，
});
}
})

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

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

我通过这样做修复了它：

<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:null，
编辑：false，
initTinyMCE:function（）{
if（this.$tinymce==null）{
this.$tinymce=$（''+this.innerHTML+''）；
$（this.html）（this.tinymce）；
这个.$tinymce.tinymce({
主题：“现代”，
皮肤：“光”，
插件：[
[“advlist autolink图像列表charmap打印预览hr锚定页面中断拼写检查器”]，
[“searchreplace wordcount visualblocks visualchars代码全屏插入日期时间媒体非中断”]，
[“保存表格上下文菜单方向性表情模板粘贴”]
],
添加卸载触发器：false，
模式：“html5”，
是的，
修复了工具栏容器：“#工具栏”，
工具栏：“撤消重做|样式选择|粗体斜体|对齐左对齐中心对齐右对齐对齐对齐对齐|粗体numlist outdent缩进|链接图像|媒体”，
状态栏：false，
梅努巴：错，
content\u css:“/css/cake.generic.css”，
});
}
},
destroyTinyMCE:function（）{
if（this.$tinymce！==null）{
var content=this.$tinymce.attr（'value'）；
此.$tinymce.remove（）；
此项。$tinymce=null；
$（this.html（content）；
}
},
就绪：函数（）{
if（this.edit）{
this.initTinyMCE（）；
}
}
})

你显然看到了斯波克的反应。如果其他人对此感到好奇，那就是：这是有效的，因为你完全避免了阴影。如果删除

模板

元素（这是不必要的），它将得到改进。但是，如果您尝试将小部件放在另一个元素的

（阴影根）中，它仍然会有问题。感谢您提供的信息，现在我更好地理解了它的工作原理和限制。我试图找到一种用实际节点引用而不是选择器初始化TinyMCE的方法，但它似乎不受支持。此外，尽管可以编写一个与

document.querySelector

一起使用的选择器，TinyMCE还是使用了Sizzle。让TinyMCE初始化正确的元素是第一步的问题。