如何在 Polymer 元素中包含 tinyMCE？

Question

我希望创建一个polymer元素，通常只用于显示内容，但是当"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中。我正确吗？

那么我应该怎么做呢？我非常惊讶，竟然找不到任何在Google上尝试做同样事情的人。

- Evert

---

你显然已经看到了spocke的回复。如果还有其他人感兴趣，这是链接：http://www.tinymce.com/forum/viewtopic.php?pid=113839#p113839 - badsyntax

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>

- Evert

---

这是有效的，因为您完全避免了ShadowDOM。如果您删除不必要的“template”元素，它将得到改进。但是，如果您尝试将其放入另一个元素的<template>（影子根），则您的小部件仍将存在问题。 - Scott Miles

谢谢提供信息，现在我更好地理解它的工作原理和限制。 - Evert

我尝试找到一种使用实际节点引用而不是选择器来初始化TinyMCE的方法，但似乎不受支持。此外，虽然可以编写适用于document.querySelector的选择器，但TinyMCE使用的是Sizzle。让TinyMCE初始化正确的元素是第一步问题。 - Scott Miles